添加中文资源与定制菜单

http://tinymce.ax-z.cn/general/localize-your-language.php

把下载的 zh_CN.js 文件拷贝到 Resources\tinymce_5.10.0\tinymce\js\tinymce\langs 目录

修改 TinymcePluginCellType.js 文件如下

在第9行添加了语言的设置。

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],
            language: 'zh_CN',
        });
    }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("TinymcePlugin.TinymcePluginCellType, TinymcePlugin", TinymcePluginCellType);

配置菜单与工具条

根据帮助文档还可以添加Tinymce的菜单，以及插件的设置，示例代码如下

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],
            language: 'zh_CN',
            plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern help emoticons',
            toolbar: 'code undo redo | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
        });
    }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("TinymcePlugin.TinymcePluginCellType, TinymcePlugin", TinymcePluginCellType);

参考文档http://tinymce.ax-z.cn/general/work-with-plugins.php
效果

当然，现在Tinymce的配置是在 TinymcePluginCellType.js 文件中写死的，如果希望插件适配更多情况，应该暴露一些属性，让使用插件的用户通过配置属性让单元格插件更灵活

添加属性

Tinymce可以配置的属性特别多，这里，通过编辑模式属性做一个示例

Tinymce 有三种模式 经典模式，内联模式，沉浸模式

修改TinymcePluginCellType.cs文件

    public class TinymcePluginCellType : CellType
    {
        [DisplayName("模式")]
        [RadioGroupProperty(ValueList = "classic|inline|distraction-free", DisplayList = "经典模式|内联模式|沉浸无干扰模式")]
        public string Mode { get; set; } = "classic";

        public override string ToString()
        {
            return "富文本编辑（Tinymce）单元格";
        }
    }

修改 TinymcePluginCellType.js 文件

class TinymcePluginCellType extends Forguncy.Plugin.CellTypeBase {
    createContent() {
        this.content = $("<div style='width:100%;height:100%'></div>");
        return this.content;
    }
    onPageLoaded() {
        const config = {
            target: this.content[0],
            language: 'zh_CN',
            plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern help emoticons',
            toolbar: 'code undo redo | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
        };

        if (this.CellElement.CellType.Mode === "inline") {
            config.inline = true;
        }
        else if (this.CellElement.CellType.Mode === "distraction-free") {
            config.inline = true;
            config.toolbar = false;
            config.menubar = false;
        }

        tinymce.init(config);
        this.content.parent().css("overflow", "");
    }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("TinymcePlugin.TinymcePluginCellType, TinymcePlugin", TinymcePluginCellType);

效果

运行后

更新: 2022-12-11 21:49:45
原文: https://www.yuque.com/robert-bh51n/ea8l6c/ubux1kgcfc9ffb2v