• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

CKEditor自定义按钮插入服务端图片

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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&timestamp=' + 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';

第四、最终效果

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
开源跨平台运行服务插件TaskCore.MainForm发布时间:2022-02-05
下一篇:
Asp.net Web Api实现图片点击式图片验证码功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap