幸运蛋蛋pc开奖
ckeditor是一款功能强大的富文本编辑工具,这篇文章主要为大家详细介绍了ckeditor自定义插件的使用方法,具有一定的参考价值,感兴趣的小伙伴?#24378;?#20197;参考一下

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

最经由于项目的需要,需要重写ckeditor的上传?#35745;?#30340;功能,以下是自定义?#35745;?#19978;传功能的部分代码:

1、在ckeditor/plugins/目录下新建editorupload目录,用来存放自定义插件;在该目录下新建目录images用来存放自定以?#35745;?#22312;images目录下放入插件?#35745;琲mage.png.

2、在editorupload目录下新建plugin.js:

(function () {
  var a = {
      exec: function (editor) {
        //调用jsp中的函数弹出上传框,
        var url = '../view/fileupload/upload.jsp';
        openDialog({  //openDialog打开一个新窗口
          title: '插入?#35745;?,
          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: '添加?#35745;?, //鼠标悬停在插件上时显示的名字
        icon: 'plugins/editorupload/images/image.png',  //自定义图标的路径
        command: b
      });
    }
  });
})();

在上面代码中,新建了一个upload.jsp页面用来上传?#35745;?#20351;用了openDialog弹出一个新的窗口,设置了弹出框的高度和宽度。
CKEDITOR.plugins.add将自定义的editorupload加入到ckeditor?#23567;?/p>

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

<div id="mainContent">
  </div>
  <div>
    <table>
      <colgroup>
        <col width="20%"/>
        <col width="80%"/>
      </colgroup>
      <tr>
        <td><label>?#35745;?#35828;明</label></td>
        <td>
          <ul>
            <li>1、《PC首页轮播?#35745;?#38271;宽为666×250显示效果最好;《APP首页轮播?#35745;?#38271;宽为422×262显示效果最好;</li>
            <li>3、?#35745;?#25552;交才会在首页生效;</li>
          </ul>
        </td>
      </tr>
    </table>
  </div>

  <div id="Pictures">
    <input id="hidPicturesStatus" type="hidden" value="0"/>
    <input id="hidCurrPictures" type="hidden" value=''/>
    <input id="hidDictSuggestion" type="hidden" value=''/>
    <table>
      <tr>
        <td>
          <div id="fileQueue"></div>
          <div id="picWrapper"></div>
          <a id="fake-dlg-bigPic" href="javascript:void(0)"></a>
          <div id="dlg-bigPic">
            <a href="javascript:void(0)"></a>
            <a href="javascript:void(0)"></a>
            <a href="javascript:void(0)"></a>
            <div>
              <ul></ul>
            </div>
          </div>
          <div>
            <ul>
              <li></li>
            </ul>
          </div>

        </td>
      </tr>
    </table>
  </div>
  <div>
    <button id="fileUpload">批?#21487;?#20256;</button>
    <button id="submit">提交照片
    </button>
  </div>
</div>

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

//提交照片
    photoTaskDetail.submit = function () {
      var pictures = window.picManager._getPictures();
      if (pictures.length < 1) {
        alert('请至少上传1张?#35745;?);
        return false;
      }
      for (var i in pictures) {
        var imgPath = "<img src='" + staticFileRoot + pictures[i].URL + "'/>";
        var element = window.parent.CKEDITOR.dom.element.createFromHtml(imgPath);
        window.parent.CKEDITOR.instances.editorContent.insertElement(element);
      }
      parent.closeDialog(false);
    }

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

config.extraPlugins += (config.extraPlugins ? ',editorupload' : 'editorupload');
CKEDITOR.editorConfig = function( config ) {
  config.font_names= '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;?#33258;??#33258;?微软雅黑/微软雅黑;'+ config.font_names;
  config.language = 'zh-cn';
  config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');
  config.extraPlugins += (config.extraPlugins ? ',editorupload' : 'editorupload');
  CKEDITOR.config.lineheight_sizes = CKEDITOR.config.lineheight_sizes +  '30px'; 
  config.height = 650;
  config.toolbarCanCollapse = true;
  config.uiColor = '#90B8E9';
  config.toolbar = 'Full';
  config.toolbar_Full = [
   { name: 'document',  items: [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
   { name: 'clipboard',  items: [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
   { name: 'links',    items:['Link','Unlink']},
   { name: 'insert',   items:['HorizontalRule','Table','Image'] },

   '/',
   { name: 'basicstyles', items: [ 'Bold','Underline','Strike','Subscript','Superscript','-','RemoveFormat'] },
   { name: 'paragraph',  items: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
   { name: 'styles',items: ['lineheight','Format','Font','FontSize']},
   { name: 'colors',items: ['TextColor', 'BGColor']},
   { name: 'tools', items : [ 'Maximize','editorupload'] }
];

将editorupload插件加入到ckeditor?#23567;?
以下是实现的部分截图:

实现总结:在自定义插件过程中,必须?#35328;?#25554;件的?#35745;?#25554;入的功能给打开,负责上传的?#35745;?#19981;会被放入到ckeditor中,?#35745;?#22320;址会被自动的过?#35828;簟?#36825;可能是ckeditor版本的bug导致。有解决方案的欢迎指导。

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

最新资讯
苹果将向印度投资10亿美元:扩大iPhone硬件产能

苹果将向印度投资10亿

据外媒报道,苹果正考虑加大对印度市场的投入。据悉,该公
vivo Pay商用:发力金融业务 前网易金融总裁王磊牵头

vivo Pay商用:发力金

继昨日年度旗舰NEX 3发布之后,vivo今日公布了在金融业
盖茨基金会2019《目标守卫者》报告:全球健康大进步

盖茨基金会2019《目标

比尔及梅琳达·盖茨基金会今日发布第三份年度《目标守
支付宝小程序与微博实现互通 共建内容消费服务闭环

支付宝小程序与微博实

支付宝小程序商家也可以玩转社交裂变了。9月17日,支付
美研究发现薄荷味电子烟致癌物质超标

美研究发现薄荷味电子

美国研究人员发现,薄荷味和薄荷醇香味的电子烟以及无烟
曝三大运营商将禁止排他性竞争 恶性竞争或有望遏制

曝三大运营商将禁止排

近日,国家相关监管部门要求三大运营商禁止排他性行为,并
最新文章
自动刷新从BrowserSync开始

自动刷新从BrowserSyn

Browsersync能让浏览器实时、快速响应您的文件更?#27169;╤tm
详解React中的todo-list

详解React中的todo-li

这篇文章主要介绍了React中的todo-list的相关知识,非常
使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器

使用 CodeMirror 打造

写这个的目的是因为之前项目里用到过 CodeMirror,觉得
百度UEditor编辑器使用教程与使用方法(图文)

百度UEditor编辑器使

今天笔者就给大家推荐一款百度UEditor编辑器。关于这
Ueditor和CKeditor 两款编辑器的使用与配置方法

Ueditor和CKeditor 两

这篇文章主要介绍了Ueditor和CKeditor 两款编辑器的使
Prism 代码高亮修改不包含 Code 标签的支持

Prism 代码高亮修改不

在 WordPress 中加入了百度的 UEditor 编辑器后,由于自
幸运蛋蛋pc开奖 曾道App下载 澳洲⑤分彩 最准特碼站 易购彩票是正规的吗 新氧app是什么 在线棋牌游戏 极速时时是私人的 重庆时时彩现场开奖视频 超级大乐透预测 抢庄牛牛棋牌下载