记录非常好用的富文本编辑

一、wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。

1、基本使用

npm 安装 npm i wangeditor --save

CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js

html中使用

<div id="div1">
    <p>初始化的内容</p>
    <p>初始化的内容</p>
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
</script>

vue中使用

//index.vue 中
<template>
  <div class="write-articles-page">
    <div class="editor">
      <div class="title">文章内容</div>
       <div class="editor-box" id="editor"></div>  //容器
    </div>
    <div class="footer">
      <el-button  @click="save">保存</el-button>
      <el-button  type="primary" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
import WriteArticles from "./index";
export default WriteArticles;
</script>

<style lang="scss">
@import "./index.scss";
</style>

js部分

import E from "wangeditor";
import axios from 'axios'
export default {
    name: 'write-articles',
    data() {
        return {
        }
    },
    components: {
        editor: null,
    },
    methods: {
        save() {
            console.log(this.editor.txt.html()); //获取html内容
            console.log(this.editor.txt.text()); //获取txt内容
            console.log(this.editor.txt.getJSON()); //获取json内容
        },
        reset() {
          this.editor.txt.clear()
        }
    },
    created() {

    },
    mounted() {
        this.editor = new E("#editor");
        this.editor.config.height = 600;
        let _this = this;
        //自定义实现图片上传功能
        this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
            // resultFiles 是 input 中选中的文件列表
            // insertImgFn 是获取图片 url 后，插入到编辑器的方法
            console.log(resultFiles[0])
            let param = new FormData()  // 创建form对象
            param.append('img_file', resultFiles[0], resultFiles[0].name)  // 通过append向form对象添加数据

            console.log(param.get('img_file'))

            let config = {
                headers: { 'Content-Type': 'multipart/form-data' }
            }
            axios.post(window.global.apiHost + '/get_picture', param, config).then(response => {
                if (response.data.status == 0) {
                    console.log(response.data.data.url)
                    // self.ImgUrl = response.data.data
                    insertImgFn(response.data.data.url)
                }
                // console.log(response.data)
            })

            // 上传图片，返回结果，将图片插入到编辑器中
            // insertImgFn(imgUrl);
        };
        
        //自定义实现视频上传功能  （可参考，但不推荐直接搬运因为视频上传需要做分片处理，后面更新...）
        this.editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
            console.log(resultFiles[0])
            let param = new FormData()  // 创建form对象
            param.append('video_file', resultFiles[0], resultFiles[0].name)  // 通过append向form对象添加数据

            console.log(param.get('video_file'))

            let config = {
                headers: { 'Content-Type': 'multipart/form-data' }
            }
            axios.post(window.global.apiHost + '/get_video', param, config).then(response => {
                if (response.data.status == 0) {
                    console.log(response.data.data.url)
                    insertVideoFn(response.data.data.url)
                }
            })
        };
        this.editor.create();
    },
}

上面代码实现了获取编辑内容，清空编辑内容，自定义上传图片，视频等简单功能，其他的配置可根据官方文档去定制。文档十分详细对新手十分友好。

示例图

二、CKEditor

功能十分强大，支持从源码定制，使用较简单。

文档地址：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html

…