0

最近、knockoutjs を取り上げて、wysiwyg エディター内で記述するときに div で html をレンダリングするプレビュー ボックスを作成しようとしています。現在、書いたテキストを div でレンダリングしようとしていますが、wysiwyg エディターと競合しているようです。通常の<textarea>フィールドに書かれたテキストをレンダリングしてスクリプトをテストしましたが、問題なく動作しました。ただし、wysiwyg エディターで同じことをしようとすると、何もレンダリングされません。

私は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 に答える