如何在sitecore RichTextEditor中添加自定义 line-height属性

引用

https://jammykam.wordpress.com/2014/06/17/add-custom-drop-down-list-to-rich-text-editor-in-sitecore/
https://www.davidbuckell.com/blogs/development/sitecore/customising-the-rich-text-editor/adding-a-custom-dropdown-to-sitecore-rich-text-editor-toolbar/
https://sitecorerunner.com/2018/08/21/adding-rte-richtext-custom-dropdown-list-in-sitecore-9/

sitecore RichTextEditor是一个强大的文本编辑器，它可以让你在sitecore中创建和编辑富文本内容。它提供了很多常用的功能，比如字体、颜色、对齐、插入图片等。但是，有时候你可能需要一些更高级的功能，比如调整文本的行高。行高是指文本行之间的垂直距离，它可以影响文本的可读性和美观性。在sitecore richtexteditor中，你可以通过修改HTML源码来设置行高，但是这样做比较麻烦，而且需要一定的HTML知识。有没有一种更简单的方法呢？答案是肯定的。在本文中，我将教你如何在sitecore richtexteditor中添加一个自定义的下拉列表，让你可以方便地选择和插入不同的行高值。

在Core中创建Line-Height下拉列表

在Core库中找到Profile , eg: /sitecore/system/Settings/Html Editor Profiles/Rich Text Default/Toolbar 3
创建名称为Line Height, 模板为 /sitecore/templates/System/Html Editor Profiles/Html Editor Custom Drop Down Button
字段Click 为自定义字符串，下面的JS中会用到，eg: InsertCustomLineHeight
子节点模板为: /sitecore/templates/System/Html Editor Profiles/Html Editor List Item

创建一个CSS文件

接下来，我们需要创建一个CSS文件，用来定义下拉列表的图标和样式。我们可以在刚才创建的LineHeight文件夹下创建一个CSS文件，比如LineHeight.css。这个CSS文件的内容如下：

span.InsertCustomLineHeight {
    background-image: url('/~/icon/office/32x32/line_spacing_text.png') !important;
    background-size: contain;
    background-position: center;
}

这个CSS文件的主要部分是span.InsertCustomLineHeight，它定义了下拉列表的图标。我们使用了一个sitecore自带的图标，它的路径是/~/icon/office/32x32/line_spacing_text.png，你也可以使用其他的图标，只要把路径替换掉就行。我们使用了!important来覆盖默认的图标样式，然后使用了background-size和background-position来调整图标的大小和位置。

创建一个JS文件

最后，我们需要创建一个JS文件，用来定义下拉列表的行为和逻辑。我们可以在刚才创建的LineHeight文件夹下创建一个JS文件，比如LineHeight.js。
其中InsertCustomLineHeight与之前Core库中定义的Click字段保持一致。
这个JS文件的内容如下：

Telerik.Web.UI.Editor.CommandList["InsertCustomLineHeight"] = function (commandName, editor, args) {
    var val = args.get_value();
    //editor.pasteHtml(val);
    args.set_cancel(true);


    var selectedElement = editor.getSelectedElement(); // 获取选中的元素
    if (selectedElement) {
        //当选中纯文本时，selectedElement返回整个BODY
        if (selectedElement.nodeName && selectedElement.nodeName === "BODY") {
            //重新获取当前聚集文本
            var selection = editor.getSelection() && editor.getSelection().getBrowserSelection();
            if (selection) {
                var focusNode = selection.focusNode;
                if (focusNode && focusNode.nodeType === Node.TEXT_NODE) {
                    var newElement = editor.createElement('p');
                    newElement.innerHTML = focusNode.textContent;
                    focusNode.parentNode.replaceChild(newElement, focusNode);
                    selectedElement = newElement;
                }
            }
        }
        if (val === "clear") {
            selectedElement.style["line-height"] = ""; // 如果val是clear，那么清除这个属性
        } else {
            selectedElement.style["line-height"] = val;
        }
    }
};

jQuery(document).ready(function ($) {
    loadCSS = function (href) {
        var cssLink = $("<link rel='stylesheet' type='text/css' href='" + href + "'>");
        $("head").append(cssLink);
    };
    loadCSS("/sitecore/shell/Controls/Rich Text Editor/LineHeight/LineHeight.css");
});

最后在Sitecore Rich Text Editor中引用这个LineHeight.js

添加配置文件

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:role="http://www.sitecore.net/xmlconfig/role/">
  <sitecore>
    <clientscripts>
        <htmleditor>
            <script src="/sitecore/shell/Controls/Rich Text Editor/LineHeight/LineHeight.js" language="javascript" key="LineHeight" />
        </htmleditor>
    </clientscripts>
  </sitecore>
</configuration>

评论

Reply