Jos*_*los 2 javascript wysiwyg class ckeditor
我正在使用ckeditor,这真的很棒.我遇到的唯一问题是我在对齐对象时尝试使用类而不是样式.更具体地说,我想使用类alignleft来对齐左图像而不是使用style ="float:left".为此,我修改了插件ckeditor/plugins/image/dialogs/image.js
在id:'cmbAlign'中,我更改了setup和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),它的工作完美.
有没有人有任何想法或解决方案？
这里有一些信息:
该代码的解压缩版本位于:
ckeditor/_source/plugins/image/dialogs/image.js(第994行)
您可以看到所涉及的实际对象,变量和函数,而不是猜测所有这些字母代表什么.
我发布的关于监听对话事件的信息是基于查看代码并查看它的作用.
您需要停止对话框添加内联浮动样式,否则它将覆盖您应用于类的样式.float没有作为类添加,因此使用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文件,否则不会加载这些文件.
一种可能的方法:
您可以制作一个替换图像插件的自定义插件.这里有一个教程部分,其中包含有关创建插件的简单说明:
您可以使用它作为插件如何工作的概述,但您实际上只是对默认图像插件进行了一些更改.
只需从ckeditor/_source/plugins目录复制image plugin文件夹,并将其放在ckeditor/plugins目录中.您需要重命名插件并禁用默认图像插件.然后,您可以将帖子中列出的更改发送到image.js文件.
要禁用默认图像插件,请将其添加到配置设置中:
config.removePlugins = 'image';
另一种可行方法:
向页面添加事件侦听器,您可以设置脚本来执行以下操作:
观察"dialogShow"事件并检查打开的对话框是否为图像对话框.
如果是,请侦听对齐选择器的更改事件.
更改对齐选择器时,检查是否选择了"对齐左".
如果是这样,请停止传播命令并在"高级"选项卡的"样式表类"字段中插入类名.
您可以将事件侦听器的优先级设置为选择器更改为"1",因此它在默认代码运行之前运行."on"方法的文档显示了可用的参数:
您可以查看以下帖子中的示例代码以及有关设置它的更多信息(使用jQuery):
在该帖子中,答案的第二部分(靠近顶部)以下列内容开头:
开始引用
如果您想要从另一个位置侦听对select元素的更改,可以创建一个在"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...
}
);
});
如果您对我写的内容有任何疑问,请与我们联系.
好吧,乔