登录  /  注册
首页 > web前端 > js教程 > 正文

ckeditor自定义插件使用方法解析

赶牛上岸
发布: 2018-03-06 13:50:35
原创
2340人浏览过

ckeditor即大名鼎鼎的fckeditor,该公司的另一个产品为ckfinder(一个ajax文件管理器)。ckeditor是一款功能强大的富文本编辑工具,这篇文章主要为大家详细介绍了ckeditor自定义插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

ckeditor是一款功能很强大的富文本编辑的工具,给我们提供了绝大多数功能,满足我们日常开发所用,但由于特殊情况,可能会需要修改ckeditor的插件。ckeditor提供了给我们很方便扩展插件的接口。

最经由于项目的需要,需要重写ckeditor的上传图片的功能,以下是自定义图片上传功能的部分代码:

1、在ckeditor/plugins/目录下新建editorupload目录,用来存放自定义插件;在该目录下新建目录images用来存放自定以图片,在images目录下放入插件图片image.png.

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',  //自定义图标的路径
        command: b
      });
    }
  });
})();
登录后复制

在上面代码中,新建了一个upload.jsp页面用来上传图片,使用了openDialog弹出一个新的窗口,设置了弹出框的高度和宽度。
CKEDITOR.plugins.add将自定义的editorupload加入到ckeditor中。

下面是部分upload.jsp页面代码:

<p id="mainContent">
  </p>
  <p class=" box">
    <table class=" m-table">
      <colgroup>
        <col width="20%"/>
        <col width="80%"/>
      </colgroup>
      <tr>
        <td style="vertical-align:top;"><label class="module-name">图片说明</label></td>
        <td>
          <ul>
            <li>1、《PC首页轮播图片》长宽为666×250显示效果最好;《APP首页轮播图片》长宽为422×262显示效果最好;</li>
            <li>3、图片提交才会在首页生效;</li>
          </ul>
        </td>
      </tr>
    </table>
  </p>
  <p id="Pictures" class="detailWraper nopadding" style="display: none;height: auto;">
    <input id="hidPicturesStatus" type="hidden" value="0"/>
    <input id="hidCurrPictures" type="hidden" value=&#39;&#39;/>
    <input id="hidDictSuggestion" type="hidden" value=&#39;&#39;/>
    <table>
      <tr>
        <td>
          <p id="fileQueue"></p>
          <p id="picWrapper"></p>
          <a id="fake-dlg-bigPic" href="javascript:void(0)" style="display: none;"></a>
          <p id="dlg-bigPic" class="popImg" style="display: none;">
            <a class="leftBtn" href="javascript:void(0)"></a>
            <a class="rightBtn" href="javascript:void(0)"></a>
            <a class="closeImgBtn" href="javascript:void(0)"></a>
            <p class="imgList">
              <ul></ul>
            </p>
          </p>
          <p class="validation-summary-valid">
            <ul>
              <li style="display: none"></li>
            </ul>
          </p>
        </td>
      </tr>
    </table>
  </p>
  <p>
    <button id="fileUpload">批量上传</button>
    <button id="submit" class="btn btn-primary" style="vertical-align: top;line-height:23px;width:112px;height: 35px;">提交照片
    </button>
  </p>
</p>
登录后复制

upload.jps页面部分的js代码:

//提交照片
    photoTaskDetail.submit = function () {
      var pictures = window.picManager._getPictures();
      if (pictures.length < 1) {
        alert(&#39;请至少上传1张图片&#39;);
        return false;
      }
      for (var i in pictures) {
        var imgPath = "<img  src=&#39;" + staticFileRoot + pictures[i].URL + "&#39;/ alt="ckeditor自定义插件使用方法解析" >";
        var element = window.parent.CKEDITOR.dom.element.createFromHtml(imgPath);
        window.parent.CKEDITOR.instances.editorContent.insertElement(element);
      }
      parent.closeDialog(false);
    }
登录后复制

上面代码中,可以上传多张照片,分别将照片放入到ckeditor中。
配置ckeditor的config.js:

config.extraPlugins += (config.extraPlugins ? &#39;,editorupload&#39; : &#39;editorupload&#39;);
CKEDITOR.editorConfig = function( config ) {
  config.font_names= &#39;宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;&#39;+ config.font_names;
  config.language = &#39;zh-cn&#39;;
  config.extraPlugins += (config.extraPlugins ? &#39;,lineheight&#39; : &#39;lineheight&#39;);
  config.extraPlugins += (config.extraPlugins ? &#39;,editorupload&#39; : &#39;editorupload&#39;);
  CKEDITOR.config.lineheight_sizes = CKEDITOR.config.lineheight_sizes +  &#39;30px&#39;; 
  config.height = 650;
  config.toolbarCanCollapse = true;
  config.uiColor = &#39;#90B8E9&#39;;
  config.toolbar = &#39;Full&#39;;
  config.toolbar_Full = [
   { name: &#39;document&#39;,  items: [ &#39;Source&#39;,&#39;-&#39;,&#39;Save&#39;,&#39;NewPage&#39;,&#39;DocProps&#39;,&#39;Preview&#39;,&#39;Print&#39;,&#39;-&#39;,&#39;Templates&#39; ] },
   { name: &#39;clipboard&#39;,  items: [ &#39;Cut&#39;,&#39;Copy&#39;,&#39;Paste&#39;,&#39;PasteText&#39;,&#39;PasteFromWord&#39;,&#39;-&#39;,&#39;Undo&#39;,&#39;Redo&#39; ] },
   { name: &#39;links&#39;,    items:[&#39;Link&#39;,&#39;Unlink&#39;]},
   { name: &#39;insert&#39;,   items:[&#39;HorizontalRule&#39;,&#39;Table&#39;,&#39;Image&#39;] },
   &#39;/&#39;,
   { name: &#39;basicstyles&#39;, items: [ &#39;Bold&#39;,&#39;Underline&#39;,&#39;Strike&#39;,&#39;Subscript&#39;,&#39;Superscript&#39;,&#39;-&#39;,&#39;RemoveFormat&#39;] },
   { name: &#39;paragraph&#39;,  items: [ &#39;list&#39;, &#39;indent&#39;, &#39;blocks&#39;, &#39;align&#39;, &#39;bidi&#39; ] },
   { name: &#39;styles&#39;,items: [&#39;lineheight&#39;,&#39;Format&#39;,&#39;Font&#39;,&#39;FontSize&#39;]},
   { name: &#39;colors&#39;,items: [&#39;TextColor&#39;, &#39;BGColor&#39;]},
   { name: &#39;tools&#39;, items : [ &#39;Maximize&#39;,&#39;editorupload&#39;] }
];
登录后复制

将editorupload插件加入到ckeditor中。
以下是实现的部分截图:

实现总结:在自定义插件过程中,必须把原插件的图片插入的功能给打开,负责上传的图片不会被放入到ckeditor中,图片地址会被自动的过滤掉。这可能是ckeditor版本的bug导致。有解决方案的欢迎指导。

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

相关推荐:

django教你如何轻松使用富文本编辑器CKEditor

django教你熟练掌握富文本编辑器CKEditor的方法

Python的Flask框架中集成CKeditor富文本编辑器

以上就是ckeditor自定义插件使用方法解析的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号