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)
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 class="myClassName"></textarea>
Run Code Online (Sandbox Code Playgroud)
在 JS 代码中
CKEDITOR.replaceAll( 'myClassName' );
Run Code Online (Sandbox Code Playgroud)
我个人使用这样的函数:
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,但看不到使用类的问题
| 归档时间: |
|
| 查看次数: |
21583 次 |
| 最近记录: |