1. 使用npm或者yarn安裝 `vue-quill-editor` 插件, 命令行 :? npm install?vue-quill-editor? 或? yarn add vue-quill-editor
2. 在我們的vue項目src文件夾下的 `main.js` 中引入富文本編輯器 , 代碼如下 :?
????import VueQuillEditor from 'vue-quill-editor';
????import 'quill/dist/quill.core.css';
????import 'quill/dist/quill.snow.css';
????import 'quill/dist/quill.bubble.css';
????Vue.use(VueQuillEditor);
3. 在我們需要使用富文本編輯器的組件中 , v-model去動態(tài)綁定我們輸入的內(nèi)容 ,? options修改富文本編輯器相關(guān)設(shè)置
<quill-editor v-model="submitFromDataSummary.summary" style="width: 100%; height: 300px" :options="editorOption">
</quill-editor>
4. 在data中添加editorOption , 修改富文本編輯器的相關(guān)設(shè)置
editorOption: {
? modules: {
? ? toolbar: 'title'? ? // 設(shè)置文本編輯器的頭部是否展示
? },
? placeholder: '文本占位',? ? // 文本框為空時 , 占位文本
? theme: 'snow'? ? // 或者為 `bubble`
}
5. 在我們提交文本內(nèi)容之前先使用正則去識別空格 , 換行... summary為textarea輸入的內(nèi)容
const content = this.content.eplace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
6. 在需要展示文本的地方, 使用v-html去綁定
<div v-html="content"></div>
