Javascript 按类调用CKEditor
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14021825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call CKEditor by class
提问by Danilo
I need to call multiple instances of CKEditor automatically...actually I use the function:
我需要自动调用 CKEditor 的多个实例......实际上我使用了这个函数：
CKEDITOR.replace( 'editor1');
Where "editor1" is the id name of the div where I want show my CKEditor.
其中“editor1”是我想要显示我的 CKEditor 的 div 的 id 名称。
I'm using jQuery to automate this process and I need to use the "class" tag instead the id.
我正在使用 jQuery 来自动化这个过程，我需要使用“class”标签而不是 id。
In particular i have this html:
特别是我有这个 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>
and this jQuery script:
和这个 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("");
});
});
});
Is it possible without modify the source of CKEDITOR?
是否可以不修改CKEDITOR的源代码？
EDIT
编辑
I found the solution:
我找到了解决方案：
1) The html become:
1）html变成：
<div class="editor" id="edt1"></div>
2) In the JQuery:
2）在JQuery中：
var __editorName = __main.children('.editor').attr('id');
and i call CKEditor with:
我打电话给CKEditor：
editor = CKEDITOR.replace(__editorName);
=) =)
=) =)
回答by Kevin Detrain
<!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>回答by DreamTeK
There is already a class replacer built into CKEditor. Any textarea with the class ckeditorapplied will have the editor applied automatically without initialisation.
CKEditor 中已经内置了一个类替换器。任何ckeditor应用了类的 textarea都将自动应用编辑器而无需初始化。
The code is in ckeditor.jsand uses CKEDITOR.replaceClass="ckeditor";
代码在ckeditor.js 中并使用CKEDITOR.replaceClass="ckeditor";
Initialise by class(no extra JavaScript required)
按类初始化（不需要额外的 JavaScript）
Add Class ckeditorto textarea
将类添加ckeditor到文本区域
HTML
HTML
<textarea class="ckeditor" rows="4" cols="50"></textarea>
.NET
。网
<asp:TextBox ID="txt" CssClass="ckeditor" runat="server" TextMode="MultiLine" />
Custom Class initialisation
自定义类初始化
If you wish to use your own class you can simply overwrite the class with your own initialisation afterckeditor.js
如果你想使用你自己的类，你可以在ckeditor.js之后用你自己的初始化简单地覆盖这个类
Use:
用：
CKEDITOR.replaceClass="MyClass";
回答by patie
It's possible now, check this: http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html
现在有可能，请检查：http: //nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html
回答by Nurul
Using replaceAll.
使用 replaceAll。
in the page:
在页面中：
<textarea class="myClassName"></textarea>
in the JS code
在 JS 代码中
CKEDITOR.replaceAll( 'myClassName' );
回答by Moseleyi
Personally I use function like this :
我个人使用这样的功能：
function loadEditor(id){
var instance = CKEDITOR.instances[id];
if(instance){
CKEDITOR.destroy(instance);
}
var editor = CKEDITOR.replace(id);
}
I use it with lots of dynamic config, and I am sure it can be nicely changed to suit your needs. Have a play and let us know what you come with!
我将它与许多动态配置一起使用，我相信它可以很好地更改以满足您的需求。玩一玩，让我们知道你带来了什么！
As you can see I am using ids anyway, but can't see a problem with using classes
如您所见，我无论如何都在使用 id，但看不到使用类的问题
回答by Sunil Suman
<!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>回答by mwfearnley
Here's a minimalist example that illustrates using the ckeditorclass on text areas, based on a stripped down version of http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html:
这是一个极简示例，它说明了ckeditor在文本区域上使用类，基于http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html的精简版本：
<script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>
<textarea id="something" class="ckeditor">
<p> Hello world! </p>
</textarea>
In my testing I found that the <textarea>tag needed to have the ckeditorclass, and it needed to have an idor namefield present.
在我的测试中，我发现<textarea>标签需要有ckeditor类，并且需要有一个idorname字段。
回答by Aaska Patel
...which is a bit strange, because the Replace by Classsample contains the following code:
...这有点奇怪，因为Replace by Class示例包含以下代码：
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
And it works perfectly fine.
它工作得很好。
回答by Anastasios Barous
The best way to instantiate multiple ckeditor4 instances is using the ckeditor-jquery adapter.
实例化多个 ckeditor4 实例的最佳方法是使用 ckeditor-jquery 适配器。
Then only
那么只有
$( 'textarea.ckeditor' ).ckeditor();
is enough to have multiple ckeditor instances.
足以拥有多个 ckeditor 实例。
