11

我需要自动调用 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);

=) =)

4

9 回答 9

16 

<!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-01-19T12:42:23.090 回答
9

CKEditor 中已经内置了一个类替换器。应用了类的任何文本区域ckeditor都将自动应用编辑器而无需初始化。

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

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

将类添加ckeditor到文本区域

HTML

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

。网

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

自定义类初始化

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

利用：

CKEDITOR.replaceClass="MyClass";
于 2018-02-14T15:13:46.860 回答
7

使用全部替换。

使用类替换文本区域

在页面中：

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

在 JS 代码中

CKEDITOR.replaceAll( 'myClassName' );
于 2020-01-29T02:06:40.153 回答
3

现在有可能，请检查： http: //nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html

于 2013-07-02T08:35:47.887 回答
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

...这有点奇怪，因为Replace by Class示例包含以下代码：

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

它工作得很好。

于 2018-02-01T10:02:07.780 回答
0

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

那么只有

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

拥有多个 ckeditor 实例就足够了。

于 2018-09-04T13:27:20.497 回答
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类，并且需要有一个idorname字段。

于 2016-10-22T15:34:51.503 回答