✨富文本编辑器支持精细化配置

package.json

@@ -64,14 +64,14 @@
     "zx-magnifie": "^0.4.0",
     "zx-markdown-editor": "^0.0.2",
     "zx-player": "^1.0.1",
-    "zx-quill": "^0.0.2",
+    "zx-quill": "^0.0.3",
     "zx-templates": "^0.0.24",
     "zx-verify": "^0.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.7",
-    "@vue/cli-plugin-eslint": "^4.5.7",
-    "@vue/cli-service": "^4.5.7",
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "body-parser": "^1.19.0",
@@ -79,7 +79,7 @@
     "chokidar": "^3.4.3",
     "eslint": "^7.11.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^7.0.1",
+    "eslint-plugin-vue": "^7.1.0",
     "filemanager-webpack-plugin": "^2.0.5",
     "image-webpack-loader": "^7.0.1",
     "lint-staged": "^10.4.2",

src/views/vab/editor/index.vue

@@ -11,7 +11,11 @@
         </el-select>
       </el-form-item>
       <el-form-item label="内容" prop="content" class="vab-quill-content">
-        <vab-quill v-model="form.content" :min-height="400"></vab-quill>
+        <vab-quill
+          v-model="form.content"
+          :min-height="400"
+          :options="options"
+        ></vab-quill>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="handleSee">预览效果</el-button>
@@ -34,6 +38,30 @@
     components: { vabQuill },
     data() {
       return {
+        options: {
+          theme: 'snow',
+          bounds: document.body,
+          debug: 'warn',
+          modules: {
+            toolbar: [
+              ['bold', 'italic', 'underline', 'strike'],
+              [{ header: [1, 2, 3, 4, 5, 6, false] }],
+              [{ size: ['small', false, 'large', 'huge'] }],
+              [{ color: [] }, { background: [] }],
+              ['blockquote', 'code-block'],
+              [{ list: 'ordered' }, { list: 'bullet' }],
+              [{ script: 'sub' }, { script: 'super' }],
+              [{ indent: '-1' }, { indent: '+1' }],
+              [{ align: [] }],
+              [{ direction: 'rtl' }],
+              [{ font: [] }],
+              ['clean'],
+              ['link', 'image'],
+            ],
+          },
+          placeholder: '内容...',
+          readOnly: false,
+        },
         borderColor: '#dcdfe6',
         dialogTableVisible: false,
         form: {