CKEditor: Customized HTML on inserting an image

问题:

I'm using CKEditor 3.5 to provide WYSYWYG editing in a website. When inserting an image you can provide width and height of the image, which results in HTML like follows:

<img alt="" src="/Images/Sample.png" style="width: 62px; height: 30px; " />

Since this does the resizing in the browser and in other places on the same website I use Nathanael Jones' Image Resizing Module, I'd like to get the following output instead:

<img alt="" src="Images/Sample.png?width=62&height=30" />

Is there an easy way to control the generated HTML or have I really to write my own dialog/plugin for CKEditor?

EDIT:

Adding the following lines to config.js was the solution that eventually worked for me:

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    var dialog = dialogDefinition.dialog;
    var editor = ev.editor;

    if (dialogName == 'image') {
        dialogDefinition.onOk = function (e) {
            var imageSrcUrl = e.sender.originalElement.$.src;
            var width = e.sender.originalElement.$.width;
            var height = e.sender.originalElement.$.height;
            var imgHtml = CKEDITOR.dom.element.createFromHtml('<img src=' + imageSrcUrl + '?width=' + width + '&height=' + height + ' alt="" />');
            editor.insertElement(imgHtml);
        };
    }
});

The next problem is then, when editing an image, the width and height naturally are in the URL field and are missing in the dedicated fields for width and height. So I need to come up with a solution for the reverse... :-)

回答1:

I kind of had the same problem, I needed to remove those attributes from the generated HTML for the image, so what I did was to override the onOK method of the uploader and insert the image element manually using the CKEditor's API, something like this:

   CKEDITOR.on('dialogDefinition', function(ev) {
        // Take the dialog name and its definition from the event data
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
        var editor = ev.editor;
        if (dialogName == 'image') {
           dialogDefinition.onOk = function(e) {
              var imageSrcUrl = e.sender.originalElement.$.src;
              var imgHtml = CKEDITOR.dom.element.createFromHtml("<img src=" + imageSrcUrl + " alt='' align='right'/>");
              editor.insertElement(imgHtml);
           };
        }
  }

This has worked for us so far.

回答2:

Look at the "output html" sample, you can find there some code that changes the dimensions in images from styles to attributes, so you can adjust it to rewrite the URL.

回答3:

I don't have enough points to comment on that previous answer. but in respect to your error: CKEDITOR.currentInstance returns undefined.

That is strange because CKEDITOR is global, but you shouldn't have to resort to that.

Within the OK function invocation, you have access to "editor", you shouldn't have to get the instance.

just a suggestion.

回答4:

Best bet might be to "recreate" the src (and possibly the style) field's behavior. I've do something similar. (but not as complex)

Start with the original code (from plugins/dialog/image.js) and create setup and commit logic that produces (and parses) the markup you're looking for.

Then during dialog definition

1. Delete Originals
2. Add your "custom" fields

style field not sure, maybe just leave it in the dialog, but stub out it's commit logic.

I added my field to the dialog...

var infoTab = dialogDefinition.getContents( 'info' );
// Move the ID field from "advanced" to "info" tab.
infoTab.add( idField_config);
var idField_config = {
    type : 'text',
    label : 'Name',
    id : 'linkId',
    setup : function( type, element ) {
        //if ( type == IMAGE )
            this.setValue( element.getAttribute( 'id' ) );
    },
    commit : function( type, element ) {
        //if ( type == IMAGE ) {
            if ( this.getValue() || this.isChanged() )
            element.setAttribute( 'id', this.getValue() );
        //}
    }   
};

Issues I faced.

1. New fields get added to end of dialog.
2. Pieces of the original code ( type == IMAGE ) isn't valid (Love to know why but felt comfortable it was safe to comment for my usage)

You might face problems with the markup rules undoing your hard work, but "output html" sample" suggestion should help you weed through that issue.