按类调用CKEditor [英] Call CKEditor by class
本文介绍了按类调用CKEditor的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要自动调用多个CKEditor实例...实际上我使用的函数是：
I need to call multiple instances of CKEditor automatically...actually I use the function:
CKEDITOR.replace( 'editor1');
其中editor1是我想要显示我的CKEditor的div的id名称。
Where "editor1" is the id name of the div where I want show my CKEditor.
我正在使用jQuery来自动化这个过程，我需要使用class标签而不是id。
I'm using jQuery to automate this process and I need to use the "class" tag instead the id.
特别是我有这个html：
In particular i have this 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脚本：
and this jQuery script:
$(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的来源？
Is it possible without modify the source of CKEDITOR?
编辑
我找到了解决方案：
1）html变为：
<div class="editor" id="edt1"></div>
2）在JQuery中：
2) In the JQuery:
var __editorName = __main.children('.editor').attr('id');
我打电话给CKEditor：
and i call CKEditor with:
editor = CKEDITOR.replace(__editorName);
=）=）
推荐答案
<!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>
这篇关于按类调用CKEditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
