Sitecore Rich Text Editor 添加自定义styles

引用

https://sitecore.stackexchange.com/questions/9763/sitecore-8-2-rich-text-editor-drop-down-items
https://web.archive.org/web/20170407075518/http://www.awareweb.com/awareblog/profilespecificstylesheets

在Sitecore中，我们可以通过修改WebStylesheet设置来为富文本编辑器（RTE）添加自定义的CSS。但是，这种方法只允许我们指定一个CSS文件。如果我们想要使用多个CSS文件，或者我们想要为特定的用户角色或设备类型指定不同的CSS，那么我们需要寻找其他的方法。

自定义EditorConfiguration

我们可以创建一个自定义类EditorConfiguration，该类用于根据Sitecore配置文件设置富文本编辑器。它重写了SetupStylesheets方法，以添加在配置文件的Stylesheets文件夹中指定的CSS文件。

public class EditorConfiguration : Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration
{
    public EditorConfiguration(Item profile) : base(profile)
    {
    }

    protected override void SetupStylesheets()
    {
        base.SetupStylesheets();
        Item stylesheetsFolder = Profile.Children["Stylesheets"];
        if (stylesheetsFolder != null && stylesheetsFolder.HasChildren)
        {
            foreach (Item child in stylesheetsFolder.Children)
            {
                if (!string.IsNullOrEmpty(child["Value"]))
                {
                    Editor.CssFiles.Add(child["Value"]);
                }
            }
        }
    }
}

在Sitecore Core库中的RichTextEditor profiles(eg: /sitecore/system/Settings/Html Editor Profiles/Rich Text NAE)中添加Configuration Type节点模板是/sitecore/templates/System/Html Editor Profiles/Html Editor Configuration Type
在Type字段中添加我们自定义的类: MyProject.Foundation.SitecoreExtensions.Shell.Controls.RichTextEditor.EditorConfiguration,MyProject.Foundation.SitecoreExtensions

在Profiles下面添加Stylesheets文件夹，子节点就是使用模板/sitecore/templates/System/Html Editor Profiles/Html Editor List Item, 字段使用Value

问题与解决

上面代码部署后，会出现一个新的问题，Apply Css Classes列表会显示我们引用自定义styles中，所有class的定义，这可能不是我们想要的，我们只要Apply Css Classe展示通过WebStylesheet设置的styles文件中的class, 所以还需要修改ToolsFile.xml文件

我们需要修改ToolsFile.xml文件，添加特定的类作为限制。这个文件定义了在富文本编辑器中可用的所有工具，包括"应用CSS类"下拉列表中的类。你可以在ToolsFile.xml文件中添加或删除类，以控制哪些类应该出现在下拉列表中。

以下是一个示例，展示了如何在ToolsFile.xml中添加一个类：

<classes>
  <class name="Blue Background" value="p.blue" />
</classes>

在这个示例中，我们添加了一个名为"Blue Background"的类，它会应用到p元素，并且会给这个元素添加一个blue类。

结论

通过创建自定义类和修改ToolsFile.xml文件，我们可以更灵活地为Sitecore的RTE添加自定义的CSS。我们可以根据需要加载任意数量的CSS文件，甚至可以根据用户的角色或设备类型来选择加载哪些CSS文件。这为我们提供了更大的灵活性，使我们能够更好地控制富文本编辑器的外观和行为。

评论

Reply