活字格V9帮助手册
Page tree
Skip to end of metadata
Go to start of metadata

Tinymce是一个前端富文本编辑器组件，本教程会一步一步演示如何把 Tinymce包装为活字格的单元格插件。

首先，下载 tinymce，为了方便学习，我选择了中文网站 http://tinymce.ax-z.cn/。

使用插件构建工具创建TinymcePlugin单元格插件

单击确定生成工程。

下载Tinymce

集成Tinymce到单元格插件中

解压缩 tinymce_5.10.0.zip，拷贝 tinymce_5.10.0 到插件项目的 Resources 目录下。

修改 PluginConfig.js 文件, 在“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已经被成功添加。

  • No labels