欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

怎么样使用ckeditor自定义插件

来源:本站整理 作者:佚名 时间:2017-01-02 TAG: 我要投稿

ckeditor是一款功能很强大的富文本编辑的工具,给我们提供了绝大多数功能,满足我们日常开发所用,但由于特殊情况,可能会需要修改ckeditor的插件。ckeditor提供了给我们很方便扩展插件的接口。
最经由于项目的需要,需要重写ckeditor的上传图片的功能,以下是自定义图片上传功能的部分代码:
1、在ckeditor/plugins/目录下新建editorupload目录,用来存放自定义插件;在该目录下新建目录images用来存放自定以图片,在images目录下放入插件图片image.png?www.myhack58.com.

2、在editorupload目录下新建plugin.js:
(function () {
 var a = {
   exec: function (editor) {
    //调用jsp中的函数弹出上传框,
    var url = '../view/fileupload/upload.jsp';
    openDialog({ //openDialog打开一个新窗口
     title: '插入图片',
     url: url,
     height: 600,
     width: 900,
     callback:function(){
     }
    });
   }
  },
  b = 'editorupload';
 CKEDITOR.plugins.add('editorupload', {
  init: function (editor) {
   editor.addCommand(b, a);
   editor.ui.addButton('editorupload', {
    label: '添加图片', //鼠标悬停在插件上时显示的名字
    icon: 'plugins/editorupload/images/image.png?www.myhack58.com', //自定义图标的路径
    command: b
   });
  }
 });
})();
在上面代码中,新建了一个upload.jsp页面用来上传图片,使用了openDialog弹出一个新的窗口,设置了弹出框的高度和宽度。
 CKEDITOR.plugins.add将自定义的editorupload加入到ckeditor中。
下面是部分upload.jsp页面代码:
 id="mainContent">
 
  class=" box">
   class=" m-table">
  
     width="20%"/>
     width="80%"/>
  
  
     style="vertical-align:top;"> class="module-name">图片说明
   
    
      1、《PC首页轮播图片》长宽为666×250显示效果最好;《APP首页轮播图片》长宽为422×262显示效果最好;
      3、图片提交才会在首页生效;
    
   
  
 
 
  id="Pictures" class="detailWraper nopadding" style="display: none;height: auto;">
   id="hidPicturesStatus" type="hidden" value="0"/>
   id="hidCurrPictures" type="hidden" value=''/>
   id="hidDictSuggestion" type="hidden" value=''/>
 
  
   
      id="fileQueue">
      id="picWrapper">
      id="fake-dlg-bigPic" href="javascript:void(0)" style="display: none;">
      id="dlg-bigPic" class="popImg" style="display: none;">
       class="leftBtn" href="javascript:void(0)">
       class="rightBtn" href="javascript:void(0)">
       class="closeImgBtn" href="javascript:void(0)">
       class="imgList">
      
     
    
      class="validation-summary-valid">
     
        style="display: none">
     
    
   
  
 
 
 
   id="fileUpload">批量上传
   id="submit" class="btn btn-primary" style="vertical-align: top;line-height:23px;width:112px;height: 35px;">提交照片
 
 
upload.jps页面部分的js代码:
//提交照片
  photoTaskDetail.submit = function () {
   var pictures = window.picManager._getPictures();
   if (pictures.length  1) {
    alert('请至少上传1张图片');
    return false;
   }

[1] [2]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载