11

CKEditor の複数のインスタンスを自動的に呼び出す必要があります...実際には次の関数を使用します。

CKEDITOR.replace( 'editor1');

ここで、「editor1」は、CKEditor を表示する div の ID 名です。

このプロセスを自動化するために jQuery を使用しています。id の代わりに「class」タグを使用する必要があります。

特に、私はこのhtmlを持っています:

<div class="CKEditor">
    <div class="text">
            mytext
    </div>

    <p style="text-align:center" class="buttons">
        <input type="button" value="edit" class="button_edit">
        <input type="button" value="preview" class="button_preview" style="display:none">
    </p>

    <div class="editor" >
    </div>

</div>

そしてこのjQueryスクリプト：

$(function() 
{
    $('.CKEditor').each(function()
    {
        var __main = $(this);
        var __buttons = __main.children('.buttons');
        var __text = __main.children(".text");
        var editor;

        __buttons.children('.button_edit').click(function()
        { 
            __text.hide();
            if (editor) return;

            editor = CKEDITOR.replace("editor");
            editor.setData(__text.html());

            if(editor)
            { 
                __buttons.children('.button_edit').hide(); 
                __buttons.children('.button_preview').show(); 
            }
        });

        __buttons.children('.button_preview').click(function()
        {
            __text.show();
            __text.html(editor.getData());

            if ( !editor ) return;

            editor.destroy();
            editor = null;
            __buttons.children('.button_edit').show(); 
            __buttons.children('.button_preview').hide(); 
            __main.children("#editor").html("");
        });
    });
});

CKEDITORのソースを変更しなくても可能ですか？

編集

私は解決策を見つけました：

1) html は次のようになります。

<div class="editor" id="edt1"></div>

2) JQuery で:

var __editorName = __main.children('.editor').attr('id');

そして私はCKEditorを次のように呼び出します:

editor = CKEDITOR.replace(__editorName);

=) =)

4

9 に答える 9

2

個人的に私はこのような関数を使用します:

function loadEditor(id){
    var instance = CKEDITOR.instances[id];
    if(instance){
        CKEDITOR.destroy(instance);
    }
    var editor = CKEDITOR.replace(id);
}

私はそれを多くの動的構成で使用していますが、ニーズに合わせてうまく変更できると確信しています。プレイして、あなたが何を持っているか教えてください！

ご覧のとおり、とにかくIDを使用していますが、クラスの使用に問題は見られません

于 2012-12-24T13:13:09.020 に答える
2 

<!DOCTYPE HTML>
<html>
	<head>
		<script src="ckeditor.js"></script>
		<script>
			$(document).ready(function() {
				CKEDITOR.replaceClass = 'ckeditor';
			});
		</script>
	</head>
	<body>
		<div>
			<textarea class="ckeditor" cols="80" name="content"></textarea>
		</div>
		<div>
			<textarea class="ckeditor" cols="80"  name="content"></textarea>
		</div>			 
	</body>
</html>

于 2016-07-06T05:26:15.167 に答える
0

これは、 http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.htmlckeditorの簡素化されたバージョンに基づいて、テキスト領域でクラスを使用することを示す最小限の例です:

<script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>

<textarea id="something" class="ckeditor">
    &lt;p&gt; Hello world! &lt;/p&gt;
</textarea>

私のテストでは、<textarea>タグにckeditorクラスが必要であり、idまたはnameフィールドが存在する必要があることがわかりました。

于 2016-10-22T15:34:51.503 に答える