react-wangeditor-simple v1.0.7

react-wangeditor-simple

这个是基于wangeditor v3.0+ 版本写成的react组件

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持IE10+浏览器。

• 官网：www.wangEditor.com
• 文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

安装及使用

npm install react-wangeditor-simple --save

// app.js
import React, { Component } from 'react';
import ReactWangeditor from 'react-wangeditor-simpile'

class App extends Component {
  state = {
    initContent: '',
    html: '',
    text: ''
  }

  setHtml = (html) => {
    this.setState({ html: html })
  }

  setText = (text) => {
    this.setState({ text: text })
  }

  componentDidMount () {
  	// 异步设置内容
    setTimeout(() => {
      this.setState({
        initContent: '<p>Hello World!</p>'
      })
    }, 3000)
  }

  render() {
    const editorOptions = {
      width: '90%', // 自定义单位，字符串
      height: '800px', // 自定义单位，字符串
      menus: [
      	'head',  // 标题
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
          ...
        'redo',  // 重复
        /* ---- 新增 ---- */
        'clearStyle', //清除文字的样式
        'clearFormat', //清除文字的格式
        'clearAll', //一键清空编辑器
        'insertCode', //插入带类名的代码
        // <pre class="className"><code class="className">hellow world</code></pre>
      ]
    }
    return (
      <div className="App">
        <ReactWangeditor
          id="editor"
          initContent={this.state.initContent}
          options={editorOptions}
          handleHtml={this.setHtml}
          handleText={this.setText} />
      </div>
    );
  }
}

export default App;

优化

• props 新增initContent={this.state.initContent}，传入要初始化的内容(异步请求回来的内容)

新增

1、clearStyle: 清除编辑器内所有文字的样式（无法撤销）

• 等同于粘贴样式的过滤的作用，去除标签内的style，class属性以及\标签
• 文档里说 pasteFilterStyle，pasteTextHandle配置暂时对 IE 无效 ，可以在配置menus里添加 clearStyle ，复制进去后手动清除样式，可以清除word文档复制过来的样式（在IE已测试）。
• 若有清除不了的，请报issues。

2、clearFormat: 清除格式（无法撤销）

• 这功能会把所有的文字格式化为正文，即把所有HTML标签替换为\标签
• 排版可能会有错乱（应该只是换行了而已），请自行调整

3、clearAll: 一键清空编辑器功能

• 一键清空编辑器的所有内容

4、fullscreen: 全屏/退出全屏功能

5、insertCode: 插入带类名的代码

  <pre class="className"><code class="className">hellow world</code></pre>

为了方便在网页中使用插件(prismjs)来显示代码高亮

欢迎前来star或issues