react-app中引入UEditor富文本编辑器

react中引入ueditor

1.放入静态资源并配置

首先把官网下载的Ueditor资源，放入public文件夹中。(你的U盘里有，不用下载了)

2.封装一个组件 UEditor.js ，放到src/pages/components/里

/**
 * @module 百度富文本编辑器
 * 自定义菜单配置
 */
import React, { Component } from 'react'
let editor = null

class UEditor extends Component {

  componentDidMount () {
    this.setConfig()
  }

  componentWillUnmount () {
    editor.destroy()
  }

  // 初始化编辑器
  setConfig () {
    editor = window.UE.getEditor('editor', {
      toolbars: [
        [
          'source', // 源代码
          // 'anchor', // 锚点
          'undo', // 撤销
          'redo', // 重做
          'bold', // 加粗
          'indent', // 首行缩进
          // 'snapscreen', // 截图
          'italic', // 斜体
          'underline', // 下划线
          'strikethrough', // 删除线
          'subscript', // 下标
          'fontborder', // 字符边框
          'superscript', // 上标
          'formatmatch', // 格式刷
          'blockquote', // 引用
          'pasteplain', // 纯文本粘贴模式
          'selectall', // 全选
          // 'print', // 打印
          // 'preview', // 预览
          'horizontal', // 分隔线
          'removeformat', // 清除格式
          // 'time', // 时间
          // 'date', // 日期
          // 'unlink', // 取消链接
          'insertrow', // 前插入行
          'insertcol', // 前插入列
          'mergeright', // 右合并单元格
          'mergedown', // 下合并单元格
          'deleterow', // 删除行
          'deletecol', // 删除列
          'splittorows', // 拆分成行
          'splittocols', // 拆分成列
          'splittocells', // 完全拆分单元格
          'deletecaption', // 删除表格标题
          'inserttitle', // 插入标题
          'mergecells', // 合并多个单元格
          'deletetable', // 删除表格
          'cleardoc', // 清空文档
          'insertparagraphbeforetable', // "表格前插入行"
          // 'insertcode', // 代码语言
          'fontfamily', // 字体
          'fontsize', // 字号
          // 'paragraph', // 段落格式
          'simpleupload', // 单图上传
          'insertimage', // 多图上传
          'edittable', // 表格属性
          'edittd', // 单元格属性
          // 'link', // 超链接
          // 'emotion', // 表情
          // 'spechars', // 特殊字符
          // 'searchreplace', // 查询替换
          // 'map', // Baidu地图
          // 'gmap', // Google地图
          // 'insertvideo', // 视频
          // 'help', // 帮助
          'justifyleft', // 居左对齐
          'justifyright', // 居右对齐
          'justifycenter', // 居中对齐
          'justifyjustify', // 两端对齐
          'forecolor', // 字体颜色
          'backcolor', // 背景色
          'insertorderedlist', // 有序列表
          'insertunorderedlist', // 无序列表
          // 'fullscreen', // 全屏
          'directionalityltr', // 从左向右输入
          'directionalityrtl', // 从右向左输入
          'rowspacingtop', // 段前距
          'rowspacingbottom', // 段后距
          // 'pagebreak', // 分页
          // 'insertframe', // 插入Iframe
          'imagenone', // 默认
          'imageleft', // 左浮动
          'imageright', // 右浮动
          // 'attachment', // 附件
          'imagecenter', // 居中
          // 'wordimage', // 图片转存
          'lineheight', // 行间距
          // 'edittip ', // 编辑提示
          // 'customstyle', // 自定义标题
          'autotypeset', // 自动排版
          // 'webapp', // 百度应用
          'touppercase', // 字母大写
          'tolowercase', // 字母小写
          // 'background', // 背景
          // 'template', // 模板
          // 'scrawl', // 涂鸦
          // 'music', // 音乐
          'inserttable', // 插入表格
          // 'drafts', // 从草稿箱加载
          // 'charts', // 图表
        ]
      ],
      enableAutoSave: false,
      autoHeightEnabled: false,
      initialFrameHeight: 450,
      initialFrameWidth: '100%',
      zIndex: 1200
    })
    editor.ready(() => {
      editor.setContent(this.props.initData)
    })
  }

  // 获取编辑器内容
  getUEContent () {
    return editor.getContent()
  }

  render () {
    return (
      <script id="editor" type="text/plain" />
    )
  }

}

export default UEditor

3.在 public/index.html 文件里引用富文本编辑器

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>上汽信贷后台管理系统</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- 富文本编辑器 -->
    <script src="/ueditor/ueditor.config.js"></script>
    <script src="/ueditor/ueditor.all.js"></script>
    <script src="/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="/ueditor/ueditor.parse.min.js"></script>
  </body>
</html>

3.在需要的地方引用该组件

import React, { Component } from 'react'
// 引入 UEditor 组件
import UEditor from '../components/UEditor'
import { Button } from 'antd'

class UserList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      initData: ''
    }
  }
  // 富文本编辑器 保存
  saveEditor = () => {
    console.log(this.refs.ueditor.getUEContent())
  }
  render() {
    return (
      <div>
        Statistics
        {/* 使用UEditor 组件 */}
        <UEditor ref="ueditor" initData={this.state.initData} />
        <Button type="primary" onClick={this.saveEditor}>
          保存
        </Button>
      </div>
    )
  }
}

export default UserList

react-app中引入UEditor富文本编辑器

react中引入ueditor

猜你喜欢