无法将 html 与 angularJS 和 tinymce 绑定答案

【问题标题】：Can't bind html with angularJS and tinymce无法将 html 与 angularJS 和 tinymce 绑定
【发布时间】：2013-06-07 14:12:44
【问题描述】：

所以目标是使用tinymce编辑一些文本，将其持久化并使用具有相同html、样式格式的angularJS将其显示在一个div中。

我正在使用带有 angularUI 指令的 tinymce 3.5.8，我已设法将所见即所得的内容保存在我的数据库（mySQL、TEXT）中。我正在通过 Spring 将其作为字符串检索并将其发送回 angularJS 应用程序。

我试过放一个

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

myModel 定义为

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

但标签不会被解释为 html，它们只是像

一样打印

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

我也尝试过使用 ngSanitize 和 ng-bind-html。

html：

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

控制器：

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

数据库条目（文本）

&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;

指令（这是我添加选项的 angularui 指令）：

...
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,

感谢您的帮助！

【问题讨论】：

标签： html binding angularjs tinymce

【解决方案1】：

听起来您已将 html 作为转义 html 保存到数据库中。如果发生了这种情况，那么您必须先取消转义，您可以使用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'>"

【讨论】：

是的，但我通过使用 tinymce entity_encoding : "raw" 选项解决了它。