my vue editor

my-vue-editor

基于vue2.x的丰富文本编辑器
中文文档

演示

单击此处查看演示
更多演示请参考示例目录

介绍

我们的编辑基于VUE-HTML5编辑二级开发。感谢其作者PeakTai提供了简洁的文本编辑器插件，我们在此基础上重写了本机方法并扩展了功能。

安装

 npm install my - vue - editor

作为插件引入

 import Vue from 'vue'
import myVueEditor from 'my-vue-editor'
Vue . use ( myVueEditor , options )

全球介绍

 < script src =" serverpath/vue.js " > </ script >
< script src =" serverpath/dist/my-vue-editor.js " > </ script >

由全局变量myVueeditor安装

 Vue . use ( myVueEditor , options )

使用

 < my-vue-editor :content =" content " @change =' ctnChange ' @imageUpload =' imageUpload ' > </ my-vue-editor > 

配置

项目	类型	描述
姓名	细绳	自定义组件名称，默认值是my-vue-editor
模块	大批	模块需要使用
图标	目的	覆盖指定的模块的图标
命令	目的	自定义命令
捷径	目的	自定义快捷方式
扩展模块	大批	自定义模块
任何内置模块名称	目的	覆盖相应的内置模块的属性

例子

 Vue . use ( myVueEditor , {
  // Overlay built-in module's icon
  icons : {
    image : 'iui-icon iui-icon-pic' ,
    indent : 'iui-icon iui-icon-insert'
  } ,
  // Modules in use
  modules : [
    'font' ,
    'bold' ,
    'italic' ,
    'underline' ,
    'linethrough' ,
    'ul' ,
    'indent' ,
    'align' ,
    'image' ,
    'quote' ,
    'todo' ,
    // This is a custom module
    'customSave'
  ] ,
  // Overlay image module's configuration
  image : {
    maxSize : 5120 * 1024 ,
    imgOccupyNewRow : true ,
    compress : {
      width : 1600 ,
      height : 1600 ,
      quality : 0.8
    }
  } ,
  // Overlay font module's configuration
  font : {
    config : {
      'xx-large' : {
        fontSize : 6 ,
        name : 'H1'
      } ,
      'medium' : {
        fontSize : 3 ,
        name : 'H2'
      } ,
      'small' : {
        fontSize : 2 ,
        name : 'H3'
      } ,
      default : 'medium'
    } ,
    // Modify the font module's module inspect mechanism to inspect via style and tag name
    inspect ( add ) {
      add ( 'style' , {
        fontSize : [ 'xx-large' , 'x-large' , 'large' , 'medium' , 'small' ]
      } ) . add ( 'tag' , 'font' )
    }
  } ,
  // Overlay ul module's configuration
  ul : {
    // When the ul module is inspected, disabled all but itself
    exclude : 'ALL_BUT_MYSELF' ,
    // When the ul module is clicked, execute the following method
    handler ( rh ) {
     console . log ( 'i am ul!' )
     rh . editor . execCommand ( 'insertUnorderedList' )  
    }
  } ,
  // When the ul module is inspected, disabled image, todo and ul module
  quote : {
    exclude : [ 'image' , 'todo' , 'ul' ]
  } ,
  // Customize an command named getAllTexts that prints out all the text nodes under the current range object
  commands : {
    getAllTexts ( rh , arg ) {
      console . log ( rh . getAllTextNodeInRange ( ) )
    }
  } ,
  shortcut : {
    // Custom a shortcut key, when you press the command + s, execute the save function
    saveNote : {
      metaKey : true ,
      keyCode : 83 ,
      handler ( editor ) {
        save ( )
      }
    }
  } ,
  // Customize a module, a alert pops up when you click on the module icon
  extendModules : [ {
     name : 'smile' ,
     icon : 'iui iui-icon-smile'
     handler ( rh ) {
      alert ( 'smile~~' )
     }
  } ]
} ) 

事件

事件名称	描述
改变	触发编辑器内容更改时，参数是最新的内容数据
imageupload	触发器上传时，参数包括图像的相应数据， 替换rcafteruploadfinish：用于替换IMG的SRC属性从base64格式替换为服务器返回的URL（上传成功）） deleteimgwhenuploadfail：用于删除上传失败时删除当前图片

修改内置模块

添加一个带有内置模块名称为键的参数将涵盖内置模块的原始属性（请参阅SRC/模块目录中的所有内置模块及其配置项目）

以图像模块为例

 Vue . user ( myVueEditor , {
  image : {
    // Modify the image module's icon
    icon : 'iui-pic' ,
    // Cover the original compression parameters, so that the image is not compressed when uploaded
    compress : null ,
    // Can not upload the same image repeatedly
    canUploadSameImage : false
  }
} ) 

cutom模块

使用ExtendModules配置项目扩展模块，我们提供了一些常见的模块配置项目

物品	类型	描述
姓名	细绳	模块的名称
图标	细绳	模块图标的className，默认使用fontawesome图标
排除	字符串数组	检查当前模块时禁用模块 当值为“全”时，都意味着禁用所有模块包括当前模块 当值是'all_but_myself'时，是指所有模块，但当前模块 当值是数组类型时，要禁用要禁用的输入模块名称
检查	功能	模块检查，当光标在列表中时，请突出显示列表模块，即检查列表模块，该模块基于其UL标签作为测试基础 该函数的第一个参数是一个名为add的方法，该方法呼吁添加模块的检查基础。有多次检查基础时，请致电链接 添加方法的第一个参数指示测试路径。可选是“标签”“样式”和“属性” 当参数1为“标签”时，参数2在标签名称字符串中通过 当参数1为“样式”时，参数2是具有stylename作为键和styleValue的对象。注意styleName使用驼峰表格（ex：fontsize），当有多个styleValue时，请使用数组的形式 当参数1为“属性”时，参数2是一个对象，其键是属性名称和属性值是值，并请注意，如果需要任何值，请传递'''''''''''''''''aidd（'attibute'，'data-todo'：'''}））
处理程序	功能	单击模块时该怎么办 参数1是Range Handler实例，您可以通过它获取当前编辑器的VUE实例和操作范围的方法 我们不建议直接在处理程序中的操作范围，而应将范围操作封装为命令，通过处理程序中的编辑器实例下的ExecCommand方法调用命令
选项卡	vue实例	常规模块使用处理程序来处理点击，如果要实现UI（字体模块的下拉列表）或更复杂的逻辑（Align模块的左右切换），请使用选项卡
init	功能	对应于创建的编辑器组件生命周期，参数1是编辑器实例。请注意，目前无法使用ExecCommand方法
安装	功能	对应于已安装的编辑器组件生命周期，参数1是编辑器实例。
更新	功能	对应于已更新的编辑器组件生命周期，参数1是编辑器实例。
被摧毁	功能	对应于编辑器组件生命周期beforedestroy，参数1是编辑器实例。