为Kindeditor控件增加图片自动上传作用,php中常用编辑器推荐

ca88会员登录中心 9
ca88会员登录中心

eWebEditor除了具有前台的调用功能外,还具有很强的后台管理功能,能够对编辑器多种功能进行各种有效的自定义,具体如下:

什么是 WebHtmlEditor ?

  Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果。它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET、PHP、ASP、Java等。官方网站可以查看这里:

Excel工作表导入(V4.3)
eWebEditor最新提供Excel工作表导入解决方案,支持Excel中图片、图表的导入并自动上传到服务器。并提供了是否使用VML格式的导入选项,如不使用VML格式,则在导入时图表将自动生成图片,并自动上传到服务器。大大方便了利用Excel办公文档发布的需要。
Word文档导入及本地文件自动上传(V4.0)
eWebEditor最新提供Word文档导入解决方案,支持Word文档中图片、图表的导入并自动上传到服务器。并提供了是否使用VML格式的导入选项,如不使用VML格式,则在导入时图表将自动生成图片,并自动上传到服务器。本地自动上传功能不仅在Word导入中可用,其它所有本地的文件都可以自动上传到服务器。大大方便了利用Word办公文档发布的需要。
纯静态(V3.0)
eWebEditor采用先进的前后台分离结构,前台纯为html格式的静态网页形式,加上服务器端的高级功能接口,大大提高了效率,且又具有强大的自定义功能。同时也使得eWebEditor能最佳的融入您的产品。
多语言(V3.0)
eWebEditor以语言包的形式进行语言封装,并能够跟据用户的系统自动选择适合的语言,并能跟据由于语言文字多少不同而自动调整界面,真正做到了语言包的完全个性定制。当前以有的语言包:简体中文、繁体中文、英文,并正不断加入中。
多平台(V3.0)
eWebEditor具有多个平台的不同版本,能够适应各种平台上的需要。各版本具有针对性的跟据不同开发语言的特点,进行最大优化。当前已有ASP版、ASP.NET版、PHP版、JSP版。
大量常用功能按钮
eWebEditor包含了日常所要用到所有的样式功能,如复制、剪切、粘贴、表格、图片、文件、字体、颜色等,并在不断的补充中。
内附文件上传功能
eWebEditor内涉及的文件相关的功能中,如图片来源,媒体文件来源,附件来源等,都自带有从客户端直接上传到服务器端的功能。
功能界面可自定义
eWebEditor内的功能按钮及显示样式允许自定义。您可以根据自己实际需要定制各按钮的图片,样式,按钮功能的个数等。
同时多个编辑器支持
可以在同一个表单Form里有多个eWebEditor,也可以在同一页里有多个eWebEditor,也可以有多个样式不同的eWebEditor。
大文件支持
一般的输入框有102399字节的限制(100K左右),大文本内容不能使用,而eWebEditor理论上支持无限大文件。
多样式支持
您只需要在您的整个网站中使用一个eWebEditor,可以定制多个样式,在不同的地方使用不同的样式,而没必要在要用的地方都要拷进去。如:一个样式适合宽度为400的屏幕,共10个工具按钮;一个样式适合宽度为500的屏幕,共15个按钮等。
前台支持
一般很多使用都把涉及HTML编辑功能的脚本程序都放在管理员的后台管理中进行,而如允许用户在线投稿的前台却不敢使用,怕的是恶意的脚本。eWebEditor自带有一个解释函数,方便前台显示,根据不同的参数样式显示相应的HTML脚本,去除恶意脚本。
调用简单
在编程开发时,只要写一句代码就可以完成eWebEditor的调用。
自动提交
现在很多的在线编辑器,在编辑完后,都要点一下保存功能,或者在提交按钮中加入脚本进行处理,然后再提交,而eWebEditor只需加入调用的那一行外,无需上面的操作处理。
自动获取远程文件
利用远程文件自动获取功能,可以把别人服务器上的图片等文件自动传到自己的服务器,不要当心别人的站点关了,本地链接的文件不存在的问题,也不要再一个个下载下来再传上去了,全过程完全自动。
相对或绝对路径
对于在线编辑器来说,路径问题一直是一个难点,基本上市面上的在线编辑器所编辑出来的内容链接都用的是带域名的绝对全路径(如:ca88会员登录中心 1)。eWebEditor充分解决了此问题,只要简单设置一下三种路径形式可选(相对路径、绝对根路径、绝对全路径),完全摆脱了站点或系统或目录迁移而带来的路径问题。
图形热点链接
eWebEditor的此应用绝对是所有在线编辑器软件中的始创,能够在线编辑实现图形的热点链接功能,即一个图片可以按区块链接到多个地址。
艺术字(V3.6)
利用eWebEditor此功能可以在网页上插入类似word艺术字效果的文字,超好的视觉效果。
状态保持
现在很多的在线编辑器,在提交后,如果服务器端较验没成功,点击“退回”时,原来编辑器中编辑的内容就会丢失,而eWebEditor会保持编辑后的状态,并且能够与Reset按钮同步Reset。
智能粘贴
eWebEditor具有三种粘贴方式,常规方式粘贴,纯文本方式粘贴,或者以Word方式粘贴,如果剪贴板中的内容是Word形式的,将有提示是否去除Word格式,因为Word粘进来文档可是非常非常的大,冗余的代码实在的多。
大小自适应
eWebEditor可以按你调用的宽度和高度自适应编辑器的大小,特别是高度,这是很多编辑器所不具有的,大大方便了调用,使页面能够达到更好的效果。
多种编辑模式
eWebEditor具有4种编辑模式,有:HTML代码模式、可视设计模式、纯文本模式、预览模式,可以满足所有应用的需要。
完善的接口
eWebEditor作为一个强大的在线编辑模块,提供了完善的接口,满足更高级用户的需要,您可以通过接口实时控制或者获取编辑器的内容或者状态。
eWebEditor技术特点:

        她是一个网页的在线文本编辑器,她能够在网页上实现许多桌面编辑软件(如:Word)所具有的强大可视编辑功能;她是一个真正的绿色软件,不需要在计算机上安装任何的客户端软件,允许无商业目的个人用户免费使用。
如在商业上使用请与我联系。
为什么要使用WebHtmlEditor ?
        因为她除了具有前台的调用功能外,还具有很强的后台管理功能,能够对编辑器多种功能进行各种有效的自定义。

  Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改。

eWebEditor不仅仅是一个产品,更是一个WEB技术的代表,她融入了我们对WEB技术应用的展望。

ca88会员登录中心 2 在 IE 下使用 SPAN + IFRAME 模拟弹出窗口
可以完全跳过拦截弹出窗口的 IE 插件。

  在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复制到Kindeditor编辑器中,而不会从一张白纸开始编写内容。如果所复制的内容中包含图片,则需要首先将图片从源地址下载到本地,然后将其上传到本网站所在的服务器,否则图片仍然会指向你所复制的页面或者文档,这会导致图片可能在页面中无法正确打开。编辑人员往往要处理许多的文档,这样的操作无疑非常繁琐。能否让Kindeditor自动识别粘贴到其中的内容,并将图片自动上传到服务器呢?下面的代码实现了这一功能。

完全源代码
eWebEditor所有版本都完全源程序提供,使得开发人员更能了解其内部的动作,使得程序能够得到更好的调试安装,并能得到适应自己的最佳扩展。
绿色软件
eWebEditor不需要在服务器端安装特定的组件,自身也不带组件,使得软件基本可以在所有的Internet虚拟主机上使用。同时,她不需要在客户端安装任何插件,做到真正的绿色。
代码规范
eWebEditor是一个软件产品,在程序编码中,我们始终强调其编码的规范性。我们不仅仅需要的是一个产品应用,我们更需要的是一个编程规范。我们在产品的不断完善同时,完善我们的编码规范。如适当的注释,很好的组织结构,使其也成为编程人员的学习参考资料。我们也将定时发布我们的编码规范。挑战无处不在,挑战代码极限!
强大错误自检
eWebEditor在程序编写中对每个变量、参数都进行了严格的错误检测,不管用户如何操作,绝不出现意料之外的信息,防止程序漏洞的产生。
绝无后门
我们经常发现在网上下载的很多程序都自带有后门,不但可以影响此软件的正常使用,更有的可以破坏整个网站。此例子很多,在此不赘述,不管他们出自什么用心,我们是绝不会这样做的。
eWebEditor使用特点:

  有关如何在页面中使用Kindeditor可以去查看官方网站的文档,这里不再详细介绍。

eWebEditor是一个所见即所得的在线编辑器。顾名思义,就是能在网络上使用所见即所得的编辑方式进行编辑图文并茂的文章、新闻、讨论贴、通告、记事等多种文字处理应用。其主要特点如果下:

ca88会员登录中心 3 支持XHTML 1.0
可以选择输出的内容完全符合 (W3C) 的 XHTML 标准。

  实现该功能的基本思路:在Kindeditor编辑器的keyup事件中添加代码,以检查编辑器的内容中是否包含图片;找出需要自动上传到服务器的图片,通过Ajax方式调用图片上传程序将图片上传到服务器;在Ajax的回调函数中将对应图片的src地址修改为本地相对地址。

所见即所得
即通过编辑器编辑的文字、图片等HTML标记输出到页面的效果和编辑时显示的效果一致,让使用者方便地对编辑的内容进行修改、排版等。
自动转换为HTML代码
在编辑状态编辑的文字、图片等内容都在后台自动转换为可被浏览器识别的HTML标记语言,使用者更能在代码状态在对代码标记进行修改。
简单易用
编辑器的编辑及使用方法与FrontPage、Dreamweaver等著名主页制作软件类似。无需任何HTML语法知识、儍瓜式的操作让即使没有主页制作经验的使用者也能快速上手。
方便快捷
使用所见即所得的编辑器能快捷、方便地编辑出效果一流的图文效果,如果使用纯手工编写代码的方法编辑则需要浪费大量时间及精力。

  该功能不支持将Word中的图片复制出来并上传到服务器。

附件: 
eWebEditor_v38_php.rar
(390 K)
FCKEditor v2.3 多国语言版
在线网页编辑插件(用浏览器编辑后所见即所得),支持多种平台下的脚本(asp,aspx,php,cfm,Dhtml,htc),还集成了上传图片组件。2.3
版载入速度快3倍,而且不再那么容易出错

ca88会员登录中心 4 多浏览器支持
可以同时支持市场上的几个主流浏览器: IE 5.5+, Firefox 1.0+, Mozilla 1.3+,
Netscape 7+ and Safari (1.3+)。
ca88会员登录中心 5

ca88会员登录中心 6

附件: 
FCKeditor_2.3.zip
(957 K)

ca88会员登录中心,  上图是最终实现效果。程序会自动识别编辑器中的内容,如果有图片需要上传,则会在编辑器的顶部显示一条提示信息。用户点击“上传”链接,程序会通过Ajax请求调用图片上传程序,并在回调函数中将对应图片的src地址修改为本地相对地址。

附件: 
FCKeditor_2.3.2.tar.gz
(618 K)

ca88会员登录中心 7 多语言支持
WebHtmlEditor以公开语言包的形式进行语言封装,并能够跟据用户的系统自动选择适合的语言,用户可以根据所在的不同区域自定义语言包。

  具体实现步骤及相关代码:

TinyMce

1. Kindeditor编辑器修改

官方网站:

