Нокаут, contenteditable (и уценка)

Question

Работа с обработчиком привязки Knockout, который поддерживается строкой уценки, и визуализирует (используя markdown.js и встроенный «html» bindhandler).

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

Любые идеи или альтернативный подход, о котором вы можете думать?

Полная скрипку здесь: http://jsfiddle.net/ZdxAS/3/

Связывание Handler:

ko.bindingHandlers["editable"] = { 
    init: function (element, valueAccessor) { 
     $(element).on('blur', function (event) { 
      var observable = valueAccessor(); 
      observable($(this).text()); 
      return true; 
     }); 
     $(element).on('focus', function (event) { 
      var observable = ko.utils.unwrapObservable(valueAccessor()); 
      $(this).text(observable); 
      return true; 
     }); 
     return $(element).on('keydown', function (event) { 
      var esc, observable, submit; 
      esc = event.which === 27; 
      element = event.target; 
      if (esc) { 
       document.execCommand("undo"); 
       element.blur(); 
       return true; 
      } else { 
       return true; 
      } 
     }); 
    }, 

    update: function (element, valueAccessor, allBindings, viewModel, context) { 
     var accessor = function() { 
      var text = ko.utils.unwrapObservable(valueAccessor()); 
      return markdown.toHTML(text); 
     } 
     return ko.bindingHandlers.html.update(element, accessor, allBindings, viewModel, context) 
    } 
}; 

Answer 1

Это довольно странно. Я провел тесты в Chrome, и вот что я увидел:

При использовании атрибута contenteditable = true в предвключенном теге редактор содержимого отображается правильно, когда на него нажимается элемент pre. Однако, когда вы затем редактируете контент и, нажимая его, вводите несколько раз, он вставляет теги html, такие как <br /> и <div><br/></div>, а не новые символы строки. Когда вы затем прекратите редактирование элемента pre, щелкнув его, вы увидите исходный HTML-код, а не фактические строки.

И от jQuery text() documentation (используется обработчиком событий размытия):

Из-за изменения в HTML-парсерах в различных браузерах, текст вернулся может изменяться в строках и другом белом пространстве.

Я не эксперт уценки, но он смотрит на меня, как уценка зависит от пробельного - вы получите большой заголовок, если есть «#» в начале строки, но если линия подачи до «#» отсутствует, уценка не даст вам большой заголовок. Таким образом, если ваш пробел перепутался, что может быть вызвано вызовом text(), взаимодействующим с результатами предконвертируемого pre, это может привести к поломке уценки.

Итак, что вы можете сделать вместо этого? Настройте щелчок для редактирования с нокаутом. Вы можете увидеть, как это работает на http://adventuresindotnet.blogspot.com/2012/04/knockout-and-click-to-edit.html и http://knockoutjs.com/documentation/hasfocus-binding.html

Пример скрипке в http://jsfiddle.net/tlarson/w93BR/

Основная идея состоит в том, чтобы иметь только для чтения элемента и изменяемый элемента, и только один из них появляется в то время, в зависимости от того, вы находитесь в режиме редактирования или нет.

<pre data-bind="text: text, visible: !editingText(), click: textClick"></pre>   
<textarea data-bind="value: text, valueUpdate: 'afterkeyup', 
      visible: editingText, hasfocus: editingText" type='text'"></textarea>