Umbraco 13：如何将富文本编辑器作为宏参数添加？

你遇到的问题是直接引用系统自带RTE视图作为宏参数编辑器时，缺少必要的上下文配置和初始化逻辑导致编辑器无法渲染。以下是可行的解决方案：

步骤1：创建自定义RTE参数编辑器视图 #

在App_Plugins目录下新建RichTextMacroEditor/Views文件夹，创建richtextmacro.html文件：

<div ng-controller="RichTextMacroEditor.Controller">
    <umb-rte model="model" config="rteConfig"></umb-rte>
</div>

步骤2：添加控制器脚本 #

在RichTextMacroEditor下新建Scripts文件夹，创建controller.js文件：

angular.module("umbraco")
    .controller("RichTextMacroEditor.Controller", function ($scope) {
        // 配置RTE工具栏、高度等参数，可按需调整
        $scope.rteConfig = {
            toolbar: ["bold", "italic", "link", "unlink", "removeFormat"],
            stylesheets: [],
            dimensions: {
                height: 220
            }
        };

        // 初始化默认值
        if (!$scope.model.value) {
            $scope.model.value = "";
        }
    });

步骤3：更新package.manifest文件 #

修改你之前创建的package.manifest，关联视图和控制器：

{
    "propertyEditors": [
        {
            "alias": "RichTextMacro",
            "name": "RichText Macro Editor",
            "isParameterEditor": true,
            "icon": "icon-book-alt-2",
            "editor": {
                "view": "/App_Plugins/RichTextMacroEditor/Views/richtextmacro.html",
                "valueType": "HTML"
            }
        }
    ],
    "javascript": [
        "/App_Plugins/RichTextMacroEditor/Scripts/controller.js"
    ]
}

步骤4：生效配置 #

重启Umbraco应用，清理浏览器缓存后，重新为宏添加参数并选择这个编辑器，即可正常显示富文本编辑界面。

问题原因说明 #

Umbraco自带的RTE视图是为内容节点属性设计的，依赖后台全局配置和上下文服务，宏参数面板的环境无法提供这些依赖，直接引用会导致编辑器加载失败。自定义视图通过umb-rte指令手动配置必要参数，适配了宏参数的运行环境。

内容的提问来源于stack exchange，提问作者Pete