0.2.20 • Published 3 years ago

uxcore-tinymce v0.2.20

Weekly downloads
26
License
MIT
Repository
github
Last release
3 years ago

uxcore-tinymce Dependency Status devDependency Status

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

配置项类型必填默认值功能/备注
configobjectoptional{}tinyMCE 的配置项,官方文档中所有 init 部分的配置在这里完成
contentstringoptional""输入框中的默认值
placeholderstringoptional-占位符
changeDelaystringoptional500单位 ms,性能参数,多少毫秒后同步从外面传来的 content 的变化
onXXXfunctionoptional-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

0.2.20

3 years ago

0.2.19

3 years ago

0.2.18

3 years ago

0.2.17

3 years ago

0.2.16

3 years ago

0.2.15

5 years ago

0.2.14

7 years ago

0.2.12

7 years ago

0.2.13

7 years ago

0.2.10

8 years ago

0.2.9

8 years ago

0.2.8

8 years ago

0.2.7

9 years ago

0.2.6

9 years ago

0.2.5

9 years ago

0.2.4

9 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.11

9 years ago

0.1.10

9 years ago

0.1.9

9 years ago

0.1.8

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago