2

したがって、目標は、tinymce でテキストを編集し、それを永続化し、angularJS を使用して同じ html スタイル形式で div に表示することです。

私は angularUI ディレクティブで tinymce 3.5.8 を使用しています。データベース (mySQL、TEXT) に wysiwyg のコンテンツを保存することができました。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