富文本

  1. 安装插件

    npm install --save vue2-editor
    
  2. 在需要用得组件里面引入

    import { VueEditor } from 'vue2-editor'
    components:{
     VueEditor
    }
    
  3. HTML

    <VueEditor style="width: 80%"<!--宽度-->
         useCustomImageHandler<!--处理图像上传,而不是使用默认转换为Base64 默认图片为base64路径 加上此属性后显示为正常路径-->
         @imageAdded="handleImageAdded"<!--上传图片函数-->
         :editorToolbar="customToolbar"<!--自定义工具栏-->
         v-model="content"></VueEditor>
    
  4. Script

    data() {
       return {
         customToolbar:[//富文本 - 添加/修改使用
           [{'header':1},{'header':2}],//标题,键值对的形式;1、2表示字体大小
           ['bold', 'italic', 'underline','strike'],//加粗,斜体,下划线,删除线
           [{'align':''},{'align':'center'},{'align':'right'}],//对齐方式
           ['blockquote', 'code-block'], //引用、代码块儿
           [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
           [{'background':[]},{'color':[]}],
           ['link'],
           ['clean'],
         ],
       };
     },
    
  5. 更多工具栏选项

    ['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
    ['blockquote', 'code-block'], //引用、代码块儿
    [{ header: 1 }, { header: 2 }], //标题,键值对的形式;1、2表示字体大小
    [{ list: 'ordered' }, { list: 'bullet' }], //列表
    [{ script: 'sub' }, { script: 'super' }], //上下标
    [{ indent: '-1' }, { indent: '+1' }], //缩进
    [{ direction: 'rtl' }], //文本方向
    [{ size: ['small', false, 'large', 'huge'] }], //字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
    [{ color: [] }, { background: [] }], //字体颜色,字体背景颜色
    [{ font: [] }], //字体
    [{ align: [] }], //对齐方式
    ['clean'], //清除字体样式
    ['image'], //上传图片、上传视频(video)、超链接(link)
    
  6. 更多参考资料