Привязка значения к TinyMCE ‹textarea› с использованием модели AngularJS

Я разрабатываю приложение ASP.net MVC с AngularJS и TinyMCE.

Мне нужно отобразить текстовое поле WYSIWYG для пользователя, чтобы получить ввод.

Я не могу привязать начальное значение к текстовой области. Нужна помощь. Вот что я сделал.

<script type="text/javascript">
    tinyMCE.init({
        mode: "textareas",
        theme: "advanced",
        theme_advanced_path: false,
        theme_advanced_buttons1: "fontselect,|,bold,italic,underline,|,fontsizeselect,|,forecolor,backcolor",
        theme_advanced_buttons2: "|,justifyleft,justifycenter,justifyright,|,link,unlink,|,bullist,numlist,|,code",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
    });
</script>

Вид:

<textarea data-ng-model="selectedProduct.ProductText">
  {{selectedProduct.ProductText}}
</textarea>

angularjs tinymce tinymce-3
person RandomUser    schedule 13.08.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы определенно хотите использовать эту библиотеку: https://github.com/angular-ui/ui-tinymce Тогда все становится намного проще. Образец:

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

myAppModule.controller('MyController', function($scope) {
    $scope.tinymceOptions = {
            //enter any options here
        }
    };
});
person David Bohunek    schedule 13.08.2014
comment
это бесплатное ПО? и я использую TinyMCE версии 3.5.8 - person RandomUser; 13.08.2014
comment
Хороший вопрос. Да, это. Лицензию можно найти здесь: github.com/angular-ui/ui. -tinymce/blob/master/ЛИЦЕНЗИЯ - person David Bohunek; 13.08.2014
comment
Он совместим с версией 4+ TinyMCE, тогда вам придется обновиться. Если вы не можете или не хотите, я бы посмотрел этот пост: stackoverflow.com/questions/20005699/ - person David Bohunek; 13.08.2014
comment
Мне нужна помощь в загрузке библиотеки, которую вы упоминаете. В ссылке, которую вы указали, какой файл (ы) я должен скачать? - person RandomUser; 13.08.2014
comment
Это единственный файл, который вам нужно скачать: github. com/angular-ui/ui-tinymce/blob/master/src/tinymce.js Добавьте его в свое приложение в качестве зависимости: var myAppModule = angular.module('MyApp', ['ui.tinymce']) - person David Bohunek; 13.08.2014
comment
Я обновил версию TinyMCE до 4.0.0, и ожидаемое было достигнуто благодаря вам. Я сталкиваюсь с новой проблемой, например, когда я пытаюсь изменить размер текстовой области, ширина уменьшается до тех пор, пока я не отпущу клавишу. Как я могу отключить параметр изменения размера в 4.0.0, а также удалить полосу меню из элемента, как я могу этого добиться? - person RandomUser; 13.08.2014
comment
Проверено с v4. Работает отлично! Спасибо за сообщение. - person Roman K; 12.11.2014