CKEditor: Modifying view without changing data

Viewed 62

I have content that references Images by ID within a placeholder (e.g. "$m(12345)" ). I have a REST call that will return an img-tag for the placeholder.

I would like CKEditor to display the image when the content is opened in editor, or a placeholder is inserted. But I want the placeholder to remain in the content (including when switching to the Source view)

I've tried to do this by adding a rule to the dataFilter:

CKEDITOR.on('instanceLoaded', function(ckeditor){
     var mediaPlaceholderRegex = /\$m\(.*\)/;
     ckeditor.editor.dataProcessor.dataFilter.addRules({
         text: function( text, node ) {
                return text.replace( mediaPlaceholderRegex, function( match ) {

                    var params = "placeholder="+match;
                    var xhttp = new XMLHttpRequest();
                    xhttp.open("POST", url, false);
                    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhttp.send(params);
                    return xhttp.responseText;
                } );
            }
     });
 });

It does the job of replacing the placeholder with the image tag, but the img-tag is also there when switching to the source view.

Is there an easy way to only apply a filter to the wysiwyg view. The only way I see is to add a htmlFilter that would revert the img-tag back to a placeholder.

1 Answers
Related