Как настроить tinymceOptions от angular -ui/ui-tinymce

Я решил использовать ui-tinymce (angular версия tinymce) для моего блога. Но я не могу найти документацию для нее. Поймите любой ресурс или любое предложение по настройке tinymceOptions.

Это ссылка git - https://github.com/angular-ui/ui-tinymce

Ответы

Ответ 1

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

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

tinymce.init({
    resize: false
});

Итак, чтобы выполнить эквивалентную настройку в angular с помощью 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-click на кнопке для сохранения содержимого редактора, то как вы получаете содержимое редактора...)

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

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

Ответ 2

Несмотря на то, что jCuga предоставил очень полезное объяснение, я все еще не мог настроить настроенную настройку. Редактор TinyMCE загрузится, но с настройками по умолчанию. Похоже, что у других есть аналогичная проблема, которая регистрируется как issue # 158 для проекта директивы ui-tinymce. Основная проблема для меня, похоже, в том, что, поскольку я определил параметры установки в контроллере Angular, как предлагают документы, переменная tinymceOptions по умолчанию никогда не перезаписывается, потому что мой контроллер никогда не загружается. Я решил это просто ссылкой на контроллер как таковой:

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

Как только я добавил ссылку на ng-controller, мои пользовательские настройки были использованы вместо настроек по умолчанию.