发布时间:2023-09-02 19:30
前言:在日常的开发工作中,我们常常会碰到使用文本编辑器的场景,那么要如何引进并使用这些文本编辑器呢?我总结了较为常用常见的两种:json文本编辑器和富文本编辑器,也希望对于前端开发的小伙伴有所帮助。
富文本编辑器:
json文本编辑器:
两种编辑器实质都是前端的一种组件,我们可以通过包引入,并对于对应的参数和方法进行编辑。因此我们在使用是都要先安装和拉取对应的包,才能使用对应的组件,其引用命令如下:
//安装JSON编辑器
npm install vue-json-editor --save
yarn add vue-json-editor
//安装富文本编辑器
npm install vue-quill-editor --save
先来说说是json编辑器的功能;
json编以树形,代码,表单,文本,视图的形式展示数据,对于我们输入一些复杂的数据结构的展示有很大的帮助
我们可以通过复制复杂文本,并通过不同表现形式来展示数据,以避免数据过多而缺失具体的数据,具体实例可依照下图:
再来说说富文本编辑器的功能
富文本编辑器其实有很多种,在这里我们只介绍其中一种,vue-quill-editor,通过这个富文本组件,我们可以像使用word文档里边,便捷的对于一些不同的文本格式的数据进行编辑和展示,比如我们要在数据库中录入一遍文本,我们就可通过此种方式实现:
安装依赖包
npm install vue-quill-editor --save
引入依赖:
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);
具体结构vue:
<template>
<quill-editor class="editor"
ref="myTextEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)">
</quill-editor>
</template>
js数据和组件引入
import VueQuillEditor from 'vue-quill-editor'
<script>
export default {
data () {
return {
content: null,
editorOption: {
modules: {
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
], //工具菜单栏配置
},
placeholder: '请在这里添加产品描述', //提示
readyOnly: false, //是否只读
theme: 'snow', //主题 snow/bubble
syntax: true, //语法检测
}
}
},
methods: {
// 失去焦点
onEditorBlur(editor) {},
// 获得焦点
onEditorFocus(editor) {},
// 开始
onEditorReady(editor) {},
// 值发生变化
onEditorChange(editor) {
this.content = editor.html;
console.log(editor);
},
},
computed: {
editor() {
return this.$refs.myTextEditor.quillEditor;
}
},
mounted() {
// console.log('this is my editor',this.editor);
}
}
</script>
相关参数:
展示效果:
相关依赖:
"vue-json-editor": "^1.4.3"
vue部分:
<el-form-item label="数据内容" prop="configContent">
<vue-json-editor
style="height: 600px"
v-model="jsonEditorValue"
:showBtns="false"
:mode="'code'"
lang="zh"
/>
</el-form-item>
js部分:
// json编辑器内容变化
onJsonChange(value) {
console.log('value:', value);
},
// json编辑器内容保存
onJsonSave(value) {
console.log('value:', value);
},
参数解释:
效果展示: