Как использовать привязку knockoutjs в редакторе Telerik?

Question

Я пытаюсь реализовать функцию редактирования на месте для поля описания, где редактирование выполняется с помощью редактора telerik mvc.Редактор должен быть скрыт, если пользователь не щелкает на промежутке, представляющем редактируемый раздел, и после этого скрывает редактор и размещает размеченную запись в редактируемом элементе.

Я не уверен, где применить выбивающую привязку, чтобы все, что введено в редактор telerik, отображалось в промежутке после того, как редактор скрыт. Редактор создает iframe, который содержит размеченный html, которыйget генерируется, когда пользователь вводит контент.Преобразованная разметка сохраняется в виде HTML-кодированного значения в текстовой области, которая находится за пределами iframe.

Если попытаться добавить привязку к сгенерированной текстовой области, но не увидеть диапазон, связанный с обновлением data-bind = "text: imgDescr".

Вид бритвы

<div>
    <span data-bind="text: imgDescr"></span>
</div>
<div>
@{ Html.Telerik().Editor()
  .Name("editor")
  .HtmlAttributes(new {style = "height:400px"})
  .Encode(false)
  .Render();    
}
</div>

и js

function appViewModel() {
    this.ImgName = ko.observable(helpText);
    this.ImgDescr = ko.observable(helpText);
}

$('t-raw-content').attr('data-bind', "value: ImgDescr");

// Activates knockout.js
ko.applyBindings(new appViewModel());

Есть какие-нибудь предложения о том, как это можно сделать?Я также изучал использование tinyMCE, но думаю, что рендеринг обрабатывается аналогичным образом.

Answer 1

Используя приведенные примеры здесь и здесь и пример привязки для tinyMCE, предоставленной вики-нокаутом здесь Мне удалось связать редактор таким образом, чтобы Мне нужно это.

Часть того, чего мне не хватало, - это скрипт jquery.tinymce.js.

Привязка была выполнена в пользовательской привязке, как в примере выше, и единственная строка, необходимая для выполнения привязки, была

   setTimeout(function() { $(element).tinymce(options); }, 0);

в разделе инициализации пользовательского связывания.

Вот jsfiddle того, что у меня было. Это не совсем рабочий пример в jsFiddle, но показывает все, что у меня было на моей странице.

Answer 2

Если ваш редактор - tinymce editor (?), Добавление привязки к текстовой области не поможет.Вы можете получить доступ к содержимому редактора с помощью tinymce.get('editor_id').getContent(); и установить его с помощью tinymce.get('editor_id').setContent('This is a demo text.');