在ckeditor中为选定的图像添加类 [英] Add class to selected image in ckeditor

问题描述

我在ckeditor中为选定的图片添加类时遇到问题。我想出了这个 http://pokit.org/get/img/8d89802e1d6f6371f5bc326898d8b414.jpg 。

I'm having trouble adding classes to selected image in ckeditor. What I came up with is this http://pokit.org/get/img/8d89802e1d6f6371f5bc326898d8b414.jpg.

我添加了两个按钮用于选择图片是纵向还是横向模式。

I added 2 buttons for selecting whether whether a picture is in portrait or landscape mode. You can select either of them or none, and add costum height/width.

这是我的代码：

CKEDITOR.replace('maindesc', {
    "extraPlugins": "imgbrowse",
    "filebrowserImageBrowseUrl": "/ckeditor/plugins/imgbrowse",
     on: {
        instanceReady: function() {
            this.dataProcessor.htmlFilter.addRules( {
                elements: {
                    img: function( el ) {
                        // Add an attribute.
                        if ( !el.attributes.alt ) {
                            el.attributes.alt = 'Img';
                            el.addClass('ckeditorImg');
                            if (Landscape == 1) {
                                el.addClass('ckLandscape');
                                el.attributes['style'] = '';
                            }
                            else if (Portrait == 1) {
                                el.addClass('ckPortrait');
                                el.attributes['style'] = '';
                            }

                        }

                    }
                }
            } );            
        }
    }
});

因此，据我所知，这一切都通过了所有，所以我写道，如果图像没有alt属性添加一个并添加我想要的类。不幸的是，这种方法不允许我改变所选择的图像上的类，当用户想要改变它，而是他必须删除图像，再次选择它，然后选择类。

So as far as I understand this goes through all, so I wrote that if the image has no alt attribute to add one and add the classes I want. Unfortunately this approach doesn't allow me to change the class on selected image when a user wants to change it, but instead he has to delete the image, select it again and then choose class.

我的问题是是否有一种方法到达当前选择的图像，而不是通过ckeditor中的所有< img> 标签，并更改其类。 / p>

My question is whether there is a way to get to currently selected image instead of going through all <img> tags in ckeditor and change its class.

推荐答案

这里是如何添加一个新按钮到ckeditor的示例，启用/禁用基于您当前选择的元素并向该特定元素添加类（在此示例中，它用于图片，但您可以以任何方式使用它）。

Here is an example for how to add a new button to ckeditor that is enabled/disables based on the element that you currently select and add a class to that specific element (in this example it's for images, however you can use it in any way you want).

// Set the callback function 
var setLandscapeClass = {
    exec: function(editor) {
        editor.getSelection().getStartElement().addClass('ckLandscape')
    }
}

//Create the plugin
CKEDITOR.plugins.add('setLandscapeClass', {
    init: function(editor) {
        editor.addCommand('setLandscapeClass', setLandscapeClass);
        editor.ui.addButton("setLandscapeClass", {
            label: 'Set Landscape Class', 
            icon: '',
            command: 'setLandscapeClass'
        });
    }
}); 

// Create the instance and add the plugin
CKEDITOR.replace( 'editor1', {
    extraPlugins: 'setLandscapeClass',
    allowedContent: true
});

// enable/disable the button based on the selection of the text in the editor
CKEDITOR.instances.editor1.on( 'selectionChange', function( evt ) {
    var landscapeButton = this.getCommand( 'setLandscapeClass' );
    if ( evt.data.path.lastElement.is( 'img' ) ) { 
        landscapeButton.enable();
    } else {
        landscapeButton.disable();
    }
});

您可以在这里看到一个有效的演示：

https://jsfiddle.net/7nm9q1qv/

You can see a working demo here:
https://jsfiddle.net/7nm9q1qv/

我只创建了1个按钮，并没有图标。

I only created 1 button, and there is no icon there. I think you can use that code to create also the second button (for portrait class).

为了添加一个新项目到上下文菜单，你应该添加这个代码：

In order to add a new item to the context-menu you should add this code:

// Add the context-menu
if (editor.addMenuItem) {
      editor.addMenuGroup('testgroup');
      editor.addMenuItem('setLandscapeItem', {
            label: 'Set landscape class',
            command: 'setLandscapeClass',
            group: 'testgroup'
      });
}

// On contextmenu - set the item as "visible" by the menu
if (editor.contextMenu) {
    editor.contextMenu.addListener(function(element, selection) {
        if (element.hasClass('ckLandscape') === false) {
            return { setLandscapeItem: CKEDITOR.TRISTATE_ON };
        }
    });
}

init

您可以看到我添加了以下行：

You can see that I added this line:

if (element.hasClass('ckLandscape') === false) {

（您可以删除）只是为了给你一个例子，如果 ckLandscape 类不存在，如何在菜单只显示

(Which you can remove) only to give you an example of how to show the item in the menu only if the ckLandscape class doesn't exists for this image.

jsfiddle的更新版本在这里：

https://jsfiddle.net/7nm9q1qv/1/

The updated version of the jsfiddle is here:
https://jsfiddle.net/7nm9q1qv/1/

这篇关于在ckeditor中为选定的图像添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！