CKEditor

Question

我正在尝试获取带有他的 ID 或 Class 的元素，但没有成功...

Cannot read property 'getById' of undefined

这是我的代码：

$(document).ready(function () {
    ckeditor_init();
});

var $textarea = $('#tiny_mce_block').find('textarea').attr('id');
function ckeditor_init() { // This works
    CKEDITOR.replace($textarea, {
        language: 'fr',
        allowedContent: true,
    });

    var editor = CKEDITOR.instances[$textarea]; // This works
    var $dataCkeditor = editor.getData(); // This works

    var el = $(editor.document.getById('2')); // This doesn't work !

    console.log(el);
}

FIDDLE : http://jsfiddle.net/B4yGJ/395/

在我的 $dataCkeditor = editor.getData(); 我有这个：

<span class="st" id="1" data-time-start="0.29" data-time-end="1.259" data-time-moy="0.1938">mardi </span>
<span class="st" id="2" data-time-start="2.048" data-time-end="5.406" data-time-moy="0.10832258064516">qualité sécurité efficacité </span>

如何通过 ID（在我的例子中 "2"）或 Class（在我的例子中 "st"）和在得到 "data-time-start" ?

之后

谢谢！

Answer 1

您需要运行设置 $textarea 值的行在 DOM 就绪处理程序中，否则该值将是 null 因为在执行代码时元素在 DOM 中不可用。试试这个：

var textarea; 
$(document).ready(function () {
    ckeditor_init();
    textarea = $('#tiny_mce_block').find('textarea').attr('id');
});

function ckeditor_init() {
    CKEDITOR.replace(textarea, {
        language: 'fr',
        allowedContent: true,
    });

    var editor = CKEDITOR.instances[textarea];
    var $dataCkeditor = editor.getData();
    var el = $(editor.document.getById('2'));
    console.log(el);
}

另请注意，$ 前缀主要用于 javascript 以表示持有 jQuery 对象的变量。由于 textarea 变量只包含一个字符串，为了保持一致性，我删除了 $。

Answer 2

使用instanceReady事件（见我的previous answer）：

http://jsfiddle.net/oleq/LjggqL1m/

function ckeditor_init() { // This works
    CKEDITOR.replace(textarea, {
        language: 'fr',
        allowedContent: true,
        on: {
            instanceReady: function() {
                var editor = this;
                var data = editor.getData();
                var el = $(editor.document.getById('2'));

               alert(el);
            }
        }
    });
}

您还可以对 editor#contentDom 事件感兴趣，该事件会在每次加载编辑器的 DOM 时触发，即 editor.setData().

Answer 3

    var textarea;
$(function () {
  textarea = $('#tiny_mce_block').find('textarea');
  ckeditor_init();
});
function ckeditor_init() {
 for(var i = 0; i < textarea.length; i++){
    CKEDITOR.replace(textarea[i]);
    var editor = CKEDITOR.instances[textarea[i]];
 }
}

Answer 4

在这里，我有 assigned/stored CKEditor 作为全局变量。

在 HTML 文件中：

<div id="maineditor"></div>

JS 文件。

这里getById || find() || findOne使用了方法
自定义配置也已加载
JQuery 查找元素的方法

已触发启动焦点

var GlobalEditor =null; 
  $(document).ready(function () {
   editor_initialize_events();

   //Here Find Element id/Class and It's return CKEditor DOM Element || 
    var _byId= CKEDITOR.document.find('#I1');
    var _byClass= CKEDITOR.document.findOne('.myClass');  
   // You can find element by Global varibale
    var _byId= GlobalEditor.document.find('#I1');
   // JQuery
   var el = $(GlobalEditor.document.getById('2').$);
 });    
 function editor_initialize_events() {    
    GlobalEditor = CKEDITOR.replace('maineditor', {
       customConfig: DOMAIN_ROOT + "ckeditor/config6.js",
       startupFocus: true
     });
}

CKEditor - 通过 Id 或 Class 获取元素

CKEditor - Get Element by Id or Class

jquery