Knockout js '文章' 预览框答案

【问题标题】：Knockout js 'article' preview boxKnockout js '文章' 预览框
【发布时间】：2013-04-17 23:38:32
【问题描述】：

最近拿起了 knockoutjs，我正在尝试制作一个预览框，当我在所见即所得的编辑器中编写它时，它将在 div 中呈现 html。现在我正试图让我写的文本呈现在一个 div 中，但它似乎与所见即所得的编辑器冲突。我通过渲染写在普通<textarea> 字段中的文本来测试脚本，没有问题，工作正常。但是，当我尝试在所见即所得编辑器中执行相同操作时，它不会呈现任何内容。

顺便说一句，我正在使用 CKeditor。我基本上有这个：

<textarea name="body" data-bind="value: body"></textarea>
<script type="text/javascript">
   CKEDITOR.replace('body');
</script>

默认情况下，Ckeditor 需要一个名为“body”的<textarea> 字段，它将被编辑器界面替换。

脚本本身就像我提到的那样工作，它适用于普通的<textarea>，但当我在<textarea> 上运行CKEDITOR.replace 时，它似乎不喜欢它。

【问题讨论】：

使用 firebug 或 chrome 开发工具查看 CKeditor 生成的 HTML 的样子。它可能正在用其他一些元素替换 textarea。

标签： knockout.js ckeditor wysiwyg

【解决方案1】：

问题在于 ckeditor 将其替换为 contenteditable 并且它不知道任何值绑定。您可以编写一个 customBindingHandler 来执行此操作。不久前我为 CLEditor 写了一个。这是它的样子

ko.bindingHandlers.cleditor = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)             {

    var modelValue = valueAccessor();
    var options = {}

    if (allBindingsAccessor().cleditorOptions)
        options = $.extend(options, allBindingsAccessor().cleditorOptions);

    var ko_editor = $(element).cleditor(options);

    if (allBindingsAccessor().cleditorCSS) {
        var cssLink = ko_editor[0].doc.createElement("link");
        cssLink.rel = "stylesheet";
        cssLink.type = "text/css";
        cssLink.href = allBindingsAccessor().cleditorCSS;
        if (ko_editor[0].doc.head === undefined) {
            var headElement = ko_editor[0].doc.getElementsByTagName('head');
            headElement[0].appendChild(cssLink);
        }
        else
            ko_editor[0].doc.head.appendChild(cssLink);
    }

    ko_editor[0].change(
        function (a) {
            var elementValue = ko_editor[0].doc.body.innerHTML;

            if (ko.isWriteableObservable(modelValue)) {
                modelValue(elementValue);
            }
            else { //handle non-observable one-way binding
                var allBindings = allBindingsAccessor();
                if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].htmlValue) allBindings['_ko_property_writers'].htmlValue(elementValue);
            }
        }
      );

},
update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()) || "";
    var ko_editor = $(element).cleditor();
    if (ko_editor[0].doc.body.innerHTML !== value) {
        ko_editor[0].doc.body.innerHTML = value;
        ko_editor[0].focus();
    }
}
};

html 看起来像这样

<textarea rows="20" data-bind="cleditor: Body, cleditorCSS: 'path/ComposeEditor.css', cleditorOptions:$root.EditorOptions"></textarea>

因此，您现在可以提供一个名为 Body 的可观察对象（存储值的位置）、一个 css 和在您的视图模型中指定的选项。

希望对你有所帮助。

【讨论】：