Плагин AngularJS и Redactor

Итак, я работаю над новым сайтом на AngularJS, и мне это нравится!

Однако я столкнулся с проблемой. Я пытаюсь добавить плагин jQuery под названием «Редактор» в свои текстовые области, но я думаю, что происходит, когда я инициализирую плагин, он заменяет элемент текстовой области. Причина, по которой это проблематично, заключается в том, что я установил атрибут ng-model для текстовой области, например:

I am using AngularJS UI to pickup the focus event, and then execute the following code upon focus of the text

    $scope.addRedactor = function() {
        $('.redactor').redactor();
    });

Теперь я не могу получить значение textarea, потому что, когда я пытаюсь получить доступ к «ответу» ng-модели, он оказывается неопределенным.

Есть ли способ привязать атрибут ng-model к текстовой области ПОСЛЕ того, как на него повлиял Redactor? В противном случае, есть ли другой способ получить значение текстовой области?


jquery angularjs redactor
person Sneaksta    schedule 18.03.2013    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Сегодня я искал тот же ответ и дал указание решить его:

angular.module('Module', []).directive("redactor", function() {
  return {
    require: '?ngModel',
    link: function($scope, elem, attrs, controller) {   

      controller.$render = function() {

        elem.redactor({
          keyupCallback: function() {
            $scope.$apply(controller.$setViewValue(elem.getCode()));
          },
          execCommandCallback: function() {
            $scope.$apply(controller.$setViewValue(elem.getCode()));
          }
        });

        elem.setCode(controller.$viewValue);
      };
    }
  };
});

Затем вы можете просто использовать следующий HTML:

<textarea ng-model="yourModel" redactor></textarea>

Модель будет обновляться при каждом нажатии клавиши и всякий раз, когда пользователь нажимает кнопку на панели инструментов. Модель будет содержать HTML-код.

Я только начал работать с AngularJS, поэтому, пожалуйста, дайте мне знать, есть ли лучшие способы сделать это или я нарушил некоторые соглашения, о которых я до сих пор не знаю.

person BrechtVds    schedule 28.04.2013
comment
В итоге я использовал то же решение. Я отмечу ваш ответ как правильный, чтобы другие могли увидеть решение. Спасибо! - person Sneaksta; 29.04.2013
comment
Кстати, для тех, кто интересуется, как вывести модель в виде проанализированного HTML: ‹div ng-bind-html-unsafe=yourModel›‹/div› вместо {{yourModel}} - person BrechtVds; 29.04.2013
comment
Я получаю сообщение об ошибке TypeError: невозможно вызвать метод «заменить» из неопределенного, когда я вызываю редактор из-за того, что его html-содержимое пусто. Есть ли лучший обходной путь, чем присвоить ему значение в контроллере? - person blnc; 07.05.2013
comment
Получение того же TypeError. Почему именно вызывает эту ошибку? - person Maarten; 10.05.2013

arrow_upward
7
arrow_downward

Для тех, кто считает, что принятый ответ не работает, как я. Это рабочий (с Angular v1.1.5)

angular.module('Module', []).directive("redactor", function() {
        return {
            require: '?ngModel',
            link: function($scope, elem, attrs, controller) {
                controller.$render = function() {
                    elem = $(elem);
                    elem.val(controller.$viewValue);
                    elem.redactor({

                        changeCallback: function() {
                            $scope.$apply(controller.$setViewValue(elem.val()));
                        }

                    });

                };
            }
        };
    });

ChangeCallback намного лучше, чем другие обратные вызовы вместе взятые, и в моем случае я должен привести элемент к элементу Jquery. Я также обнаружил, что setCode и getCode вообще недоступны. Возможно, это другая версия.

person David Lin    schedule 30.07.2013
comment
Эй, Дэвид! На самом деле я все еще работаю над своей реализацией Redactor и только недавно обновился до новой версии. Вы правы, getCode и setCode больше не существуют. Теперь вы можете просто использовать this.get() или this.set() в Redactor. - person Sneaksta; 30.07.2013
comment
Да, API изменился. Я также заметил, что changeCallback, похоже, вызывается до того, как элемент получает значение, и, следовательно, всегда будет отставать на один символ при выполнении elem.val(). Чтобы исправить это, просто выполните elem.redactor('sync') перед чтением elem.val(). - person Alen Mujezinovic; 08.08.2013
comment
это идеально большое спасибо. На самом деле он работает с двухсторонней привязкой. - person Subtubes; 24.09.2013
comment
@EdgarMartinez Не могли бы вы поделиться своей директивой? - person Michael J. Calkins; 09.12.2013
comment
Кажется, я не могу установить значение элемента после инициализации. - person Michael J. Calkins; 09.12.2013

arrow_upward
4
arrow_downward

Используйте этот модуль AngularJS для «RedactorJS»: https://github.com/TylerGarlick/angular-redactor

Это сработало для меня.

person benske    schedule 11.12.2013
comment
Удалось ли вам использовать ng-модель? Я пытался, но привязка ng-модели не работает, если пользователь не нажимает кнопку кода в редакторе js. - person Ben W; 28.08.2014
comment
Я использовал директиву, упомянутую на github.com/TylerGarlick/angular-redactor/issues/15 для привязки к работе. - person Ben W; 28.08.2014