java 前段富文本编辑器 前端富文本编辑器使用

前言：在日常的开发工作中，我们常常会碰到使用文本编辑器的场景，那么要如何引进并使用这些文本编辑器呢？我总结了较为常用常见的两种：json文本编辑器和富文本编辑器，也希望对于前端开发的小伙伴有所帮助。

1、两种编辑器的简单介绍

1.1、展示效果

富文本编辑器：

json文本编辑器：

1.2、编辑器的引入

两种编辑器实质都是前端的一种组件，我们可以通过包引入，并对于对应的参数和方法进行编辑。因此我们在使用是都要先安装和拉取对应的包，才能使用对应的组件，其引用命令如下：

//安装JSON编辑器
npm install vue-json-editor --save

yarn 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/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>

相关参数：

展示效果：

2.2 json文本编辑器的使用

相关依赖：

"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);
    },

参数解释：

效果展示：