[ACCEPTED]-CKEditor: Customized HTML on inserting an image-customization

Accepted answer

Score: 14

I kind of had the same problem, I needed 6 to remove those attributes from the generated 5 HTML for the image, so what I did was to 4 override the onOK method of the uploader 3 and insert the image element manually using 2 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 1 has worked for us so far.

Score: 1

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

Score: 0

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

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

Then 7 during dialog definition

Delete Originals
Add your "custom" fields

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

I added my field 4 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.

New fields get added to end of dialog.
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 3 face problems with the markup rules undoing 2 your hard work, but "output html" sample" suggestion 1 should help you weed through that issue.

Score: 0

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

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

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

just a suggestion.

Source: stackoverflow.com

[ACCEPTED]-CKEditor: Customized HTML on inserting an image-customization

python matplotlib colorbar setting tick formator/locator changes tick labels

Customizing bash completion output: each suggestion on a new line

IntelliJ IDEA: Increase size of bar on the right side of editor

WPF: Changing Resources (colors) from the App.xaml during runtime

adding custom functionality into chrome's console

Android ActionBar Customize Search View

How to make double seekbar in android?

Matplotlib: Repositioning a subplot in a grid of subplots

How to customise the PostgreSQL/psql prompt?

Custom Progress bar Android