CKEDITOR - Select 按其 ID 或 CLASS 跨越并获取其数据属性值
CKEDITOR - Select span by its ID or CLASS and get its data attribute value
如何使用 jQuery 管理 CKEditor 中的内容?
我有这个HTML:
<div id="ckeditor_block">
<textarea id="editor1">
<span class="sub" id="sub1" data-time-start="0">Hello </span>
<span class="sub" id="sub2" data-time-start="2">My </span>
<span class="sub" id="sub3" data-time-start="6">Name </span>
<span class="sub" id="sub4" data-time-start="8">Is </span>
<span class="sub" id="sub5" data-time-start="12">Zoob</span>
</textarea>
</div>
我的 JS:
var textarea;
$(document).ready(function () {
textarea = $('#ckeditor_block').find('textarea').attr('id');
ckeditor_init();
});
function ckeditor_init() {
CKEDITOR.replace(textarea, {
language: 'fr',
allowedContent: true
});
}
到目前为止,这很好用。
现在我怎样才能简单地在 CKeditor iframe 或其他什么中,select 例如 span
和 ID
= sub3
然后获取它的内容(此处:Name
)及其属性 data-time-start
(此处:6
)?
此外,在循环中,我如何 select 每个元素都带有 class sub
>
类似这样的东西,但是使用 CKEDITOR 的方法:
$.each($(CKEditor.getBody()).find(".sub"), function () { // How select SUB class name in CKEDITOR ??
var d = $(this).attr("data-time-start"); // HOW SELECT FOR EACH 'SUB' HIS data-time-sart attribute in CKEDITOR ??
$(".st").removeClass("active"); // HOW REMOVE CLASS FOR ALL class 'SUB' in CKEDITOR ??
$(this).addClass("active"); // HOW ADD CLASS 'active' TO THIS 'SUB' in CKEDITOR ??
});
我试图获取那样的内容,但是之后。我该怎么做呢?
var editor = CKEDITOR.instances[textarea];
var $dataCkeditor = editor.getData();
我在我的桌面上克隆了你的项目,它对我有用!但是在 Fiddle 中它不起作用!当心!我不知道为什么,但在 fiddle 中它就是不起作用,试试看:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ckeditor.com/apps/ckeditor/4.0/ckeditor.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="ckeditor_block">
<textarea id="editor1"> <span class="sub" id="sub1" data-time-start="0">Hello </span>
<span class="sub" id="sub2" data-time-start="2">My </span>
<span class="sub" id="sub3" data-time-start="6">Name </span>
<span class="sub" id="sub4" data-time-start="8">Is </span>
<span class="sub" id="sub5" data-time-start="12">Zoob</span>
</textarea>
</div>
<script type='text/javascript'>
var textarea;
$(document).ready(function () {
textarea = $('#ckeditor_block').find('textarea').attr('id');
CKEDITOR.replace(textarea, {
language: 'fr',
uiColor: '#9AB8F3',
allowedContent: true,
disallowedContent: 'script; *[on*]',
enterMode: CKEDITOR.ENTER_BR,
toolbar: [
['Bold', 'Italic', 'Underline', '-', 'TextColor', '-', 'RemoveFormat'],
['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight'],
['Find', 'Replace', 'SelectAll'],
['Source', '-', 'Maximize', '-', 'Save']
]
});
function waitInit(){
var subs = $( CKEDITOR.instances.editor1.window.getFrame().$ ).contents().find('.sub' );
$.each(subs, function(){
$this = $(this);
console.log("value = " + $this.text());
console.log("time = " + $this.attr('data-time-start'));
});
}
CKEDITOR.on('instanceReady', function(){ waitInit(); });
});
</script>
</body></html>
有两个麻烦 - 首先是 fiddle,其次 - 我们在 ckeditor 初始化之前调用函数,我找不到 init 的回调,所以输入超时有点延迟,为此,我测试了它 -一切正常!
或者您只是做了以下事情,
var ele = $(editor.editable().$);
$('span',ele).each(function(){
console.log($(this).text());
console.log($(this).attr('id'));
});
//editor represent your instance in CKEditor
-谢谢。
如何使用 jQuery 管理 CKEditor 中的内容?
我有这个HTML:
<div id="ckeditor_block">
<textarea id="editor1">
<span class="sub" id="sub1" data-time-start="0">Hello </span>
<span class="sub" id="sub2" data-time-start="2">My </span>
<span class="sub" id="sub3" data-time-start="6">Name </span>
<span class="sub" id="sub4" data-time-start="8">Is </span>
<span class="sub" id="sub5" data-time-start="12">Zoob</span>
</textarea>
</div>
我的 JS:
var textarea;
$(document).ready(function () {
textarea = $('#ckeditor_block').find('textarea').attr('id');
ckeditor_init();
});
function ckeditor_init() {
CKEDITOR.replace(textarea, {
language: 'fr',
allowedContent: true
});
}
到目前为止,这很好用。
现在我怎样才能简单地在 CKeditor iframe 或其他什么中,select 例如 span
和 ID
= sub3
然后获取它的内容(此处:Name
)及其属性 data-time-start
(此处:6
)?
此外,在循环中,我如何 select 每个元素都带有 class sub
>
类似这样的东西,但是使用 CKEDITOR 的方法:
$.each($(CKEditor.getBody()).find(".sub"), function () { // How select SUB class name in CKEDITOR ??
var d = $(this).attr("data-time-start"); // HOW SELECT FOR EACH 'SUB' HIS data-time-sart attribute in CKEDITOR ??
$(".st").removeClass("active"); // HOW REMOVE CLASS FOR ALL class 'SUB' in CKEDITOR ??
$(this).addClass("active"); // HOW ADD CLASS 'active' TO THIS 'SUB' in CKEDITOR ??
});
我试图获取那样的内容,但是之后。我该怎么做呢?
var editor = CKEDITOR.instances[textarea];
var $dataCkeditor = editor.getData();
我在我的桌面上克隆了你的项目,它对我有用!但是在 Fiddle 中它不起作用!当心!我不知道为什么,但在 fiddle 中它就是不起作用,试试看:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ckeditor.com/apps/ckeditor/4.0/ckeditor.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="ckeditor_block">
<textarea id="editor1"> <span class="sub" id="sub1" data-time-start="0">Hello </span>
<span class="sub" id="sub2" data-time-start="2">My </span>
<span class="sub" id="sub3" data-time-start="6">Name </span>
<span class="sub" id="sub4" data-time-start="8">Is </span>
<span class="sub" id="sub5" data-time-start="12">Zoob</span>
</textarea>
</div>
<script type='text/javascript'>
var textarea;
$(document).ready(function () {
textarea = $('#ckeditor_block').find('textarea').attr('id');
CKEDITOR.replace(textarea, {
language: 'fr',
uiColor: '#9AB8F3',
allowedContent: true,
disallowedContent: 'script; *[on*]',
enterMode: CKEDITOR.ENTER_BR,
toolbar: [
['Bold', 'Italic', 'Underline', '-', 'TextColor', '-', 'RemoveFormat'],
['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight'],
['Find', 'Replace', 'SelectAll'],
['Source', '-', 'Maximize', '-', 'Save']
]
});
function waitInit(){
var subs = $( CKEDITOR.instances.editor1.window.getFrame().$ ).contents().find('.sub' );
$.each(subs, function(){
$this = $(this);
console.log("value = " + $this.text());
console.log("time = " + $this.attr('data-time-start'));
});
}
CKEDITOR.on('instanceReady', function(){ waitInit(); });
});
</script>
</body></html>
有两个麻烦 - 首先是 fiddle,其次 - 我们在 ckeditor 初始化之前调用函数,我找不到 init 的回调,所以输入超时有点延迟,为此,我测试了它 -一切正常!
或者您只是做了以下事情,
var ele = $(editor.editable().$);
$('span',ele).each(function(){
console.log($(this).text());
console.log($(this).attr('id'));
});
//editor represent your instance in CKEditor
-谢谢。