---

uxcore-tinymce

TL;DR

uxcore-tinymce ui component for react, inspired by react-tinymce
need import tinymce first like this, the component will look for the variable tinymce in global.   tinymce website: http://www.tinymce.com/wiki.php/Configuration

setup develop environment

1$ git clone https://github.com/uxcore/uxcore-tinymce
2$ cd uxcore-tinymce
3$ npm install
4$ npm run server

Usage

handleKeyUp(e, editor) {
    console.log(editor.getContent());
}

handleChange(e, editor) {
    console.log(editor.getContent());
}

render() {
    let me = this;
    return (
        <div>
            <Tinymce onKeyup={me.handleKeyUp.bind(me)}
                     onChange={me.handleChange.bind(me)}/>
        </div>
    );
}

demo

http://uxcore.github.io/uxcore/

API

• resetValue(value)：重置 tinymce 的值。 参数：
  • value string：想要重置的值，支持富文本。

props

配置项	类型	必填	默认值	功能/备注
config	object	optional	{}	tinyMCE 的配置项，官方文档中所有 init 部分的配置在这里完成
content	string	optional	""	输入框中的默认值
placeholder	string	optional	-	占位符
changeDelay	string	optional	500	单位 ms，性能参数，多少毫秒后同步从外面传来的 content 的变化
onXXX	function	optional	-	tinyMCE 所有在 setup 中绑定的事件可以使用此属性来完成。如 onChange、onKeyup 等，会传入两个参数：e 和 editor 实例。

图片上传配置

1uploadConfig: {
2    "inputName": "imageUploadInput",//上传的file input的name属性，默认file
3    "actionUrl": "http://example.com/upload.json",//数据提交后端处理接口，需要返回JSON格式数据
4    "formatResult": function(response){ //数据返回结构化，optional，供老接口兼容使用，return的Object是plugin预期的结构
5        return {
6            content: {
7                "name": response.result.name,
8                "downloarUrl": response.result.url
9            }
10        };
11    },
12    "errorCallback": function(){ //自定义的错误回调，optional，不设置会直接alert错误
13        console.log('errorCallback', arguments);
14    },
15    "progressCallback": function(){ //自定义的上传进度回调，optional，不设置不显示进度
16        console.log('progressCallback', arguments);
17    }
18}

Events 包括

1// Include all of the Native DOM and custom events from:
2// https://github.com/tinymce/tinymce/blob/master/tools/docs/tinymce.Editor.js#L5-L12
3const EVENTS = [
4  'focusin', 'focusout', 'click', 'dblclick', 'mousedown', 'mouseup',
5  'mousemove', 'mouseover', 'beforepaste', 'paste', 'cut', 'copy',
6  'selectionchange', 'mouseout', 'mouseenter', 'mouseleave', 'keydown',
7  'keypress', 'keyup', 'contextmenu', 'dragend', 'dragover', 'draggesture',
8  'dragdrop', 'drop', 'drag', 'BeforeRenderUI', 'SetAttrib', 'PreInit',
9  'PostRender', 'init', 'deactivate', 'activate', 'NodeChange',
10  'BeforeExecCommand', 'ExecCommand', 'show', 'hide', 'ProgressState',
11  'LoadContent', 'SaveContent', 'BeforeSetContent', 'SetContent',
12  'BeforeGetContent', 'GetContent', 'VisualAid', 'remove', 'submit', 'reset',
13  'BeforeAddUndo', 'AddUndo', 'change', 'undo', 'redo', 'ClearUndos',
14  'ObjectSelected', 'ObjectResizeStart', 'ObjectResized', 'PreProcess',
15  'PostProcess', 'focus', 'blur'
16];

事件的具体含义和触发机制参考：https://github.com/tinymce/tinymce/blob/master/tools/docs/tinymce.Editor.js#L5-L12

FAQ

• Q1: 如何能够准确地监听输入框的变化？ A1: 建议同时监听 onChange 和 onKeyup 事件，更复杂的讨论见：https://github.com/uxcore/uxcore-tinymce/issues/1