[]
        
(Showing Draft Content)

改造为表单单元格

表单单元格可以把编辑的值与数据库的值绑定,进而更新到数据库中。通常表单类单元格需要具备以下功能。详见开发表单类单元格

修改 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);

设计器效果: