富文本编辑器--基于wangEditor富文本编辑器的改进与完善

最新推荐文章于 2024-07-29 19:26:43 发布

置顶

mayism0209

最新推荐文章于 2024-07-29 19:26:43 发布

阅读量2.2k

点赞数

文章标签： React 富文本编辑器

本文链接：https://blog.csdn.net/mayism0209/article/details/80622041

版权

做组里项目的时候，需要这样一个可以即插即用的富文本编辑器，在其他的项目里通过import方式可以直接使用，因为项目本身是用react写的，这个wangEditor富文本编辑器刚好可用于React项目，且页面看起来比较简洁清爽，故搬运过来作了些配置，完善了上传图片的功能，并添加了将输入文本内容转换为HTML格式和JSON格式的功能。

1.按照wangEditor官网的提示，拉到代码之后，有以下一段文字指示你用于React：

官网就是官网，提示都写的毫无营养。折腾了一下这里，从项目目录开始看起，看一下怎么用于React项目：

教程里说的npm start启动wangEditor的方式只有在如图的项目目录下才可生效

2.项目应用：

import React, { Component } from 'react';
import E from 'wangeditor';
import './App.css';
import Card from "../../ishow/Card/index";
import Row from '../../ishow/LayoutComponent/row/index';
import Col from '../../ishow/LayoutComponent/col/index';
import Breadcrumb from '../../ishow/Breadcrumb/index';

class App extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            editorContent: '',
            editorContentJson: ''
        }
    }

    componentDidMount() {
        const elem = this.refs.editorElem
        const editor = new E(elem)
        const text1 = document.getElementById('text1')
        const text2 = document.getElementById('text2')
        const onUploadFile = (url, name, folder, type, style) => {
            return url + '?name=' + name + '&folder=' + folder + '&type=' &