使用 ckeditor 类进行对齐

Question

我正在使用 ckeditor，它真的很棒。我遇到的唯一问题是我在对齐对象时尝试使用类而不是样式。更具体地说，我想使用类 alignleft 来对齐左侧图像，而不是使用 style="float:left"。为此，我修改了插件 ckeditor/plugins/image/dialogs/image.js

在 id:'cmbAlign' 中，我更改了设置和commid方法，以便它应该添加类“alignleft”或“alignright”取决于情况，但奇怪的是，当我尝试更改类时它不起作用（使用 removeClass 或 addClass，setAttribute('class') 也不起作用）。代码是：

id:'cmbAlign',
    type:'select',
    widths:['35%','65%'],
    style:'width:90px',
    label:b.lang.common.align,
    'default':'',
    items:[[b.lang.common.notSet,'none'],[b.lang.common.alignLeft,'left'],[b.lang.common.alignRight,'right']],
    onChange:function(){
        l(this.getDialog());
        o.call(this,'advanced:txtdlgGenStyle');
    },
    setup:function(C,D){
        if(C==d){
            var E=(D.getAttribute('class')+'').match(/align([a-z]+)?/);
            if(E&&E[1])E = E[1];else E='';
            this.setValue(E);
        }
    },
    commit:function(C,D,E){        
        var F = (this.getValue()+'');
        if(C==d||C==f){
            var G=(D.getAttribute('class')+'').match(/align([a-z]+)?/);
            if(G&&G[1]){
                if(F!=G[1]){
                    D.removeClass('align'+G[1]);
                    if(F!=='')D.setAttribute('rel',F); D.addClass('align'+F);
                }
            } else {
                if(F!=='')D.setAttribute('rel',F); D.addClass('align'+F);
            }

        }
}

请注意，我已经添加了D.setAttribute('rel',F)并且它工作完美。

有人对此有任何想法或解决方案吗？

Answer 1

这里有更多信息：

该代码的解压版本位于：

ckeditor/_source/plugins/image/dialogs/image.js （第 994 行）

而不是猜测所有这些字母代表什么，您可以看到实际的对象，涉及到的变量和函数。

我发布的有关侦听对话框事件的信息是基于查看该代码并了解其功能。

您需要阻止对话框添加内联浮动样式，否则它将覆盖您应用于类的样式。浮动不会作为类添加，因此使用 addClass 或 removeClass 不会对其产生任何影响。这意味着您需要以不同的方式解决问题。

以下是我想到的几种可能性，我希望其他人可以建议其他方法：

1）您可以修改图像插件中的代码（但如果编辑器更新，它可能会被覆盖）。

2) 复制图像插件并修改代码以制作自定义插件，然后将图像按钮替换为调用您的插件的按钮。

3) 通过侦听对话框事件从对话框代码外部工作，然后停止添加内联浮动样式并添加您的类。

希望这有帮助，
乔

---

您使用什么版本的 CKEditor？我用的是3.6.1。

我在 ckeditor/plugins/image/dialogs/image.js 文件中搜索了“cmbAlign”。我在第 11 行修改了这一点：

id:'cmbAlign',type:'select',widths:['35%','65%'],style:'width:90px'.....

我将“width:90px”更改为“width:290px”，对话框变得更宽。因此对该文件的更改会对我的安装产生影响。

您是否可能正在使用 _source 目录中找到的解压文件？：
ckeditor/_source/plugins/image/dialogs/image.js

只是提到它，因为除非您加载 ckeditor_basic 文件之一而不是 ckeditor.js 文件，否则不会加载这些文件。

---

一种可能的方法：

您可以制作一个自定义插件来替换图像插件。这里有一个教程部分，其中包含创建插件的简单说明：

http://docs。 cksource.com/CKEditor_3.x/Tutorials

您可以使用它作为插件工作方式的概述，但您实际上只需对默认图像插件进行一些更改。

只需复制图像插件文件夹从 ckeditor/_source/plugins 目录中将其放入 ckeditor/plugins 目录中。您需要重命名该插件并禁用默认图像插件。然后，您可以对 image.js 文件进行帖子中概述的更改。

要禁用默认图像插件，请将其添加到您的配置设置中：

config.removePlugins = 'image';

---

另一种可能的方法：

向页面添加事件侦听器，您可以设置脚本来执行以下操作：

监视“dialogShow”事件并检查打开的对话框是否是图像对话框。
如果是，监听对齐选择器的change事件。
当对齐选择器更改时，检查是否选择了“左对齐”。
如果是这样，请停止该命令的传播，并将您的类名插入“高级”选项卡的“样式表类”字段中。

您可以将选择器更改的事件侦听器的优先级设置为“1”，以便它先于运行默认代码。 “on”方法的文档显示了可用的参数：

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html#on

您可以查看以下帖子以获取示例代码以及有关设置此功能的更多信息（jQuery使用）：

ckeditor 将事件处理程序添加到对话框元素

在那篇文章中，答案的第二部分（靠近顶部）开头为：

开始引用
如果您想监听另一个位置对选择元素的更改，您可以创建一个监听“dialogShow”事件的监听器。这是一个示例：

// Watch for the "dialogShow" event to be fired in the editor,

结束引用

此外，您还需要将“dialogShow”事件的侦听器包装在“instanceReady”事件的侦听器中，以下是一些示例代码（使用了 jQuery）：

// After both the document and editor instance are ready, 
// Start listening for the image dialog

// Wait for the document ready event
$(document).ready(function(){

  // Wait for the instanceReady event to fire for this (editor1) instance
  CKEDITOR.instances.editor1.on( 'instanceReady', 
    function( instanceReadyEventObj )
    {
      var currentEditorInstance = instanceReadyEventObj.editor;

      ...Put Code To Listen For The "dialogShow" Event Here...
    }
  );
});

如果您有任何问题，请告诉我关于我所写的内容。

祝你好运，
乔

Answer 2

如果您更改了核心文件，请在升级 CKEditor 时小心。
最简单（但对于编辑器来说不是最方便）的解决方案是：