したがって、目標は、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)
<p><span style="color: #ff9900;">aaaaa</span></p>
<p>&nbsp;</p>
ディレクティブ (これは、オプションを追加した 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,
ご協力ありがとうございました !