2

所以目标是使用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);

数据库条目 (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;

指令（这是我添加选项的 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,

谢谢您的帮助 ！

4

1 回答 1

0

听起来您已将 html 作为转义 html 保存到数据库中。如果发生了这种情况，那么您必须先取消转义，您可以使用此答案中描述的技术来做到这一点

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'>"
于 2013-06-12T08:41:00.240 回答