2013-08-11 2 views
0

У меня есть экземпляр WYMeditor на моей странице, и я бы хотел контролировать значение текста внутри, используя AngularJS.Настройка содержимого WYMeditor с помощью AngularJS

несколько методов, которые я пробовал и не работал:

Давайте предположим:

$scope.Details = 'foo'; 

и это изменение в зависимости от различных действий пользователя.

  1. Использования нг-модель:

    <textarea ng-model="Details" class="wymeditor"></textarea> 
    

    не работает, а когда я изменять детали, содержание фактических изменений текстовой области, но он скрыт, и содержимые внутреннего плавающий фрейм, что принадлежит WYMeditor, не меняется.

  2. Использование HTML WYMeditor в() функцию внутри моего углового регулятора:

    wym = jQuery.wymeditors(0); 
    wym.html($scope.Details); 
    

    Это возвращает сообщение об ошибке со ссылкой на объявление функции WYMeditor HTML-().

    Error: this._doc is undefined 
    

Я использую WYMeditor 0.5, угловой 1.1.5, 2.0.3 и JQuery JQuery-мигрирует 1.2.1 (для WYMeditor для работы с JQuery 2).

Я подумал о том, чтобы каким-то образом добавить в объявление iFrame ng-model = "Details", но я не знаю, как это сделать, и кажется, что здесь есть более глубокая проблема, чтобы решить эту проблему.

Спасибо!

+0

'wym.html ($ scope.Details)' это определенно метод, который необходимо использовать для обновления содержимого редактора. Ошибка 'this._doc' заставляет меня думать, что либо ваш редактор не был инициализирован правильно (ищите ошибки до этого вызова), либо вы не получаете экземпляр редактора, который, по вашему мнению, вы. Некоторые подробности о том, как вы создаете свой экземпляр WYMeditor, были бы полезны. –

ответ

0

WYMeditor требует времени для инициализации. Лучше всего установить взаимодействие с ним в крюке postInit.

angular.module('myApp') 
    .directive('wymeditor', ($log, $parse) -> 
    scope: 
     ngModel: '=' 
    restrict: 'C' 
    link: (scope, element, attrs) -> 
     $log.debug 'Initializing WYMeditor', attrs.wymOptions 
     options = $parse(attrs.wymOptions)() 
     options.postInit = (wym) -> 
     # we need to wait till editor is ready to interact with it 
     scope.$watch 'ngModel', (newVal, oldVal) -> 
      $log.debug 'ngModel Changed, refreshing editor....' 
      wym._html(scope.ngModel) 

     element.wymeditor(options) 

) 

Вы затем настроить WYMeditor что-то вроде этого:

<textarea 
    class="wymeditor" 
    wym-options="{ 
    skin: 'seamless', 
    iframeHtml: WYMeditor.SKINS.seamless.OPTS.iframeHtml, 
    logoHtml: '' 
    }" 
    ng-model="someVar" 
    ></textarea> 

Пожалуйста, обратите внимание, что выше, не заполнить модель обратно. WYMeditor не обеспечивает способ обнаружения изменений. Самый надежный способ - опросить изменения каждые несколько секунд. Проверьте textAngular.