[]
Tinymce是一个前端富文本编辑器组件,本教程会一步一步演示如何把 Tinymce包装为活字格的单元格插件。
首先,下载 tinymce,为了方便学习,我们选择了中文网站 http://tinymce.ax-z.cn/。
单击确定生成工程。
解压缩 tinymce_5.10.0.zip,拷贝 tinymce_5.10.0 到插件项目的 Resources 目录下。
修改 PluginConfig.json 文件, 在“javascript”属性中,包 tinymce.min.js 引入到活字格中。
{
"assembly": [
"TinymcePlugin.dll"
],
"css": [],
"javascript": [
"Resources/tinymce_5.10.0/tinymce/js/tinymce/tinymce.min.js",
"Resources/TinymcePluginCellType.js"
],
"serverApiAssembly": [],
"image": "Resources/PluginLogo.png",
"description": "TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。",
"name": "富文本编辑(Tinymce)",
"pluginType": "cellType",
"guid": "9dee124a-24ef-4545-838d-8e6d89e62d70",
"version": "1.0.0.0",
"dependenceVersion": "8.0.104.0",
"bundleJavaScript": true,
"bundleCSS": true
}
修改 Resources/TinymcePluginCellType.js 如下
class TinymcePluginCellType extends Forguncy.Plugin.CellTypeBase {
createContent() {
this.content = $("<div style='width:100%;height:100%'></div>");
return this.content;
}
onPageLoaded() {
tinymce.init({
target: this.content[0]
});
}
}
Forguncy.Plugin.CellTypeHelper.registerCellType("TinymcePlugin.TinymcePluginCellType, TinymcePlugin", TinymcePluginCellType);
启动活字格,在页面上添加“富文本编辑(Tinymce)单元格”。
单击开始按钮,可以在浏览器中看到,Tinymce已经被成功添加。