AngularJS和TinyMCE编辑器 - 颜色没有正确绑定

时间:2015-03-25 21:45:23

标签: angularjs tinymce

我已将颜色插件添加到TinyMCE实例中。

plugins: "textcolor",
toolbar: "forecolor backcolor"

我正在使用ng-bind-html属性将tinyMCE编辑器内容添加到元素中。 Altought,结果没有按预期显示,因为我在编辑器中添加了一种颜色,但它没有反映到具有ng-bind-html属性的元素。

这是结果: enter image description here

生成的HTML是:

<p>TESTING <span style="color: #ff0000;">COLORED</span> CONTENT</p>

你们有没有想过如何将颜色反映到装订元素? 谢谢!

2 个答案:

答案 0 :(得分:0)

在设置中,您可以调用NodeChange事件:

setup: function (ed) {
        ed.on('NodeChange', function (e) {
        ed.save();
        updateView(e);
    });
}

答案 1 :(得分:0)

我知道您问这个问题已有好几年了,但是今天我遇到了同样的问题。 内联颜色实际上已正确保存到ng-model变量中,但是ng-bind-html从其输出中删除了内联样式。

可以在这里找到解决方案:AngularJS: Bind html string with custom style

在控制器构造函数中加载$ sce服务,并创建此控制器函数:

$scope.trustAsHtml = function(string) {
    return $sce.trustAsHtml(string);
};

并像这样输出html:

<div ng-bind-html="trustAsHtml(htmlString)"></div>

然后所有颜色都应显示。