Is there a way to paste pictures inside the rich text editor, for my enterprise wiki site?

Question

I have a publishing site collection using the enterprise wiki template. Currently if I have a word document which contain text & images , and I copy all the word document content, after that I paste the content inside the rich text editor , then only the text will get copied (without the images).

So my question if there is a way to allow pasting the pictures inside the rich text editor?

Thanks

Answer 1

you cannot paste the images into sharepoint pages directly, Images cannot be rendered as HTML so cannot be pasted.

You have to upload the images into SharePoint then insert it on the pages /places you want.

Or you can try 3rd party tool for this.

http://www.kwizcom.com/sharepoint-add-ons/SharePoint-clipboard-manager/overview/

or

http://www.telerik.com/products/aspnet-ajax/editor.aspx

Answer 2

You can take advantage of browsers ability to paste base64 encoded images into editable content. But since sharepoint's editor strips base64 images you can use a dirty trick to store image contents to hidden placeholders that don't get stripped and then render images back from these placeholders on page load.

There are pros (it does the job, its easy to use - simply add the script to your site) and cons (large inline images, pasting images one by one, additional js events, etc) of this solution.

So try with this javascript (insert it as embed code, in master page, etc) and it should just work (tested in sharepoint 2013 enterprise wiki but it should work with any sharepoint content editing form with some code tweaks). Note that you must set your editor div's id first.

    <script type='text/javascript'>

    //set your editable content (editor) client id here:
    var editorClientId = "ctl00_PlaceHolderMain_PageContent_RichHtmlField_displayContent"

    _spBodyOnLoadFunctionNames.push("renderImages()");

    function getImagesByAlt(alt) {
        var allImages = document.getElementsByTagName("img");
        var images = [];
        for (var i = 0, max = allImages.length; i < max; ++i)
            if (allImages[i].alt == alt)
                images.push(allImages[i]);
        return images;
    }
    //if page is in edit mode, delay for other scripts to finish first
    function renderImages() {
        if (window.location.href.indexOf("ControlMode=Edit") > -1)
            setTimeout(function () { renderImagesStart(); }, 1500);
        else
            renderImagesStart();
    }
    //apply data-imgrefs attribute to stripped image contents
    function renderImagesStart() {
        var allSpans = document.getElementsByClassName("imgrefs");
        for (var i = 0, max = allSpans.length; i < max; i++) {
            var img = getImagesByAlt(allSpans[i].title)[0];
            if (img != null)
                img.src = "data:image/gif;base64," + allSpans[i].getAttribute("data-imgref");
        }
    }
    //chrome paste handler
    var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;
    var loadImage = function (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var img = document.createElement('img');
            img.src = e.target.result;

            var range = window.getSelection().getRangeAt(0);
            range.deleteContents();
            range.insertNode(img);
        };
        reader.readAsDataURL(file);
    };
    document.onpaste = function (e) {
        var items = e.clipboardData.items;
        for (var i = 0; i < items.length; i++) {
            if (IMAGE_MIME_REGEX.test(items[i].type)) {
                loadImage(items[i].getAsFile());
                return;
            }
        }
    }
    //if page is in edit mode apply onblur (leave editor) event to hide images base64 content to spans
    //class name, data- and alt attributes are used because sharepoint doesn't strip them
    if (window.location.href.indexOf("ControlMode=Edit") > -1)
        document.getElementById(editorClientId).onblur = function () {
            var editor = document.getElementById(editorClientId);
            var childNodes = editor.childNodes;
            //remove spans
            for (var i = childNodes.length - 1; i >= 0; i--) {
                var childNode = childNodes[i];
                if (childNode.className == 'imgrefs')
                    childNode.parentNode.removeChild(childNode);
            }
            var imgs = editor.getElementsByTagName("img");
            var id = 0;
            //for each base64 image: hide its content to span data-imgref attribute and append span to editor
            for (var i = 0, max = imgs.length; i < max; i++) {
                var img = imgs[i];
                if (img.src.indexOf("data:image") > -1) {
                    id += 1;
                    img.alt = id & 0xffff;
                    img.alt = 'img' + img.alt;
                    var src = img.src.replace('data:image/gif;base64,', '').replace('data:image/png;base64,', '').replace('data:image/jpg;base64,', '');
                    var span = document.createElement("span");
                    span.className = "imgrefs";
                    span.title = img.alt;
                    span.setAttribute("data-imgref", src);
                    span.innerText = '';
                    editor.appendChild(span);
                }
            }
        }

</script>

Additionally it can be upgraded to store pasted base64 images as files on server using sharepoint's web service CopyIntoItems directly in javascript (on paste or some pre-save event) and then replacing base64 with image filename on server.

Answer 3

I found that I could use the Discussion Board List editor to at least Insert->From Computer and use the editor tools to manipulate the images embedded in the text. Then you can cut and paste from there into the normal sharepoint list item Rich Text fields. You do not even have to save the Discussion List post you used to edit, just cancel the post after you cut and paste from it. If you need more sophisticated image manipulation (like rotating an image) then if you can email to your discussion board list you can simply use your outlook email editor to compose the text and images and send it to that discussion board list.