CKEditor自定义按钮插入服务端图片
更新时间：2017年06月21日 09:08:30 投稿：lijiao
这篇文章主要为大家详细介绍了CKEditor自定义按钮插入服务端图片的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CKEditor 富文本编辑器很好用，功能很强大，在加上支持服务端图片上传的CKFinder更是方便，
最近在使用CKFinder的时候发现存在很多问题，比如上传图片的时候，图片不能按时间降序排列，另外CKFinder是也是收费的，所以自己想实现一个简单的类似CKFinder的功能，
本节只讲在CKEditor实现服务器图片的插入插件实现方法。
CKEditor版本是 ## CKEditor 4.4.4
第一、定义插件
1.在ckeditor\\plugins文件夹下,新建serverimg文件夹，
2.在serverimg下新建plugin.js 文件，
CKEDITOR.plugins.add(
“serverimg”,
{
requires: [“dialog”],
lang: [“en”],
init: function (editor) {
editor.addCommand(“serverimg”, new CKEDITOR.dialogCommand(“serverimg”));
editor.ui.addButton(
“serverimg”,
{
label: “插入服务端图片”,
command: “serverimg”,
icon: this.path + “images/pic.png”,
toolbar: ‘insert’
});
CKEDITOR.dialog.add(“serverimg”, this.path + “dialogs/code.js”);
}
}
);
3.在serverimg下新建image，里面存放图标使用的图片pic.png
第二、定义插件中的对话框内容
1.在serverimg中新建dialogs文件夹，
2.在dialogs文件内，分别创建code.js (用于执行弹出对话框执行的js代码)和PicPreview.html（用于浏览服务器图片）
3.code.js 代码如下
CKEDITOR.dialog.add(
“serverimg”,
function (editor) {
var timestamp = Math.round(new Date().getTime() / 1000);
var ckeditorPage = ‘../../ImgMgr/ImgBrowser.aspx?from=ckeditor×tamp=’ + timestamp;
return {
title: “插入代码”,
minWidth: 800,
minHeight: 600,
contents:
[
{
id: “tab1”,
label: “”,
title: “”,
expand: true,
padding: 0,
elements:
[
{
type: “html”,
html: “<iframe id=’img_browser’name=’img_browser’ src='” + ckeditorPage + “‘></iframe>”,
style: “width:100%;height:600px;padding:0;”// style=’width:800px;height:600px’
}
]
}
],
onOk: function () {
//插入富文本编辑器内容 window.frames[“img_browser”].document.getElementById(“hf_imgsrc”);//
var hf = document.getElementById(‘img_browser’).contentWindow.document.getElementById(“hf_imgsrc”);
if (hf != null) {
var imgSrc = hf.value;
editor.insertHtml(“<img src='” + imgSrc + “‘ />”); //将select插入编辑器
} else {
alert(“hf is null”);
}
},
//onHide: function () { document.getElementById(‘img_browser’).contentDocument.location.reload(); },
//resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
};
}
);
4.说明，由于我在弹出的对话框中插入的是一个iframe，src正好是我自己做的一个浏览服务器图片的页面，当选中图片后，点击对话框中的确定按钮，即可获取图片路径，
最终包装成img ，插入到富文本编辑器里面 ，当然你可以做的更好，允许图片设置宽度和高度，这里就不在讲了。
第三、配置插件
上面的插件开发完成后，页面上并不会显示我们开发的插件，还需要配置下config.js，找到ckeditor文件下的config.js 打开，在配置里面增加config.extraPlugins = ‘serverimg’;
第四、最终效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:FCK编辑器（FCKEditor）添加新按钮和功能的修改方法FCKeditor添加自定义按钮的方法FCKeditor添加自定义按钮
CKEditor
按钮
图片
相关文章
ASP.NET 页面之间传递值方式优缺点比较URL、Session、Cookies、Server.Transfer、Application和跨页面传送。 2009-11-11
asp.net System.Guid ToString五种格式这篇文章主要介绍了asp.net System.Guid ToString五种格式,需要的朋友可以参考下 2017-02-02
.Net Core配置与自动更新的实现方法下面小编就为大家分享一篇.Net Core配置与自动更新的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 2017-12-12
asp.net静态方法弹出对话框实现思路为菜鸟所准备……其实就是弹出JavaScript小窗口,总得来说就是定义的一个DIV,感兴趣的朋友可以了解下，或许对你学习asp.net有所帮助 2013-02-02
asp.net自定义分页控件示例这篇文章主要介绍了asp.net自定义分页控件示例,大家参考使用吧 2014-01-01
.NET发起web请求时维持Session一般使用.NET C#发起一个web请求是用WebClient类，应为使用很简单，但是每调用一次OpenRead就会在服务器启用一个新Session，使用HttpWebRequest + CookieContainer就可以让多个web请求只有一个session。 2009-05-05
.NET Core Dapper操作mysql数据库的实现方法这篇文章主要介绍了.NET Core Dapper操作mysql数据库的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2019-04-04
Asp.net core利用MediatR进程内发布/订阅详解这篇文章主要给大家介绍了关于Asp.net core利用MediatR进程内发布/订阅的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Asp.net core具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧 2019-06-06
MVC默认路由实现分页（PagerExtend.dll下载）这篇文章主要介绍了MVC默认路由实现分页，采用bootstrap的样式，文末提供了PagerExtend.dll下载地址，感兴趣的小伙伴们可以参考一下 2016-07-07
Visual Studio 2017下ASP.NET CORE的TagHelper智能提示解决办法这篇文章主要为大家详细介绍了Visual Studio 2017下ASP.NET CORE TagHelper智能提示的解决办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2017-03-03
最新评论
评论(0)