组件演示

[{"title":"基本使用","id":"components-tinymce-demo-basic","tags":[],"filepath":"site/components/tinymce/demo/basic.md","directory":"components/tinymce/demo","filename":"basic","meta":{"title":"基本使用","description":"\n<p>基本使用。</p>\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\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;\n<span class=\"hljs-keyword\">import</span> { Tinymce } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n handleKeyUp(e, editor) {\n <span class=\"hljs-built_in\">console</span>.log(editor.getContent());\n }\n\n handleChange(e, editor) {\n <span class=\"hljs-built_in\">console</span>.log(editor.getContent());\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Tinymce</span>\n <span class=\"hljs-attribute\">onKeyup</span>=<span class=\"hljs-value\">{me.handleKeyUp.bind(me)}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{me.handleChange.bind(me)}</span>\n <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">{'placeholder'}</span>\n /&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-tinymce-demo-basic'));</span></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<p>精简的 tinymce。</p>\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\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;\n<span class=\"hljs-keyword\">import</span> { Tinymce } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n handleKeyUp(e, editor) {\n <span class=\"hljs-built_in\">console</span>.log(editor.getContent());\n }\n\n handleChange(e, editor) {\n <span class=\"hljs-built_in\">console</span>.log(editor.getContent());\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">const</span> config = {\n menubar: <span class=\"hljs-literal\">false</span>,\n toolbar1: <span class=\"hljs-string\">'fontselect fontsizeselect | bold italic underline strikethrough removeformat | forecolor backcolor'</span>,\n toolbar2: <span class=\"hljs-literal\">false</span>,\n statusbar: <span class=\"hljs-literal\">false</span>,\n };\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Tinymce</span>\n <span class=\"hljs-attribute\">onKeyup</span>=<span class=\"hljs-value\">{me.handleKeyUp.bind(me)}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{me.handleChange.bind(me)}</span>\n <span class=\"hljs-attribute\">config</span>=<span class=\"hljs-value\">{config}</span>\n /&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-tinymce-demo-simple'));</span></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