阅读 113

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

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

1、基本使用

npm 安装 npm i wangeditor --save

CDN 链接 cdn.jsdelivr.net/npm/wangedi…

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();
    },
}
复制代码

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

示例图

image.png

二、CKEditor

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

文档地址:ckeditor.com/docs/ckedit…

...

文章分类
前端
文章标签