Can't bind html with angularJS and tinymce

Question

so the goal is to edit some text with tinymce, persist it and display it in a div using angularJS with the same html, style formating.

I'm using tinymce 3.5.8 with angularUI directive, I've managed to save the content of the wysiwyg in my database (mySQL, TEXT). I'm retrieving it through Spring as a String and send it back to the angularJS app.

I've tried putting a

<div ng-bind-html-unsafe="myModel">

where myModel is defined as

$scope.myModel = Projet.get(getting the json somewhere);

but tags are not interpreted as html, they just print like

<p><span style="color #ff9900;>Texte de test</span></p>.

I've also tried with ngSanitize and ng-bind-html.

html :

<div class="content-swipe-box">
       <h3>Contexte</h3>
         <div ng-bind-html-unsafe="projet.contexte"></div>
</div>

controller :

$scope.projet = ProjetService.getProject($routeParams.projectId);

Database entry (TEXT)

&lt;p&gt;&lt;span style=&quot;color: #ff9900;&quot;&gt;aaaaa&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;

directive (that's the angularui directive where I've added options):

...
link: function (scope, elm, attrs, ngModel) {
    var expression, options, tinyInstance;
    // generate an ID if not present
    if (!attrs.id) {
      attrs.$set('id', 'uiTinymce' + generatedIds++);
    }
    options = {
        skin:"bootstrap",
        theme_advanced_disable:"styleselect, anchor",
        plugins : "advlist, fullscreen, preview",
        theme_advanced_buttons1:"bold, italic, underline, justifyleft, justifycenter,      justifyright, justifyfull, formatselect, fontselect, fontsizeselect, forecolor",
        theme_advanced_buttons2:"bullist, numlist, outdent, indent, undo, redo, link, unlink, image, cleanup, code, blockquote, hr,removeformat,visualaid,separator,charmap, preview, fullscreen ",
        theme_advanced_resizing: true,
        theme_advanced_resize_horizontal : false,
        force_br_newlines : true,
        force_p_newlines : false,

Thank you for your help !

Community · Accepted Answer · 2017-05-23 12:13:00Z

0

It sounds like you have saved the html to your database as escaped html. If this is what has happened then you will have to unescape it first, you can do that using the technique described in this answer

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

htmlDecode("&lt;img src='myimage.jpg'&gt;"); 
// returns "<img src='myimage.jpg'>"

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jun 12, 2013 at 8:41

Derek Ekins

11.4k6 gold badges63 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2251745 Over a year ago

Yes that was it, but I solved it by using tinymce entity_encoding : "raw" option.

Collectives™ on Stack Overflow

Can't bind html with angularJS and tinymce

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related