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

$ git clone https://github.com/uxcore/uxcore-tinymce
$ cd uxcore-tinymce
$ npm install
$ 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 实例。|

图片上传配置

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

Events 包括

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

事件的具体含义和触发机制参考：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