表单单元格可以把编辑的值与数据库的值绑定,进而更新到数据库中。通常表单类单元格需要具备以下功能。详见开发表单类单元格。
修改 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);
设计器效果: