Vue2项目中添加富文本编辑器 (vue-quill-editor、js-base64)

1. 安装
   npm install vue-quill-editor

2. 在mian.js中,全局配置下

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme

Vue.prototype.$Base64 = Base64;
Vue.component("quillEditor", quillEditor);

3. 组件中使用

<quill-editor v-model="editForm.data.body"></quill-editor>

// 如果只是展示,且隐藏工具栏
<quill-editor
  v-model="formData.body"
  :disabled="true"
  :options="editorOption"
></quill-editor>

editorOption: {
 theme: "bubble", // 隐藏工具栏
},

另外: 因为前后端可能对html标签传值敏感,所以要用到base64进行加密解密

1. 安装
   npm install --save js-base64

2. main.js中进行全局引入

import {Base64} from 'js-base64'

Vue.prototype.$Base64 = Base64;

3. 组件中使用

let encPass = this.$Base64.encode(password); // 加密
let decPass = this.$Base64.decode(encPass); // 解密