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
    }

這裏就不解釋各個的意思了，你們能夠本身試試。祝你們工做順利！！