vue项目使用富文本编辑器vue-quill-editor的方法

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, '&nbsp;');

6. 在需要展示文本的地方, 使用v-html去绑定

<div v-html="content"></div>