vue-quill-editor富文本编辑器添加html代码编辑功能

1.安装quill-html-edit-button

"quill-html-edit-button": "^2.2.7",

直接复制到packjson里面npm安装

2.在使用富文本的页面引入,并注册

import { Quill } from  vue-quill-editor 
import htmlEditButton from "quill-html-edit-button";
Quill.register({
  "modules/htmlEditButton": htmlEditButton
})

3.富文本编辑器的配置代码

editorOption: {
        placeholder:  编辑文章内容 ,
        modules: {
          toolbar: {
           container: [
              [ 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  }], // 文本方向
              [ link ,  image ,  video ], // 链接、图片、视频
              [{
              align: [] }], // 添加居中按钮
              [{
              color: [] }] // 文字颜色按钮
          ]
        },
         htmlEditButton:{
           debug: true, // logging, default:false
            msg: "在这里修改HTML代码,点击完成将替换编辑器的内容", //Custom message to display in the editor, default: Edit HTML here, when you click "OK" the quill editor s contents will be replaced
            okText: "完成", // Text to display in the OK button, default: Ok,
            cancelText: "撤销", // Text to display in the cancel button, default: Cancel
            buttonHTML: "&lt;&gt;", // Text to display in the toolbar button, default: <>
            buttonTitle: "Show HTML source", // Text to display as the tooltip for the toolbar button, default: Show HTML source
            syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false
            prependSelector:  div#myelement , // a string used to select where you want to insert the overlayContainer, default: null (appends to body),
            editorModules: {}
         }
        },
      },

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
none
暂无评论...