使用类来对齐ckeditor [英] Use of classes for alignment ckeditor
问题描述
我使用ckeditor，它真的很棒。我唯一的一个问题是，我试图使用类而不是样式时对齐对象。更具体地说，我想使用类 alignleft 对齐左侧图片，而不是使用 style =float：left。为此，我修改了插件 ckeditor / plugins / image / dialogs / image.js
在id：'cmbAlign'和commid方法，以便它应该添加类alignleft或alignright根据情况，但strangelly它不工作，当我尝试更改类（使用 removeClass或addClass，setAttribute（'class'）也不工作）。代码是：
id：'cmbAlign'，
type：'select'，
['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（[az] +）？）;
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（[az] +）？ /）;
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将不会影响它。这意味着你需要以不同的方式处理问题。
这里有一些可能性，我想，其他人可以建议其他方法： / p>
1）您可以修改图片插件中的代码（但如果编辑器已更新，则可能会被覆盖）。
2）制作图片插件的副本并修改代码以创建自定义插件，然后将图片按钮替换为调用插件的图片按钮。
3 ）通过侦听对话框事件从对话框代码之外工作，然后停止添加内联浮动样式并添加类。
希望这有助于，
Joe
您使用什么版本的CKEditor？我使用的是3.6.1。
我在ckeditor / plugins / image / dialogs / image.js文件中搜索了cmbAlign我在第11行修改了这一位：
id：'cmbAlign'，type：'select' '，'65％']，style：'width：90px'.....
将width：90px更改为width：290px，对话框变得更宽。因此，对该文件的更改会对我的安装产生影响。
是否可能使用_source目录中找到的解压缩文件：
ckeditor / _source / plugins / image / dialogs / image.js
只是提到它，因为这些文件没有加载，除非你加载ckeditor_basic
您可以创建一个替换图像插件的自定义插件。有一个教程部分，其中提供了在此处创建插件的简单说明：
http://docs.cksource.com/CKEditor_3.x/教程
您可以使用它作为插件工作原理的概述，但是你真的只是对默认的图像插件做了一些更改。
只需从ckeditor / _source / plugins目录中复制图像插件文件夹并将其放在ckeditor / plugins目录中。您需要重命名插件并禁用默认的图像插件。
要禁用默认图片插件，请将其添加到您的配置设置中：
config.removePlugins ='image';
另一种可能的方法：
向页面添加事件监听器，您可以设置脚本来执行以下操作：
注意dialogShow事件，并检查打开的对话框是否为图像对话框。
如果是，请监听对齐选择器的更改事件。
对齐选择器已更改，请检查是否选择了左对齐。
如果是这样，请停止传播命令，并在高级选项卡的样式表类字段中插入类名。 />
您可以将选择器更改的事件侦听器的优先级设置为1，因此它在运行默认代码之前。 on方法的文档显示可用参数：
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html#on
您可以查看以下文章中的示例代码和有关设置（jQuery使用）的更多信息：
ckeditor添加事件处理对话元素
在那篇文章中，答案的第二部分（靠近顶部）以
开始报价
如果您想监听从另一个位置对select元素的更改，可以创建一个监听器， dialogShow事件。下面是一个例子：
//注意在编辑器中触发dialogShow事件，
结束报价
>
另外，你需要在instanceReady事件的监听器中封装dialogShow事件的侦听器，下面是一些示例代码（使用jQuery）：
//文档和编辑器实例都准备好后，
//开始侦听图像对话框
//等待文档就绪事件
$（document）.ready（function（）{
//等待instanceReady事件为此（editor1）实例触发
CKEDITOR.instances.editor1.on（'instanceReady'，
function（instanceReadyEventObj）
{
var currentEditorInstance = instanceReadyEventObj.editor;
。输出代码监听dialogShow事件在这里...
}
）;
}）;
如果您对我写的内容有任何疑问，请告诉我。
好吧，
Joe
I am using ckeditor and it is really great. The only one problem I have is that I am trying to use classes instead of style when aligning objects. More specifically, I want to use a class alignleft for align left images instead of using style="float:left". For this purpose I modified the plugin ckeditor/plugins/image/dialogs/image.js
In id:'cmbAlign' I changed the setup and the commid method so that it should add the class "alignleft" or "alignright" depending the situation but strangelly It does not work when I try to change the class (using removeClass or addClass, setAttribute('class') does not work too). The code is:
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);
}
}
}
Please note that I have added D.setAttribute('rel',F) and it works perfect.
Does anybody have any idea or solution for it??
解决方案 Here is a little more info:
The unpacked version of that code is in:
ckeditor/_source/plugins/image/dialogs/image.js ( line 994 )
Instead of guessing what all those letters stand for, you can see the actual objects, variables and functions that are involved.
The information I posted about listening for the dialog events was based on looking at that code and seeing what it does.
You need to stop the dialog from adding the inline float style or it will override the style that you apply to your class. The float isn't being added as a class, so using addClass or removeClass will have no effect on it. That means you need to approach the problem in a different way.
Here are a few possibilities that came to my mind, I expect that other people can suggest additional approaches:
1) You can modify the code in the image plugin ( but it could be overwritten if the editor is updated ).
2) Make a copy of the image plugin and modify the code to make a custom plugin, then replace the image button with one that calls your plugin.
3) Work from outside the dialog code by listening for the dialog event, then stop the inline float style from being added and add your class instead.
Hope this helps,
Joe
What version of CKEditor are you using? I'm using 3.6.1.
I searched for "cmbAlign" in the ckeditor/plugins/image/dialogs/image.js file. I modified this bit on line 11:
id:'cmbAlign',type:'select',widths:['35%','65%'],style:'width:90px'.....
I changed "width:90px" to "width:290px" and the dialog box got a lot wider. So a change to that file has an effect in my install.
Is it possible that you are working with the unpacked file found in the _source directory?:
ckeditor/_source/plugins/image/dialogs/image.js
Just mentioning it because those files aren't loaded unless you are loading one of the ckeditor_basic files instead of the ckeditor.js file.
A Possible Approach:
You could make a custom plugin that replaces the image plugin. There's a tutorial section with easy instructions for creating a plugin here:
http://docs.cksource.com/CKEditor_3.x/Tutorials
You can use that as an overview of how plugins work, but you'll really just be making a few changes to the default image plugin.
Just copy the image plugin folder from the ckeditor/_source/plugins directory and put it in the ckeditor/plugins directory. You'll need to rename the plugin and disable the default image plugin. Then you can make the changes that you outlined in your post to the image.js file.
To disable the default image plugin add this to your config settings:
config.removePlugins = 'image';
Another Possible Approach:
Add an event listener to the page, you can set up a script to do the following:
Watch for the "dialogShow" event and check if the dialog that opened is the image dialog.
If it is, listen for the change event of the Alignment selector.
When the Alignment selector is changed, check if "align left" was selected.
If so, stop the command from propagating and insert your class name in the "Stylesheet Classes" field of the Advanced tab.
You can set the priority of your event listener for the selector change to "1", so it goes before the default code is run. The docs for the "on" method show the available parameters:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html#on
You can look at the following post for sample code and further info about setting this up (jQuery is used):
ckeditor add event handler to dialog element
In that post, the second section of the answer (near the top) begins with:
Start Quote
If you would like to listen for a change to a select element from another location, you can create a listener that keys on the "dialogShow" event. Here's an example:
// Watch for the "dialogShow" event to be fired in the editor,
End Quote
Additionally, you'll want to wrap the listener for the "dialogShow" event inside a listener for the "instanceReady" event, here is some sample code for that (jQuery is used):
// 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...
}
);
});
Let me know if you have any questions about what I've written.
Be Well,
Joe
这篇关于使用类来对齐ckeditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
