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

1、兩種編輯器的簡(jiǎn)單介紹

1.1、展示效果

富文本編輯器：

json文本編輯器：

1.2、編輯器的引入

兩種編輯器實(shí)質(zhì)都是前端的一種組件，我們可以通過包引入，并對(duì)于對(duì)應(yīng)的參數(shù)和方法進(jìn)行編輯。因此我們?cè)谑褂檬嵌家劝惭b和拉取對(duì)應(yīng)的包，才能使用對(duì)應(yīng)的組件，其引用命令如下：

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

1.3 編輯器的結(jié)構(gòu)和功能

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

json編以樹形，代碼，表單，文本，視圖的形式展示數(shù)據(jù)，對(duì)于我們輸入一些復(fù)雜的數(shù)據(jù)結(jié)構(gòu)的展示有很大的幫助

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

?

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

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

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);

具體結(jié)構(gòu)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數(shù)據(jù)和組件引入

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 級(jí)標(biāo)題[{ list: "ordered" }, { list: "bullet" }], // 有序、無序列表[{ script: "sub" }, { script: "super" }], // 上標(biāo)/下標(biāo)[{ indent: "-1" }, { indent: "+1" }], // 縮進(jìn)// [{'direction': 'rtl'}], ? ? ? ? ? ? ? ? ? ? ? ? // 文本方向[{ size: ["small", false, "large", "huge"] }], // 字體大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題[{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色[{ font: [] }], // 字體種類[{ align: [] }], // 對(duì)齊方式["clean"], // 清除文本格式["link", "image", "video"] // 鏈接、圖片、視頻], //工具菜單欄配置},placeholder: '請(qǐng)?jiān)谶@里添加產(chǎn)品描述', //提示readyOnly: false, //是否只讀theme: 'snow', //主題 snow/bubblesyntax: true, //語法檢測(cè)}}},methods: {// 失去焦點(diǎn)onEditorBlur(editor) {},// 獲得焦點(diǎn)onEditorFocus(editor) {},// 開始o(jì)nEditorReady(editor) {},// 值發(fā)生變化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>

相關(guān)參數(shù)：

展示效果：

2.2 json文本編輯器的使用

相關(guān)依賴：

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

vue部分：

<el-form-item label="數(shù)據(jù)內(nèi)容" prop="configContent"><vue-json-editorstyle="height: 600px"v-model="jsonEditorValue":showBtns="false":mode="'code'"lang="zh"/> </el-form-item>

js部分：

// json編輯器內(nèi)容變化onJsonChange(value) {console.log('value:', value);},// json編輯器內(nèi)容保存onJsonSave(value) {console.log('value:', value);},

參數(shù)解釋：

效果展示：

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。