前言：在日常的開發工作中，我們常常會碰到使用文本編輯器的場景，那么要如何引進并使用這些文本編輯器呢？我總結了較為常用常見的兩種：json文本編輯器和富文本編輯器，也希望對于前端開發的小伙伴有所幫助。

1、兩種編輯器的簡單介紹

1.1、展示效果

富文本編輯器：

json文本編輯器：

1.2、編輯器的引入

兩種編輯器實質都是前端的一種組件，我們可以通過包引入，并對于對應的參數和方法進行編輯。因此我們在使用是都要先安裝和拉取對應的包，才能使用對應的組件，其引用命令如下：

//安裝JSON編輯器 npm install vue-json-editor --saveyarn add vue-json-editor//安裝富文本編輯器 npm install vue-quill-editor --save

1.3 編輯器的結構和功能

先來說說是json編輯器的功能;

json編以樹形，代碼，表單，文本，視圖的形式展示數據，對于我們輸入一些復雜的數據結構的展示有很大的幫助

我們可以通過復制復雜文本，并通過不同表現形式來展示數據，以避免數據過多而缺失具體的數據,具體實例可依照下圖：

?

再來說說富文本編輯器的功能

富文本編輯器其實有很多種，在這里我們只介紹其中一種，vue-quill-editor,通過這個富文本組件，我們可以像使用word文檔里邊，便捷的對于一些不同的文本格式的數據進行編輯和展示，比如我們要在數據庫中錄入一遍文本，我們就可通過此種方式實現：

2、編輯器的使用過程

2.1 富文本編輯器的使用

安裝依賴包

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/bubblesyntax: 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>

相關參數：

展示效果：

2.2 json文本編輯器的使用

相關依賴：

"vue-json-editor": "^1.4.3"

vue部分：

<el-form-item label="數據內容" prop="configContent"><vue-json-editorstyle="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);},

參數解釋：

效果展示：

?

?

總結

以上是生活随笔為你收集整理的前端json编辑器和富文本编辑器的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。