Simple Editable IFrame

Please click on an image or table to see the plugin in work. To keep image aspect ratio hold ctr key and click and drag to resize.

For jquery 1.9+ version please make sure you include jquery.mb.browser.min.js right after the place where jquery is included. This is adding back removed $.browser property.



$(document).ready(function () {
    var iframe = document.getElementById('simpleIFrame');
    var doc = iframe.contentDocument || iframe.contentWindow.document;

    doc.body.innerHTML = iframe.textContent || iframe.innerHTML;

    if (doc.body.contentEditable) {
        doc.body.contentEditable = true;
    }

    var wrapImages = function () {
        $("#simpleIFrame").contents().find("img").each(function (i, img) {
            if (!$(img).parent().hasClass('image-wrap')) {
                $(img).wrap("");
            }
        });
    };

    /*
        Webkitresize can be initialized just with this code:
        $("#simpleIFrame").webkitimageresize().webkittableresize().webkittdresize();
        the reason why additional code was added is for adding image selection on click to this 
        example. When the editor is already doing this, which is true for CKEditor, TinyMCE and
        some of the Telerik editors, this additional code is not required.                 
    */

    $("#simpleIFrame").webkitimageresize({
        afterReset: function () {
            wrapImages();
        },

        afterRefresh: function (img) {
            wrapImages();
        },

        afterElementSelect: function (img) {
            var range = iframe.contentWindow.document.createRange();                        
            range.selectNodeContents($(img).parent()[0]);                        
            var sel = window.getSelection();
            if (sel.rangeCount > 0)
                sel.removeAllRanges();
            sel.addRange(range);
        }
    }).webkittableresize().webkittdresize();
});
        




TinyMCE



tinyMCE.init({
    // General options
    init_instance_callback: function () { $(".mceIframeContainer iframe").webkitimageresize().webkittableresize().webkittdresize(); },
    height: '480',
    width:'680',
    mode: "textareas",
    theme: "advanced",
    plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",

    // Theme options
    theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_resizing: true,

    // Example content CSS (should be your site CSS)
    content_css: "/Content/content.css",

    // Drop lists for link/image/media/template dialogs
    template_external_list_url: "lists/template_list.js",
    external_link_list_url: "lists/link_list.js",
    external_image_list_url: "lists/image_list.js",
    media_external_list_url: "lists/media_list.js",

    // Style formats
    style_formats: [
		{ title: 'Bold text', inline: 'b' },
		{ title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
		{ title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
		{ title: 'Example 1', inline: 'span', classes: 'example1' },
		{ title: 'Example 2', inline: 'span', classes: 'example2' },
		{ title: 'Table styles' },
		{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
	],

    // Replace values for the template plugin
    template_replace_values: {
        username: "Some User",
        staffid: "991234"
    }
});
        




Telerik MVC Editor


For making Webkitresize working in “Telerik MVC Editor” was added a client side event “.ClientEvents(ce=>ce.OnLoad("onEditorLoad"))” and also added the actual “onEditorLoad” javascript function. Again was used the same approach as in the first example for making it possible to select the image(making it all blue) however for “Telerik Rad Editor” this is not required because it is doing this already. Below is the source code for "onEditorLoad" function.

function onEditorLoad() {
    var wrapImages = function () {
        $("#editor iframe").contents().find("img").each(function (i, img) {
            if (!$(img).parent().hasClass('image-wrap')) {
                $(img).wrap("");
            }
        });
    };

    $("#editor iframe").webkitimageresize({
        afterReset: function () {
            wrapImages();
        },

        afterRefresh: function (img) {
            wrapImages();
        },

        afterElementSelect: function (img) {
            var editor = $('#editor').data('tEditor');
            var range = editor.createRange();
            range.selectNodeContents($(img).parent()[0]);
            editor.selectRange(range);
        }
    }).webkittableresize().webkittdresize();        
}
    




CKEditor


Since CKEditor has image select functionality the only thing that has to be done is including required files and placing webkitresize initialization code after CKEditor initialization code. Below is a basic example of a page with CKEditor with webkitresize. The lines required for enabling webkitresize were highlighted. The two files required to make webkitresize work are jquery-1.7.1.min.js and jquery.webkitresize.min.js. Please check the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>CKEditor Sample</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
	<script type="text/javascript" src="../ckeditor.js"></script>
    <script type="text/javascript" src="../jquery-1.7.1.min.js"></script>    
    <script type="text/javascript" src="../jquery.webkitresize.min.js"></script>
    
</head>
<body>
    <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
    <script type="text/javascript">
    //<![CDATA[

        // This call can be placed at any point after the
        // <textarea>, or inside a <head><script> in a
        // window.onload event handler.

        // Replace the <textarea id="editor"> with an CKEditor
        // instance, using default configurations.
        CKEDITOR.replace('editor1');
        CKEDITOR.on('instanceReady', function () {
            $(".cke_editor iframe").webkitimageresize().webkittableresize().webkittdresize();
        });
    //]]>
    </script>
</body>
</html>
    

In maximized mode CKEditor is assigning z-index: 9999 to the container and this is hiding the resize selector. The issue can be fixed by adding the style below:

    .img-resize-selector, .img-resize-region, .resize-selector, .resize-region, .td-resize-selector, .td-resize-region    
    {
        z-index: 10000 !important;
    }