小型MCE + N1ED 反应组件
基于 TinyMCE 创建并编辑 HTML 内容, 使用强大的视觉页面构建器
问题: 还有什么比TinyMCE更好的?
问: 最新的TinyMCE 6 + 一组免费部件,自定义模板,现代 UI, Flmngr 文件管理器, ImgPen 图像编辑器, Bootstrap 列编辑器, 和可视配置 : 国家1ED。 。 。 .
这个模块将帮助将 N1ED(捆绑了 TinyMCE + 全部需要的免费加载器使其动力) 整合到您的 React app中.
安装
与 无 安装、 运行
$ npm install --save @edsdk/n1ed-react
见满 反应 + TinyMCE + N1ED 安装手册 为了更多.
使用量
以下是在您的 React 组件中使用 TinyMCE + N1ED 的例子 。 这是一个JS样本,见下文TypeScript和JavaScript GitHub样本项目的链接.
在这个例子中,我们使用添加N1ED和附加(这是可选的)定义自定义工具栏,并在工具栏内创建自定义的TinyMCE按钮,以显示如何使用N1ED的基本TinyMCE特性.
import React from 'react';
import {N1ED} from '@edsdk/n1ed-react';
class YourReactComponent {
handleEditorChange(content, editor) {
console.log('Content was updated:', content);
};
render() {
return <div>
Edit the content:
<N1ED
apiKey="REACDFLT" // you will use your own key later
initialValue="<p>N1ED react demo</p>"
onEditorChange={this.handleEditorChange}
init={{
height: 500,
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | myCustomToolbarButton',
setup: (editor) => {
// Just a sample of creating a custom button
// N1ED does not block this TinyMCE feature
// and also does not conflict with TinyMCE plugins
console.log("TinyMCE initialized");
editor.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Custom Button',
onAction: () => alert('Custom button clicked!'),
});
},
}}
/>
</div>;
}
}
重要说明:: 不要将小MCE作为 控制 组件( 不尝试用一对 initialValue编号 :onEditorChange) (中文(简体) ). TinyMCE 只支持一次设置初始值, 然后使用 onEditorChange 调用。 React TinyMCE 执行是经典 无控制 组件.
所有属性 <N1ED> 元素在正式表格中描述 微量移动 反应文件。 。 。 .
唯一的区别是:
-
apiKey属性此处与 TinyMCE Cloud 无关, 而是与 N1ED 云有关, 在您需要视觉配置或添加一些之前是可选的 其他加载 从N1ED生态系统. -
您不需要定义
plugins参数N1ED值:它已经定义,直到您指定了其他东西.
实例
我们有两个如何使用N1ED反应组件的例子:
技术细节
@edsdk/n1ed-react 用途 @tinymce/tinymce-react 模块内部和代表所有给 TinyMCE 的调用,除了它为初始化与动态 CDN 连接相关的正确环境所做的一些特别行动(这使得配置您的 N1ED+成为可能) 使用微小的 MCE 实例在线 盘子) (中文(简体) ).
类型脚本支持
这个模块用TypeScript来编写,可以同时用于JS和TS项目. 您不需要单独安装打字, 输入到工程中 .
许可证
此模块在 LGPL v3 下发布, 可以自由用于您的工程 。 N1ED本身也是免费产品.