ca88会员登录中心 8 大量常用功能按钮
WebHtmlEditor包含了日常所要用到所有的样式功能,如复制、剪切、粘贴、表格、图片、文件、字体、颜色等,并在不断的补充中。

  找到kindeditor.js文件,在keyup()事件中添加自定义代码。不同版本的Kindeditor所提供的代码差别可能会比较大,需要借助于官方文档进行查找。本文基于Kindeditor
4.1.10版本。

简体中文语言包GB2312:
tinylpackage_zh_cn.rar

ca88会员登录中心 9

简体中文语言包UTF-8:
tinylpackage_zh_cn_utf8.rar

ca88会员登录中心 10 内附文件上传功能
WebHtmlEditor内涉及的文件相关的功能中,如图片来源,Flash文件来源,媒体文件来源,其他类型文件来源等,都自带有从客户端直接上传到服务器端的功能。

2. auto.js文件代码

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是PHP,那还可以进一步优化。最重要的是,TinyMCE是一个根据LGPL
license发布的自由软件,你可以把它用于商业应用。

function df() {
    var haspicContainer = document.getElementById("has_pic");
    if (haspicContainer == null) {
        haspicContainer = document.createElement("div");
        haspicContainer.id = "has_pic";
        haspicContainer.innerHTML = "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>您有图片需要上传到服务器</b>&nbsp;&nbsp;<a href='javascript:uploadpic();' >上传</a></div><div id='confirm'></div>";
        $(".ke-toolbar").after(haspicContainer);
    }

    var img = $(".ke-edit-iframe").contents().find("img");

    var piccount = 0;
    var sstr = "";
    $(img).each(function (i) {
        var that = $(this);
        if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {
            piccount++;
            if (i == $(img).length - 1)
                sstr += that.attr("src");
            else
                sstr += that.attr("src") + "|";
        }
    });

    $("#piclist").val(sstr);
    document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none";
}

function closeupload() {
    $("#has_pic").hide();
    $("#upload").show();
}

function uploadpic() {
    var piclist = encodeURI($("#piclist").val());
    if (piclist.length == 0) return false;

    $.ajax({
        url: "asp.net/uploadpic.ashx",
        data: "pic=" + piclist,
        type: "GET",
        beforeSend: function () {
            $("#upload").hide();
            $("#confirm").text("正在上传中...");
        },
        success: function (msg) {
            if (msg !== "") {
                var str = new Array();
                str = msg.split('|');
                var img = $(".ke-edit-iframe").contents().find("img");

                $(img).each(function (i) {
                    var that = $(this);
                    if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {
                        that.attr("src", "/uploads/image/" + str[i]);
                        that.attr("data-ke-src", "/uploads/image/" + str[i]);
                    }
                });

                $("#confirm").html(img.length + "张图片已经上传成功!&nbsp;&nbsp;<a href='javascript:closeupload();'>关闭</a>");
            }
            else $("#confirm").text("上传失败!");
        }
    });
}

附件: 
tiny2_0_8_dev.rar
(888 K) 下载次数:1

ca88会员登录中心 11 同时多个编辑器支持
可以在同一个表单Form里有多个WebHtmlEditor,也可以在同一页里有多个WebHtmlEditor。

  其中的$(“.ke-edit-iframe”).contents().find(“img”)用来查找编辑器内容中的所有图片。默认情况下,编辑器的内容被存放在iframe元素中,该iframe拥有class=”ke-edit-iframe”的属性。程序会判断每个图片src属性的值中是否包含”

您可能感兴趣的文章:

  • 让Editplus成为强大的PHP编辑器
  • PHP网页 Ewebeditor
    编辑器嵌入方法
  • php下FCKeditor2.6.5网页编辑器的使用方法
  • ThinkPHP中FCKeditor编辑器的使用方法
  • ajax
    php实现给fckeditor文本编辑器增加图片删除功能
  • 针对PHP环境下Fckeditor编辑器上传图片配置详细教程
  • phpstorm编辑器乱码问题解决
  • 推荐5款跨平台的PHP编辑器
  • php单文件版在线代码编辑器

3. uploadpic.ashx文件代码

ca88会员登录中心 12 前台支持
一般很多使用都把涉及HTML编辑功能的脚本程序都放在管理员的后台管理中进行,而如允许用户在线投稿的前台却不敢使用,怕的是恶意的脚本。WebHtmlEditor自带有一个解释函数,方便前台显示,根据不同的参数样式显示相应的HTML脚本,去除恶意脚本。

public class uploadpic : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string pic = context.Request.QueryString["pic"];

        string[] arr = pic.Split('|');
        string sstr = "";
        UpLoadIMG st = new UpLoadIMG();
        for (int i = 0; i < arr.Length; i++)
        {
            if (arr[i].IndexOf("http://") >= 0 || arr[i].IndexOf("https://") >= 0)
            {
                string std = st.SaveUrlPics(arr[i], "../../uploads/image/");
                if (std.Length > 0)
                {
                    if (i == arr.Length - 1)
                        sstr += std;
                    else
                        sstr += std + "|";
                }
            }
        }
        context.Response.Write(sstr);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

public class UpLoadIMG
{
    public string SaveUrlPics(string imgurlAry, string path)
    {
        string strHTML = "";
        string dirPath = HttpContext.Current.Server.MapPath(path);

        try
        {
            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }
            string ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
            dirPath += ymd + "/";
            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }
            string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + imgurlAry.Substring(imgurlAry.LastIndexOf("."));

            WebClient wc = new WebClient();
            wc.DownloadFile(imgurlAry, dirPath + newFileName);
            strHTML = ymd + "/" + newFileName;
        }
        catch (Exception ex)
        {
            //return ex.Message;
        }
        return strHTML;
    }
}

  远程图片通过WebClient方法下载到服务器的相对路径”/uploads/image/”中,并且会按照日期自动生成文件夹和对应的文件名。返回的结果中包含了以”|”分隔的所有图片的本地相对地址,在步骤2的auto.js文件的uploadpic()函数中,回调方法success获取到该值并进行解析,将地址赋值给对应图片的src属性。

ca88会员登录中心 13 调用简单
在编程开发时,可以像服务器端控件TextBox,Button一样,将WebHtmlEditor加入到工具箱,然后只要拖动到页面中就可以完成WebHtmlEditor的调用。

  原文出处:kindeditor/ckeditor编辑器加+图片自动上传成功。本文中的代码做了适当调整和优化。

ca88会员登录中心 14 多种编辑模式
WebHtmlEditor具有4种编辑模式,有:HTML代码模式、可视设计模式、预览模式,可以满足所有应用的需要。

ca88会员登录中心 15 完善的接口
WebHtmlEditor作为一个强大的在线编辑模块,提供了完善的接口,满足更高级用户的需要,您可以通过接口实时控制或者获取编辑器的内容或者状态。

ca88会员登录中心 16 所见即所得
即通过编辑器编辑的文字、图片等HTML标记输出到页面的效果和编辑时显示的效果一致,让使用者方便地对编辑的内容进行修改、排版等。

ca88会员登录中心 17 自动转换为HTML代码
在编辑状态编辑的文字、图片等内容都在后台自动转换为可被浏览器识别的HTML标记语言,使用者更能在代码状态在对代码标记进行修改。

ca88会员登录中心 18 简单易用
编辑器的编辑及使用方法与FrontPage、Dreamweaver等著名主页制作软件类似。无需任何HTML语法知识、儍瓜式的操作让即使没有主页制作经验的使用者也能快速上手。

ca88会员登录中心 19 方便快捷
使用所见即所得的编辑器能快捷、方便地编辑出效果一流的图文效果,如果使用纯手工编写代码的方法编辑则需要浪费大量时间及精力。

在线演示:
下载地址:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图