Редактор TinyMCE не инициализирует текстовую область в ng-repeat angularJS 1.6 [duplicate]

Предполагая, что ваше угловое приложение работает, и это всего лишь вопрос настройки редактора, вы можете настроить редактор с теми же параметрами, которые описаны для негласного базового TinyMce здесь: http: // www.tinymce.com/wiki.php/configuration

Если вы нажмете на определенную опцию, вы увидите, как вы можете настроить неагрессивный tinymce так:

tinymce.init({
    resize: false
});

Итак, чтобы сделать эквивалентную настройку в угловом с ui-tinymce, вместо tinymce.init (), вы должны установить параметры внутри переменной области scope scope.tinymceOptions. Таким образом, пример настройки ui-tinymce, чтобы не позволить пользователю изменять размер, иметь ширину / высоту 400/300, разрешить печать и выбор цвета / фонового рисунка:

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"

    };
});

И ваше представление может выглядеть примерно так (обратите внимание на tinymceOptions):

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

ui-tinymce должен поставляться с несколькими встроенными плагинами, которые вы можете найти здесь: http: // www.tinymce.com/wiki.php/Plugins

Полный список параметров панели инструментов см. в разделе: http://www.tinymce.com/wiki.php/Controls

Из того, что я помню, вы не можете после изменения факта tinymceOptions. Под этим я подразумеваю, что после загрузки редактора, если вы хотите позже изменить некоторые из параметров $ scope.tinymceOptions, эти изменения не будут автоматически обновляться в редакторе, потому что я считаю, что код ui-tinymce передает параметры tinymce.init () только один раз при загрузке.

Вы также можете делать такие вещи, как вручную задавать содержимое редактора, используя простые javascript-крючки tinyMce, такие как:

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

. Аналогичным образом вы можете использовать getContent (): http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent Но я считаю, что вы также можете получить доступ к содержимому редактора с помощью переменной $ scope.tinymceModel в этом примере. (в случае использования, если у вас есть ng-клик на кнопке, чтобы сохранить содержимое редактора, то как вы получаете содержимое редактора ...)

Но более угловатым способом было бы сделать все через ng-model и переменные области видимости вместо того, чтобы полагаться на исходный jin-файл jin-файла tinymce.

Надеюсь, что это помогает. Таким образом, ui-tinymce - очень тонкая обертка вокруг обычного TinyMce. Итак, все, что вы можете сделать с регулярным тинимом, вы можете по большей части делать с угловой версией. Я думаю, именно поэтому для настройки ui-tinymce не так много документов, но этот факт не совсем понятен новым новичкам.