elEditor

功能描述

富文本内容编辑器，用例见 elEditor.html

依赖的模块

./libs/jquery.min.js
./libs/Eleditor.min.js

快速使用

页面创建编辑器区域

  1. <div id="contentEditor"></div>

调用编辑器插件

  1. var contentEditor = new Eleditor({
  2.         // 编辑区域dom对象
  3.         el: '#contentEditor',
  4.         // 图片上传自定义方法
  5.         uploader: function(){
  6.             return new Promise(function(_resolve, _reject){
  7.                 // 图片上传方法
  8.                 _resolve(url);  // 成功调用_resolve方法传入图片地址
  9.                 _reject(msg);   //失败调用_reject方法传入失败原因
  10.             })
  11.         },
  12.         /*初始化完成钩子*/
  13.         mounted: function(){
  15.         },
  16.         /*文档内容变化*/
  17.         changer: function(){
  18.             console.log('文档修改');
  19.         },
  20.         /*自定义按钮的例子*/
  21.         toolbars: [
  22.             'insertText',
  23.             'editText',
  24.             'insertImage',
  25.             'insertLink',
  26.             'insertHr',
  27.             'delete',
  28.             //自定义一个视频按钮
  29.             {
  30.                 id: 'insertVideo',
  31.                 name: '插入视频',
  32.                 handle: function(select, controll){
  33.                     // 调用视频上传方法
  34.                     // 成功调用下面方法插入到编辑器
  35.                     contentEditor.saveState();
  36.                     contentEditor.getEditNode().after(`
  37.                         <div class='Eleditor-video-area'>
  38.                             <video src="${url}" autoplay="autoplay" controls="controls"></video>
  39.                         </div>
  40.                     `);
  41.                     contentEditor.hideEditorControllerLayer();
  42.                     return false;
  43.                 }
  44.             },
  45.             'undo',
  46.             'cancel'
  47.         ],
  48.         placeHolder: 'placeHolder设置占位符'
  49.     });

在Demo文件中演示了图片和视频的上传方法。详细文档参见 https://eleditor.fixel.cn/