Ckeditor 插件 - 对 textarea 中的特定元素执行 javascript 函数？

Question

我正在为 Ckeditor 4.5 创建一个插件，我正在使用 classic iframe 安装，下面是工作代码，它将一个按钮添加到工具栏，按下时创建一个 div.cke-column 元素并将其插入到文本区域中，包装任何选定的内容。我无法弄清楚的是，在插入这些 div 之后，我想在每个 div 上调用一个简单的 js 函数，并带有特定的 class （js 使我能够拥有一个根据 texarea 中 divs 的数量变化很大的动态属性）。具体来说，在下面的代码示例中，我想在每个 div.cke 列插入到 ckeditor 的文本区域后执行一个 javascript 函数。

(function($) {
 CKEDITOR.plugins.add( 'simple_columns_plugin', {
  init: function( editor )
  {
   var pluginDirectory = this.path;

  CKEDITOR.scriptLoader.load( pluginDirectory + '/lib/customscript.js', function() {

  } );

   editor.addContentsCss( pluginDirectory + '/styles/basic.css' );
   editor.addCommand( 'insert_column_wrapper_command', {
    exec : function( editor ) {
    var columnwrapper = editor.document.createElement( 'div' );
    columnwrapper.setAttribute('class', 'cke-column');
    var innercontent = editor.getSelectedHtml(toString);
    columnwrapper.setHtml(innercontent);
    editor.insertElement(columnwrapper);
    }

   });

   editor.ui.addButton( 'simple_columns_plugin_button', {
    label: 'Insert column', //this is the tooltip text for the button
    command: 'insert_column_wrapper_command',
    icon: this.path + 'images/cw2.gif'
   });
  }
 });
})(jQuery);

我还应该补充一点，我不希望运行一个 javascript 函数并插入静态 HTMl，这个 javascript 函数会在 window 已调整大小，因此它需要首先调用一个函数并可用于 onresize 事件。

Answer 1

可以使用适当的 api 函数直接访问每个元素甚至整个文档。下面是一个向元素添加 class 的示例，以及一个使用 jQuery 直接影响文档的示例。以下是展示答案的一些片段

var elem = editor.document.findOne('.someclass'); // Get element
elem.addClass('anotherclass'); // add class to element
jQuery( editor.editable().$ ).css( 'color', 'red' ); // directly effect editable content in jQuery.
 var fullcontent = editor.getData(); // Get all content in editable textarea

Ckeditor 插件 - 对 textarea 中的特定元素执行 javascript 函数？

Ckeditor Plugin - Execute javascript function on specific elements in textarea?

javascript

plugins

ckeditor

wysiwyg

ckeditor4.x