element-ui 富文本编辑器实现

element-ui 富文本编辑器实现

在项目中须要用到一个富文本编辑器，这里选择的是vue-quill-editor参考网站

<el-form-item label="内容" prop="abstract">
          <editor ref="myTextEditor"
              v-model="ruleForm.content"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)">
          </editor>  
        </el-form-item>

这里须要的是，参考网站中有一个地方有误，见图：

这里的config应该写成:options，注意是有s的喔，你们能够去github看看，就是速度有点感人:(，
还有须要注意的是toolbar的配置选项，直接上图了：

须要注意的是外层须要有modules和一个数组包裹，而后在:options="editorOption"添加，少一个都不会成功的喔。下面的是github官网里面的toolbar配置选项（应该是所有的吧）

export default {
      theme: 'snow',
      boundary: document.body, 
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{ 'header': 1 }, { 'header': 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'],
          ['link', 'image', 'video']
        ]
      },
      placeholder: 'Insert text here ...',
      readOnly: false
    }

这里就不解释各个的意思了，你们能够本身试试。祝你们工做顺利！！