Question

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

我正在使用CKeditor btw。我基本上有这个：

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

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

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

Answer 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的可观察对象（值存储的位置），一个在viewmodel中指定的css和选项。

希望对你有所帮助。

Knockout js'文章'预览框

1 个答案: