按类调用CKEditor

Dan*_*ilo 9 javascript jquery ckeditor

我需要自动调用CKEditor的多个实例...实际上我使用的函数:

CKEDITOR.replace( 'editor1');
Run Code Online (Sandbox Code Playgroud)

其中"editor1"是我想要显示我的CKEditor的div的id名称.

我正在使用jQuery来自动化这个过程,我需要使用"class"标签而不是id.

特别是我有这个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>
Run Code Online (Sandbox Code Playgroud)

和这个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("");
        });
    });
});
Run Code Online (Sandbox Code Playgroud)

是否可以不修改CKEDITOR的来源?


编辑

我找到了解决方案:

1)html成为:

<div class="editor" id="edt1"></div>
Run Code Online (Sandbox Code Playgroud)

2)在JQuery中:

var __editorName = __main.children('.editor').attr('id');
Run Code Online (Sandbox Code Playgroud)

我打电话给CKEditor:

editor = CKEDITOR.replace(__editorName);
Run Code Online (Sandbox Code Playgroud)

=)=)

小智 14

<!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>
Run Code Online (Sandbox Code Playgroud)


Dre*_*TeK 7

CKEditor中已经内置了一个类替换器.ckeditor应用了类的任何textarea 都会自动应用编辑器而不进行初始化.

代码在ckeditor.js中并使用CKEDITOR.replaceClass="ckeditor";


按类初始化 (不需要额外的JavaScript)

将类添加ckeditor到textarea

HTML

<textarea class="ckeditor" rows="4" cols="50"></textarea> 
Run Code Online (Sandbox Code Playgroud)

.净

<asp:TextBox ID="txt" CssClass="ckeditor" runat="server" TextMode="MultiLine" />
Run Code Online (Sandbox Code Playgroud)

自定义类初始化

如果你想使用自己的类,你可以 ckeditor.js 之后用你自己的初始化覆盖这个类

使用:

CKEDITOR.replaceClass="MyClass";
Run Code Online (Sandbox Code Playgroud)


小智 7

使用 replaceAll。

使用类替换 textarea

在页面中:

<textarea class="myClassName"></textarea>  
Run Code Online (Sandbox Code Playgroud)

在 JS 代码中

CKEDITOR.replaceAll( 'myClassName' ); 
Run Code Online (Sandbox Code Playgroud)


Mos*_*eyi 2

我个人使用这样的函数:

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

我将它与大量动态配置一起使用,并且我相信它可以很好地更改以满足您的需求。玩一玩,让我们知道您会带来什么!

正如你所看到的,我无论如何都在使用 ids,但看不到使用类的问题