0

I've added the color plugin to my TinyMCE instance.

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

I'm using the ng-bind-html attribute to add the tinyMCE editor content to an element. Altought, the result doesn't show as expected, because I'm adding a color into the editor, but it's not reflected to the element with the ng-bind-html attribute.

This is the result: enter image description here

The generated HTML is this:

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

Do you guys have any idea how to reflect the colors to the binding element? Thanks!

Kiwanax
  • 1,265
  • 1
  • 22
  • 41

2 Answers2

0

On setup you can call NodeChange event:

setup: function (ed) {
        ed.on('NodeChange', function (e) {
        ed.save();
        updateView(e);
    });
}
IceManSpy
  • 1,078
  • 1
  • 13
  • 35
0

I know it's been years since you asked this question, but I had the same problem today. The inline colors are actually saved properly to the ng-model variable, but ng-bind-html strips the inline styles from its output.

The solution is found here: AngularJS: Bind html string with custom style

Load the $sce service in your controller constructor, and create this controller function:

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

And output the html like this:

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

Then all the colors should show.

Nikolai
  • 1