vue PC端頁面引入vue-quill-editor富文本插件

項目需要：在添加新類別的彈框中，要在輸入框中輸入多條描述信息，不同的描述信息要換行輸入，輸入后點擊確定傳給后端，接口返回成功后點擊查看剛添加的新類別時，描述框中展現多條換行的描述信息也要跟填寫時一樣（即不同的描述換行展示），他們說用富文本比較方便，所以找到了這個插件，剛好滿足我想要的功能效果，寫下來當筆記。

參考文章：Vue基於vue-quill-editor富文本編輯器使用心得

 

安裝插件：

npm install vue-quill-editor

 

然后是在需要的組件引入，當然也可以在main.js中引入：

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  data () {
         content: '',
         editorOption: {
              modules: {
                  toolbar: [
                    [{ 'list': 'bullet' }] // 這里我只要無序列表圖標
                  ]
               },
               theme: 'snow'
         },           
    },
    components: {
        quillEditor
    }
}                

 

HTML部分：

<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />

 

看看效果吧：

 

默認情況下工具欄有很多的功能圖標，加粗、斜體、上傳圖片等等，如果有些功能運用不到又不想看到的話，可以在這里可以進行設置設置，將toolbar中用不到的移出掉即可，這里我直接復制參考文章大佬的代碼了：

modules:{
            toolbar:[
              ['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']    //上傳圖片、上傳視頻
  
            ]
          },
          theme:'snow'
        }
     }

 

　　這里的modules就是上面data中的 editorOption 的modules，想要啥功能按照你的需要進行添加或者移除就行了。

　　這里我只是簡單的用到列表的效果而已，想看的其他功能介紹的話，可以去看看參考文章的介紹，那邊的大佬說的更詳細

 

　　后續追加：

　　當我們輸入上面的幾條列表信息后，直接打印出來是這樣的

這個有點看不懂，這樣的字符串放到插件也不能渲染成我們想要的 list 標簽的效果，此時需要用個方法處理一下轉成我們想要看到的富文本的樣子，這個方法是我在別人博客里看到的，如下：

escapeStringHTML (str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      console.log(str)
      return str
}

 

處理過后成這樣了：

就是上面打印的第二行這樣的，現在再把替換后的字符串賦值給上面插件標簽quill-editor中綁定的contain，渲染出來即為我們之前輸入時的樣子