0

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

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

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

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

脚本本身就像我提到的那样工作，它适用于<textarea>正常CKEDITOR.replace的<textarea>.

4

1 回答 1

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 和在您的视图模型中指定的选项。

希望对您有所帮助。

于 2013-04-17T15:38:32.413 回答