uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-tinymce-demo-basic","tags":[],"filepath":"site/components/tinymce/demo/basic.md","directory":"components/tinymce/demo","filename":"basic","meta":{"title":"基本使用","description":"\n基本使用。\n","order":"0","filepath":"site/components/tinymce/demo/basic.md","filename":"basic","directory":"components/tinymce/demo","id":"components-tinymce-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleKeyUp',\n value: function handleKeyUp(e, editor) {\n console.log(editor.getContent());\n }\n }, {\n key: 'handleChange',\n value: function handleChange(e, editor) {\n console.log(editor.getContent());\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(_uxcore.Tinymce, {\n onKeyup: me.handleKeyUp.bind(me),\n onChange: me.handleChange.bind(me),\n placeholder: 'placeholder'\n });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tinymce-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';\nimport { Tinymce } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n handleKeyUp(e, editor) {\n console.log(editor.getContent());\n }\n\n handleChange(e, editor) {\n console.log(editor.getContent());\n }\n\n render() {\n const me = this;\n return (\n <Tinymce\n onKeyup={me.handleKeyUp.bind(me)}\n onChange={me.handleChange.bind(me)}\n placeholder={'placeholder'}\n />\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-tinymce-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"精简版","id":"components-tinymce-demo-simple","tags":[],"filepath":"site/components/tinymce/demo/simple.md","directory":"components/tinymce/demo","filename":"simple","meta":{"title":"精简版","description":"\n精简的 tinymce。\n","order":"1","filepath":"site/components/tinymce/demo/simple.md","filename":"simple","directory":"components/tinymce/demo","id":"components-tinymce-demo-simple","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleKeyUp',\n value: function handleKeyUp(e, editor) {\n console.log(editor.getContent());\n }\n }, {\n key: 'handleChange',\n value: function handleChange(e, editor) {\n console.log(editor.getContent());\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n var config = {\n menubar: false,\n toolbar1: 'fontselect fontsizeselect | bold italic underline strikethrough removeformat | forecolor backcolor',\n toolbar2: false,\n statusbar: false\n };\n return React.createElement(_uxcore.Tinymce, {\n onKeyup: me.handleKeyUp.bind(me),\n onChange: me.handleChange.bind(me),\n config: config\n });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tinymce-demo-simple'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';\nimport { Tinymce } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n handleKeyUp(e, editor) {\n console.log(editor.getContent());\n }\n\n handleChange(e, editor) {\n console.log(editor.getContent());\n }\n\n render() {\n const me = this;\n const config = {\n menubar: false,\n toolbar1: 'fontselect fontsizeselect | bold italic underline strikethrough removeformat | forecolor backcolor',\n toolbar2: false,\n statusbar: false,\n };\n return (\n <Tinymce\n onKeyup={me.handleKeyUp.bind(me)}\n onChange={me.handleChange.bind(me)}\n config={config}\n />\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-tinymce-demo-simple'));</code></pre></div>"},"status":"public","toc":""}]

基本使用

基本使用。

import classnames from 'classnames';
import { Tinymce } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

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

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

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

ReactDOM.render(
  <Demo />
, document.getElementById('components-tinymce-demo-basic'));

精简版

精简的 tinymce。

import classnames from 'classnames';
import { Tinymce } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

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

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

  render() {
    const me = this;
    const config = {
      menubar: false,
      toolbar1: 'fontselect fontsizeselect | bold italic underline strikethrough removeformat | forecolor backcolor',
      toolbar2: false,
      statusbar: false,
    };
    return (
      <Tinymce
        onKeyup={me.handleKeyUp.bind(me)}
        onChange={me.handleChange.bind(me)}
        config={config}
      />
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-tinymce-demo-simple'));

API

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

props

配置项	类型	必填	默认值	功能/备注
config	object	optional	{}	tinyMCE 的配置项，官方文档中所有 init 部分的配置在这里完成
content	string	optional	""	输入框中的默认值
placeholder	string	optional	-	占位符
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