Включить и отключить CKEditor Inline редактирование с помощью Angular

Question

Включить и отключить CKEditor Inline редактирование с помощью Angular

0

Как включить или отключить ckeditor.inline в div на основе щелчка кнопки/ссылки.

Так я бы достиг этого в jquery, но не могу понять это с помощью углового.

$('.toggle-edit').click(function(e){ 
  var id_editedDiv = $(this).data('editTarget');
  var editedDiv = '#' + id_editedDiv;

  if( $(editedDiv).attr('contenteditable') == 'true' )
  {
    $(editedDiv).attr('contenteditable','false');
    CKEDITOR.instances.id_editedDiv.destroy();
    $(this).text('Start Editing');
  }
  else
  {
    $(editedDiv).attr('contenteditable','true');
    CKEDITOR.inline( id_editedDiv );
    $(this).text('Finish Editing');
  }
});

Вот как я достиг результата.

https://plnkr.co/edit/YUOYGa?p=preview

Но теперь мне нужно выяснить, как привязать модель к CKEditor, чтобы изменения менялись в модели, когда я нажимал save.

Adrian Halid 18 авг. 2016, в 09:16

Источник

Теги:

angularjs

ckeditor

2 ответа

Ещё вопросы

Muhammad Shahzad · Answer 1 · 2016-08-18T05-50-00.000Z

Уничтожает экземпляр редактора, освобождая все используемые им ресурсы. Если редактор заменит элемент, элемент будет восстановлен.

В вашем контроллере:

alert( CKEDITOR.instances.editor1 ); // e.g. object
CKEDITOR.instances.editor1.destroy();
alert( CKEDITOR.instances.editor1 ); // undefined

Более детально

Я знаю, как включить и отключить CKEditor с помощью уничтожения. Я пытаюсь реализовать это с помощью AngularJS. Так что не используя jQuery. Проблема в том, что в моем примере PLNKR я не знаю, как привязать модель обратно при нажатии кнопки Сохранить

Sabik · Answer 2 · 2016-08-18T05-21-00.000Z

Вы можете использовать кнопку с атрибутом ng-click, например:

<button type="button" class="inlineEditButton"
    ng-controller="CKEditorController"
    ng-click="changeInlineEditindState()"
</button>

в CKEditorController вы должны определить метод:

$scope.changeInlineEditindState = function() {
// your code
}

Вы можете сделать что-то вроде:

var content = '';

После создания экземпляра добавьте прослушиватель:

ck.on('instanceReady', function () {
                ck.setData(content);
            });

Нажмите кнопку "Сохранить":

content = ck.getData();

Если вы посмотрите на plnkr.co/edit/YUOYGa?p=preview, я понял, как это сделать, но у меня есть проблемы с привязкой контента к модели.
Я немного изменил твой код. Пожалуйста, смотрите plnkr.co/edit/EHIpCw4ORLW6MzGOGCsa?p=preview Вы просто должны получить простой текст, если вам это нужно
Благодарю. Вот что я сделал. Я не думал, что он действительно правильно использует angular, потому что моя модель не привязана к CKEditor и поэтому не обновляется с использованием angular framework. Если вы добавите сообщение с решением, я могу пометить его как ответ