Wie konfiguriere ich tinymceOptions von angular-ui/ui-tinymce

Question

Ich habe mich entschieden, ui-tinymce (eckige Version von tinymce) für meinen Blog zu verwenden. Aber ich kann die Dokumentation für dasselbe nicht finden. Ich freue mich über jede Ressource oder jeden Vorschlag zur Konfiguration von tinymceOptions.

Dies ist git Link - https://github.com/angular-ui/ui-tinymce

Answer 1

Vorausgesetzt, dass Sie Ihre Winkel App Arbeits haben, und es ist nur eine Frage der den Editor konfigurieren, können Sie den Editor mit den gleichen Optionen konfigurieren, die für die nicht-Winkel dokumentiert Basis TinyMce hier: http://www.tinymce.com/wiki.php/configuration

Wenn Sie auf eine bestimmte Option klicken, sehen Sie, wie Sie nicht-Winkel tinymce wie so konfigurieren:

tinymce.init({ 
    resize: false 
}); 

so in angula die entsprechende Anpassung zu tun Mit dem Befehl ui-tinymce anstelle von tinymce.init() würden Sie die Optionen innerhalb der Bereichsvariablen $ scope.tinymceOptions setzen. So ein Beispiel ui-tinymce konfiguriert, um nicht zulassen, dass Benutzer, um die Größe, hat eine Breite/Höhe von 400/300, erlaubt Druck und die Textfarbe/Hintergrund-Picker wäre:

myAppModule.controller('MyController', function($scope) { 
    $scope.tinymceOptions = { 
     resize: false, 
     width: 400, // I *think* its a number and not '400' string 
     height: 300, 
     plugins: 'print textcolor', 
     toolbar: "undo redo styleselect bold italic print forecolor backcolor" 

    }; 
}); 

Und Ihre Ansicht etwas aussehen könnte wie folgt aus (beachten Sie die tinymceOptions):

<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea> 

ui-tinymce sollte mit einer Reihe von integrierten in Plugins kommen, die Sie Dokumentation finden Sie hier: http://www.tinymce.com/wiki.php/Plugins

Für eine vollständige Liste der Symbolleiste Optionen finden : http://www.tinymce.com/wiki.php/Controls

Soweit ich mich erinnere, können Sie nach der Tat die tinymceOptions nicht ändern. Damit meine ich, dass nach dem Laden des Editors, wenn Sie später etwas von $ scope.tinymceOptions ändern wollen, diese Änderungen nicht automatisch im Editor aktualisiert werden, weil ich glaube, dass der uinymce-Code die Optionen an tinymce.init übergibt() nur einmal, wenn es geladen ist.

können Sie auch Dinge tun, wie der Editor Inhalte manuell einstellen, indem Sie die Ebene TinyMCE mit JavaScript Haken wie:

tinyMCE.activeEditor.setContent('<h1>hello world</h1><p>this is my story. the end.</p>'); 

Ähnlich Sie getContent verwenden können() sehen: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent Aber ich glaube, man kann auch Zugang der Inhalt des Editors über die Variable $ scope.tinymceModel in diesem Beispiel. (Der Anwendungsfall ist, wenn Sie einen NG-Klick auf eine Schaltfläche haben, um den Inhalt des Editors zu speichern, dann wie erhalten Sie den Inhalt des Editors ...)

Aber der eckige Weg wäre, alles durch die ng- zu tun Model- und Scope-Variablen statt sich auf die rohe tinymce javascript api zu verlassen.

Hoffe, dass hilft. Zusammenfassend ist ui-tinymce ein sehr dünner Wrapper rund um TinyMce. Alles, was Sie mit der normalen Tinymce tun können, können Sie größtenteils mit der eckigen Version tun. Ich denke, deshalb gibt es nicht viele Dokumente für die Anpassung von ui-ynymce, aber diese Tatsache ist für neue Anfänger nicht ohne weiteres ersichtlich.

Answer 2

Auch wenn jCuga eine sehr hilfreiche Erklärung lieferte, konnte ich immer noch kein angepasstes Setup erhalten. Der TinyMCE-Editor würde geladen, aber mit Standardeinstellungen. Es scheint, dass andere ein ähnliches Problem haben, das als issue #158 für das UI-Tinyme-Direktiven-Projekt protokolliert wird.Das Hauptproblem scheint für mich darin zu bestehen, dass die standardmäßige tinymceOptions-Variable niemals überschrieben wird, weil mein Controller nie geladen wird, da ich die Setup-Optionen in einem Angular-Controller definiert habe, wie es die Dokumente vorschlagen. Ich löste dies durch einfaches Referenzierung der Controller als solche:

<textarea ui-tinymce="tinymceOptions" ng-controller="RichTextCtrl"></textarea> 

Sobald ich die ng-Controller Referenz hinzugefügt wurden meine benutzerdefinierten Einstellungen anstelle der Standardeinstellungen verwendet.