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去动态绑定我们输入的内容 , options修改富文本编辑器相关设置
<quill-editor v-model="submitFromDataSummary.summary" style="width: 100%; height: 300px" :options="editorOption">
</quill-editor>
4. 在data中添加editorOption , 修改富文本编辑器的相关设置
editorOption: {
modules: {
toolbar: 'title' // 设置文本编辑器的头部是否展示
},
placeholder: '文本占位', // 文本框为空时 , 占位文本
theme: 'snow' // 或者为 `bubble`
}
5. 在我们提交文本内容之前先使用正则去识别空格 , 换行... summary为textarea输入的内容
const content = this.content.eplace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
6. 在需要展示文本的地方, 使用v-html去绑定
<div v-html="content"></div>
