JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-09-16 01:29:50 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chuzhixin 2020-10-20 13:00:40 +08:00
parent 0e2f803ee6
commit 3859a8d68b
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

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

30
src/views/vab/editor/index.vue
View File

@ -11,7 +11,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="content" class="vab-quill-content"> <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-form-item> <el-form-item>
<el-button type="primary" @click="handleSee">预览效果</el-button> <el-button type="primary" @click="handleSee">预览效果</el-button>
@ -34,6 +38,30 @@
components: { vabQuill }, components: { vabQuill },
data() { data() {
return { 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', borderColor: '#dcdfe6',
dialogTableVisible: false, dialogTableVisible: false,
form: { form: {