react引入富文本编辑器TinyMCE

一片两片姜 發表於 2020-4-10 21:01:00

这周做了一个PC端的service后台需求，要求有富文本编辑器，插入图片、表格，字体字号背景色等等，
最后引入了富文本编辑器TinyMCE
 
对于TinyMCE的简介：
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
TinyMCE的优势：
<ul>
<li>开源可商用，基于LGPL2.1</li>
<li>插件丰富，自带插件基本涵盖日常所需功能</li>
<li>接口丰富，可扩展性强，有能力可以无限拓展功能</li>
<li>界面好看，符合现代审美</li>
<li>提供经典、内联、沉浸无干扰三种模式</li>
<li>对标准支持优秀（自v5开始）</li>
<li>多语言支持，官网可下载几十种语言。</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/1459640/202004/1459640-20200410202834332-749935663.png">
 
 
 
 上图为需求中配置的富文本编辑器的内容，我的需求TinyMCE完全可以满足，
  TinyMCE 官网：www.tiny.cloud
 
   TinyMCE支持vue、react、angular 
<img src="https://img2020.cnblogs.com/blog/1459640/202004/1459640-20200410203104435-19581755.png">
 
 这次改动的工程使用的是react，
在需求中封装了一个适合我们的富文本编辑组件：
<img src="https://img2020.cnblogs.com/blog/1459640/202004/1459640-20200410203751666-613077180.png">
 
 
editor组件中的内容：
<div class="cnblogs_code">
<pre>import React from 'react';
import './Editor.scss';

import {isDev, nginxPrefix} from '@/config';

import {Upload, Button, Icon, Popconfirm, Spin, message} from 'antd';

import _get from 'lodash/get';
import _uniqueId from 'lodash/uniqueId';

import PropTypes from 'prop-types';

/*
* @props string id? 标识符
* @props number height? 高度
* @props string defaultContent? 初始内容
* @props boolen disabled? 禁用
* @props function onDelete? 删除事件
* @props function onAdd? 添加事件
* @props object uploadConfig? 自定义上传配置
* @event function getEditorContent 获取编辑内容
* @event function setEditorContent 设置编辑内容
* @event function insertContent 插入编辑内容
*/
class Editor extends React.Component {
constructor(props) {
 super(props);

 const tinymceId = `editor-tinymce-${this.props.id}-${_uniqueId()}-${new Date().getTime()}`;

 this.state = {
 // 编辑器ID
 tinymceId,
 // 编辑器实例
 editor: null
 };
}

componentDidMount() {
 const {height = 300, defaultContent = ''} = this.props;
 window.tinymce.init({
 selector: `#${this.state.tinymceId}`,
 language: 'zh_CN',
 height: height,
 min_height: 200,
 width: '100%',
 resize: true,
 default_link_target: '_blank',
 init_instance_callback: editor => {
 if (defaultContent) {
 editor.setContent(defaultContent);
 }
 },
 paste_enable_default_filters: true,
 // paste_word_valid_elements: () => {
 //
 // },
 // 插件配置
 plugins: 'table image lists link paste',
 // 菜单配置
 menubar: 'file edit view insert format',
 // 工具栏配置
 /* eslint-disable */
 toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | blockquote | table | image link | forecolor backcolor | bullist numlist | removeformat'
 /* eslint-enable */
 }).then(() => this.setState({editor}));
}

componentWillUnmount() {
 // 在某些生命周期中，实例并未生成，没有卸载方法。（组件挂载阶段）
 // if (this.state.editor !== null) {
 // this.state.editor.destroy();
 // }
 window.tinymce.get(this.state.tinymceId).destroy();
}

getEditorContent = () => {
 return this.state.editor.getContent();
}

setEditorContent = (content) => {
 window.tinymce.get(this.state.tinymceId).setContent(content);
}

insertContent = (content) => {
 try {
 this.state.editor.insertContent(content);
 } catch(e) {
 window.tinymce.get(this.state.tinymceId).insertContent(content);
 }
}

// 默认上传配置
uploadConfig = {
 name: 'file',
 action: (isDev ? '' : nginxPrefix) + '/admin/common/uploadFile',
 headers: {
 authorization: 'authorization-text',
 },
 onChange: (info) => {
 if (info.file.status === 'done') {
 message.success('图片上传成功');
 this.state.editor.insertContent(
 `<img src="${_get(info, 'file.response.data.result')}" >`
 );
 } else if (info.file.status === 'error') {
 message.error('图片上传失败');
 }
 },
 accept: '.jpg,.jpeg,.jpe,.png,.bmp'
}

render() {
 const {uploadConfig} = this.props;
 return (
 <Spin spinning={this.props.disabled} indicator={<Icon type="stop" style={{color: '#555'}} />}>
 <div className="editor-container">
 <textarea id={this.state.tinymceId} />
 <div className="btn-bar">
 <Upload {...(uploadConfig ? uploadConfig : this.uploadConfig)}>
 <Button><Icon type="upload" />添加本地图片</Button>
 </Upload>
 
 {
 this.props.onAdd
 &&
 <Button icon="plus" shape="circle" onClick={this.props.onAdd} />
 }
 {
 this.props.onDelete
 &&
 <Popconfirm
 title="无法撤回,确认删除？"
 onConfirm={this.props.onDelete}
 okText="确认"
 cancelText="取消"
 placement="leftBottom"
 >
 <Button
 type="danger"
 icon="delete"
 shape="circle"
 style={{marginLeft: '4px'}}
 onClick={() => {
 // 当富文本编辑器中没有内容时，删除按钮不弹窗,直接调用删除方法
 const content = this.getEditorContent();

 if (!content) {
 this.props.onDelete();
 }
 }}
 />
 </Popconfirm>
 }
 
 </div>
 </div>
 </Spin>
 );
}
}

Editor.defaultProps = {
id: 'no-props-id',
height: 300,
defaultContent: '',
onDelete: null,
onAdd: null,
disabled: false,
uploadConfig: null
};

Editor.propTypes = {
id: PropTypes.string,
height: PropTypes.number,
defaultContent: PropTypes.string,
onDelete: PropTypes.func,
onAdd: PropTypes.func,
disabled: PropTypes.bool
};

export default Editor;</pre>
</div>
 
 
组件最终提交的是一段HTML，图片只是一个URL，大小非常小，非常实用
这次的需求中富文本编辑框是录入案例，
当然有录入就有展示，对于展示也很简单，在展示的地方加了个图片放大的功能
展示的时候有个问题，就是图片的大小我们想控制的很小，这样整体的内容都可以看到，图片具体内容可以点击图片放大，
<img src="https://img2020.cnblogs.com/blog/1459640/202004/1459640-20200410204724983-1171601361.png">
 
 
<img src="https://img2020.cnblogs.com/blog/1459640/202004/1459640-20200410205949644-1506475277.png">
 
 
 <img src="https://img2020.cnblogs.com/blog/1459640/202004/1459640-20200410205528152-214627256.png">
 
 
 
来来来，展示一下我男神图片点击放大之后的帅图：
<img src="https://img2020.cnblogs.com/blog/1459640/202004/1459640-20200410205737542-1344833408.png">
 
 
<img src="https://img2020.cnblogs.com/blog/1459640/202004/1459640-20200410205831631-1998709057.png">
  
来源：https://www.cnblogs.com/katydids/p/12676111.html

頁: [1]

琼殿技术论坛's Archiver

react引入富文本编辑器TinyMCE