quill-editor富文本編輯器基本使用

1. 第一步，安裝

npm i vue-quill-editor -S
npm i quill -S

2. 在組件中使用

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

// script
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // 這個(gè)CSS必須引入
import 'quill/dist/quill.snow.css' // 主題CSS

const defaultContent = `默認(rèn)內(nèi)容`
const toolbarOptions = [
  ['bold', 'underline', 'strike'], // 加粗，斜體，下劃線，刪除線
  [{ header: 1 }, { header: 2 }], // 標(biāo)題，鍵值對(duì)的形式；1、2表示字體大小
  [{ color: [] }], // 字體顏色，字體背景顏色
  [{ size: ['small', false, 'large', 'huge'] }] // 字體大小
]
 
data () {
  return {
     editorOption: {
        modules: {
          toolbar: toolbarOptions
        },
        placeholder: '請(qǐng)輸入內(nèi)容'
      },
  }
}

富文本框默認(rèn)只有一行的高度，可以通過(guò)深度選擇器設(shè)置富文本框的樣式（less的語(yǔ)法是 /deep/）

 /deep/ .ql-container {
      max-width: 1000px;
      height: 360px;
      .ql-editor {
        max-width: 1000px;
      }
    }
 /deep/ .ql-toolbar {
      max-width: 1000px;
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容