[]
上一节中,我们已经开发了一个简单的 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);
效果:
运行后: