扩展内容编辑器

该平台允许开发人员扩展内容编辑器以提供更丰富的内容。

为什么要扩展内容编辑器？

内容编辑器允许输入 HTML、图像和视频，但是其他类型的内容无法输入或用户难以输入。为内容编辑器提供扩展是最为有效。

语法高亮显示源代码

源代码虽然可以在没有扩展的情况下输入到编辑器中，但没有扩展的情况下，每个用户都需要为他们输入的源代码提供样式。通过向编辑器添加源代码扩展，我们可以简化最终用户所需的输入，并为有语法高亮显示功能的代码提供一致的输出。

投票

该平台还提供了调查扩展。如果没有此扩展，则无法使用编辑器输入投票。投票扩展能够提供一个接口允许输入投票，呈现这些投票并存储自定义数据到数据库中。

创建扩展

该平台提供了 IEmbeddableContentWidgetType 接口，可以在 Limyee.Api.dll 中找到。此接口允许将新类型的内容输入到编辑器中。

此示例将创建一个新的 EmbeddableContentWidgetType，该类型在内容内显示一个框。插入内容时，框的背景色是可配置的。

首先，我们需要为我们的内容片段类型提供唯一的 ID（EmbeddedContentWidgetTypeId）、名称 （ContentWidgetName） 和 description （ContentWidgetDescription）。我们将使用 ITranslatablePlugin 接口来提供名称和描述的翻译。

readonly Guid _widgetTypeId = new Guid("E76228E6-EE70-444E-8BA8-75FD32FA8596");

public string ContentWidgetName
{
    get { return _translation.GetLanguageResourceValue("widget_name"); }
}

public string ContentWidgetDescription
{
    get { return _translation.GetLanguageResourceValue("widget_description"); }
}

public Guid EmbeddedContentWidgetTypeId
{
    get { return _widgetTypeId; }
}

我们可以根据内容类型限制嵌入新内容片段。在示例中，我们将允许所有类型，因此我们将只返回 true。如果我们想将新类型限制为仅在博客文章中允许，则仅当参数 contentTypeId 与博客文章内容类型 ID 匹配时，我们才能返回 true。

bool IEmbeddableContentWidgetType.CanEmbed(Guid contentTypeId, int userId)
{
    return true;
}

EmbedConfiguration 属性用于定义用于输入嵌入所需的表单数据。在这种情况下，我们将允许用户选择嵌入框的背景色，因此我们使用 DataType 为 color 定义单个属性。

PropertyGroup[] IEmbeddableContentWidgetType.EmbedConfiguration
{
    get
    {
        var group = new PropertyGroup
        {
            Id = "options",
            LabelText = _translation.GetLanguageResourceValue("configuration_group"),
            OrderNumber = 1
        };
        group.Properties.Add(new Property
        {
            Id = "color",
            LabelText = _translation.GetLanguageResourceValue("configuration_color"),
            DataType = "Color",
            OrderNumber = 1,
            DefaultValue = ""
        });
        return new PropertyGroup[] { group };
    }
}

提供 Validate 方法以验证最终用户输入的数据是否正确。错误经翻译后可能会返回给最终用户，以帮助更正任何无效数据。

EmbeddableContentWidgetValidationState IEmbeddableContentWidgetType.Validate(IEmbeddableContentWidget embeddedWidget)
{
    var color = embeddedWidget.GetString("color");

    if (string.IsNullOrEmpty(color))
        return new EmbeddableContentWidgetValidationState(false) { Message = _translation.GetLanguageResourceValue("configuration_colorinvalid") };

    return new EmbeddableContentWidgetValidationState(true);
}

每当添加或更新嵌入的内容时，都会调用 AddUpdateContentWidgets 方法。这可用于创建、更新和删除嵌入的数据库记录。此示例不需要使用此方法，因此我们将其留空。

void IEmbeddableContentWidgetType.AddUpdateContentWidgets(Guid contentId, Guid contentTypeId, IEnumerable<IEmbeddableContentWidget> embeddedWidgets)
{

}

预览图像将在编辑器菜单中和编辑器中显示为图标，以表示嵌入的内容。对于此示例，我们可以将其留空，使用平台提供的图像。

string IEmbeddableContentFragmentType.PreviewImageUrl
{
    get { return null; }
}

在输出嵌入的内容时调用 Render 方法。还提供了 target 参数，如果要为不同的目标显示不同的输出，这将非常有用。该示例将读取我们在 EmbedConfiguration 属性中定义的颜色参数。如果已经设置了颜色，我们将渲染一个具有固定高度和宽度以及所选背景色的容器。

string IEmbeddableContentWidgetType.Render(IEmbeddableContentWidget embeddedWidget, string target)
{
    var color = embeddedWidget.GetString("color");

    if (string.IsNullOrEmpty(color))
        return string.Empty;

    return string.Format("<div style='height: 300px; width: 300px; background-color: {0};'> </div>", color);
}

下面是示例 IEmbeddableContentWidgetType 的完整源代码：

using System;
using System.Collections.Generic;
using Limyee.Extensibility.Configuration.Version1;
using Limyee.Extensibility.EmbeddableContent.Version1;
using Limyee.Extensibility.Version1;

namespace Samples
{
    public class SampleEmbeddable : IEmbeddableContentWidgetType, ITranslatablePlugin, IPlugin
    {
        readonly Guid _widgetTypeId = new Guid("E76228E6-EE70-444E-8BA8-75FD32FA8596");

        ITranslatablePluginController _translation;

        #region IEmbeddableContentWidgetType Members
        public string ContentWidgetName
        {
            get { return _translation.GetLanguageResourceValue("widget_name"); }
        }

        public string ContentWidgetDescription
        {
            get { return _translation.GetLanguageResourceValue("widget_description"); }
        }

        public Guid EmbeddedContentWidgetTypeId
        {
            get { return _widgetTypeId; }
        }

        bool IEmbeddableContentWidgetType.CanEmbed(Guid contentTypeId, int userId)
        {
            return true;
        }

        PropertyGroup[] IEmbeddableContentWidgetType.EmbedConfiguration
        {
            get
            {
                var group = new PropertyGroup
                {
                    Id = "options",
                    LabelText = _translation.GetLanguageResourceValue("configuration_group"),
                    OrderNumber = 1
                };
                group.Properties.Add(new Property
                {
                    Id = "color",
                    LabelText = _translation.GetLanguageResourceValue("configuration_color"),
                    DataType = "Color",
                    OrderNumber = 1,
                    DefaultValue = ""
                });
                return new PropertyGroup[] { group };
            }
        }

        void IEmbeddableContentWidgetType.AddUpdateContentWidgets(Guid contentId, Guid contentTypeId, IEnumerable<IEmbeddableContentWidget> embeddedWidgets)
        {

        }

        string IEmbeddableContentWidgetType.PreviewImageUrl
        {
            get { return null; }
        }

        string IEmbeddableContentWidgetType.Render(IEmbeddableContentWidget embeddedWidget, string target)
        {
            var color = embeddedWidget.GetString("color");

            if (string.IsNullOrEmpty(color))
                return string.Empty;

            return string.Format("<div style='height: 300px; width: 300px; background-color: {0};'> </div>", color);
        }

        EmbeddableContentWidgetValidationState IEmbeddableContentWidgetType.Validate(IEmbeddableContentWidget embeddedWidget)
        {
            var color = embeddedWidget.GetString("color");

            if (string.IsNullOrEmpty(color))
                return new EmbeddableContentWidgetValidationState(false) { Message = _translation.GetLanguageResourceValue("configuration_colorinvalid") };

            return new EmbeddableContentWidgetValidationState(true);
        }
        #endregion

        #region IPlugin Members
        string IPlugin.Description
        {
            get { return "显示可配置颜色的框。"; }
        }

        void IPlugin.Initialize()
        {

        }

        string IPlugin.Name
        {
            get { return "嵌入示例"; }
        }
        #endregion

        #region ITranslatablePlugin Members
        Translation[] ITranslatablePlugin.DefaultTranslations
        {
            get
            {
                var enUs = new Translation("en-us");

                enUs.Set("widget_name", "Embeddable Box");
                enUs.Set("widget_description", "Displays a box with configurable color.");

                enUs.Set("configuration_group", "Options");
                enUs.Set("configuration_color", "Background Color");
                enUs.Set("configuration_colorinvalid", "A Background Color must be provided.");


                var zhCn = new Translation("zh-cn");

                zhCn.Set("widget_name", "嵌入框");
                zhCn.Set("widget_description", "显示可配置颜色的框。");

                zhCn.Set("configuration_group", "选项");
                zhCn.Set("configuration_color", "背景颜色");
                zhCn.Set("configuration_colorinvalid", "必须提供背景色。");

                return new Translation[] { enUs, zhCn };
            }
        }

        void ITranslatablePlugin.SetController(ITranslatablePluginController controller)
        {
            _translation = controller;
        }
        #endregion
    }
}

在平台中部署并启用插件后，在创建帖子时，您将看到“插入嵌入框”选项

选择该选项，您将能够配置背景色

提交此表单后，编辑器将使用代码中提供的预览图像url显示可嵌入的内容。创建帖子后，您应该会看到使用所选背景颜色呈现的框。