[]
表单单元格可以把编辑的值与数据库的值绑定,进而更新到数据库中。通常表单类单元格需要具备以下功能。详见开发表单类单元格。
修改 TinymcePluginCellType.cs 文件:
using GrapeCity.Forguncy.CellTypes;
using GrapeCity.Forguncy.Commands;
using GrapeCity.Forguncy.Plugin;
using System.Collections.Generic;
using System.ComponentModel;
namespace TinymcePlugin
{
[Icon("pack://application:,,,/TinymcePlugin;component/Resources/Icon.png")]
[Designer("TinymcePlugin.Designer.TinymcePluginCellTypeDesigner, TinymcePlugin")]
public class TinymcePluginCellType : CellType, ISupportDefaultValue, ICommandCellType, ISupportDataValidation, ISupportUIPermission, ISupportDisable
{
[DisplayName("值变更命令")]
public List<Command> CommandList { get; set; }
public CommandExcuteKind CommandExcuteKind => CommandExcuteKind.OnValueChanged;
[DisplayName("数据验证")]
public DataValidationLink DataValidationLink { get; set; }
[DisplayName("单元格权限")]
public List<UIPermission> UIPermissions { get; set; } = GetDefaultPermission();
public static List<UIPermission> GetDefaultPermission()
{
var defaultAllowRoles = new List<string>() { "FGC_Anonymous" };
return new List<UIPermission>
{
new UIPermission(){ Scope = UIPermissionScope.Enable, AllowRoles = defaultAllowRoles },
new UIPermission(){ Scope = UIPermissionScope.Editable, AllowRoles = defaultAllowRoles },
new UIPermission(){ Scope = UIPermissionScope.Visible, AllowRoles = defaultAllowRoles },
};
}
[FormulaProperty]
[DisplayName("默认值")]
public object DefaultValue { get; set; }
public bool NeedFormatDefaultValue => false;
[DisplayName("模式")]
[RadioGroupProperty(ValueList = "classic|inline|distraction-free", DisplayList = "经典模式|内联模式|沉浸无干扰模式")]
public string Mode { get; set; } = "classic";
[CategoryHeader("其他")]
[DisplayName("禁用")]
public bool IsDisabled { get; set; }
public override SupportFeatures SupportFeatures
{
get
{
return SupportFeatures.ShouldCheckDirtyWhenLeavePage | SupportFeatures.AllowSetTabOrder;
}
}
public override string ToString()
{
return "富文本编辑(Tinymce)单元格";
}
}
}
修改TinymcePluginCellType.js如下:
/// <reference path="../Declarations/forguncy.d.ts" />
/// <reference path="../Declarations/forguncy.Plugin.d.ts" />
class TinymcePluginCellType extends Forguncy.Plugin.CellTypeBase {
createContent() {
this.content = $("<div style='width:100%;height:100%'></div>");
this.content.attr("id", this.ID);
return this.content;
}
async 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',
branding: false,
setup: (editor) => {
this.editor = editor;
editor.on('blur', ()=> {
this.commitValue();
this.validate();
});
editor.on('input', () => {
this.hideValidateTooltip();
});
}
};
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;
}
this.tinymce = await tinymce.init(config);
this.editor.setContent(this.initValue);
this.content.parent().css("overflow", "");
}
setValueToElement(_, value) {
value = value?.toString() ?? "";
if (this.editor && this.tinymce) {
this.editor.setContent(value);
}
else {
this.initValue = value;
}
}
getValueFromElement() {
return this.editor.getContent();
}
disable() {
super.disable();
this.updateDisableReadOnly();
}
enable() {
super.enable();
this.updateDisableReadOnly();
}
updateDisableReadOnly() {
if (!this.editor) {
return;
}
if (this.isDisabled() || this.isReadOnly()) {
this.editor.mode.set('readonly');
}
else {
this.editor.mode.set('design');
}
}
destroy() {
if (this.editor) {
this.editor.destroy();
}
}
}
Forguncy.Plugin.CellTypeHelper.registerCellType("TinymcePlugin.TinymcePluginCellType, TinymcePlugin", TinymcePluginCellType);
设计器效果: