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

上一节中，我们已经开发了一个简单的 Tinymce 单元格，但是显示的文本都是英文的，很不友好。本节教程将演示如何给Tinymce添加中文资源。

添加资源

下载地址：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);


效果：

运行后：


  • No labels