Question

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

CKEDITOR.replace( 'editor1');

其中“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>

和这个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);

=）=）

Answer 1

<!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>

Answer 2

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

代码位于 ckeditor.js 并使用CKEDITOR.replaceClass="ckeditor";

按类初始化 （无需额外的JavaScript）

将类ckeditor添加到textarea

<强> HTML

<textarea class="ckeditor" rows="4" cols="50"></textarea>

<强> .NET

<asp:TextBox ID="txt" CssClass="ckeditor" runat="server" TextMode="MultiLine" />

自定义类初始化

如果你想使用自己的课程，你可以在 ckeditor.js

之后用自己的初始化覆盖课程。
使用：

CKEDITOR.replaceClass="MyClass";

Answer 3

使用replaceAll。

replace textarea using class

在页面中：

<textarea class="myClassName"></textarea>

在JS代码中

CKEDITOR.replaceAll( 'myClassName' );

Answer 4

现在可以，检查一下： http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html

Answer 5

我个人使用这样的功能：

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

我使用它有很多动态配置，我相信它可以很好地改变以满足您的需求。玩一玩，让我们知道你带来了什么！

正如您所看到的，无论如何我都在使用ID，但是看不到使用类的问题

Answer 6

＆＃13;

<!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>

＆＃13;

Answer 7

以下是一个极简主义示例，该示例说明了基于http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html的精简版本在文本区域上使用<div style="position:relative;" > <img src="http://www.industrydynamics.ca/images/skype_icon.png" width="100" height="100" > <input type="button" name="" value="Button" style="position:absolute;width:80px;left:10px;top:120px;" > </div>类：

ckeditor

在我的测试中，我发现<script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script> <textarea id="something" class="ckeditor"> <p> Hello world! </p> </textarea>标记需要<textarea>类，并且需要有ckeditor或id字段。

Answer 8

...这有点奇怪，因为按类替换示例包含以下代码：

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">

它完美无缺。

Answer 9

实例化多个ckeditor4实例的最佳方法是使用ckeditor-jquery适配器。

那么只有

$( 'textarea.ckeditor' ).ckeditor();

足以拥有多个ckeditor实例。

按类调用CKEditor

9 个答案: