Looking for solution for embedded images

[Craig]

I'm hoping someone has a good solution or workaround for what I'm trying to build. 

 

Backstory:

My team is upgrading an older web application that is a repository for documents.  The old version of the app has us storing the binary of Word docs and rendering them to the user on demand.  What we are looking to do now is to get rid of Word altogether and have them work exclusively in the Editor and we can just store the markup in our SQL database.  However, the business owners need us to be able to allow their users to embed images in the documents like you can do with Word. The images will only exist inside the document, so uploading them to another location and then referencing them is impractical (not to mention a concern for our Audit department).

 

Question:

Is there a good way to embed an image into the Editor so that it exists as a part of the document, as opposed to a reference to the image in another location?  It has to be something that will work in Internet Explorer 11 (I know... we hate it too), Edge and Chrome.  I don't mind building a custom tool to help in the process, but I'd just need a little direction on how to make that happen.  Ideally, we'd like for them to be able to copy/paste into the Editor, but we would be OK with it if we have a button to trigger a file chooser and they could select the desired image.  We're open to whatever suggestions that allow our users to embed the images.

 

Thanks so much for any help you guys might be able to give.

[Rumen]

Hi Craig,

You can insert the images as base64 strings into RadEditor via copy/paste from a image located on your local machine and via the Image Manager as explained in this KB article: Insert images with a base64 string in the src via the Image Manager. This way the images will be part of the content.

The only drawback is that this could produce a large amount of data that may slow down the browser as well as overload the server when saving it.


Best regards,
Rumen
Progress Telerik

[Craig]

Thanks for the response Rumen.  The only issue with the Image Manager is that it points to a server location.  I'd need for users to be able to add images from their own computer without having them upload to a central location first (or am I missing something?  I am very new to Telerik so I could very well have missed it. I would love to be able to keep it all local).  I am working in a heavily audited corporate environment, so giving all of our users a central upload location solely for images isn't something that they'd allow.  However, I'm wondering if I can modify that javascript snippet to get the behavior I want.  It definitely gives me something to work with though.

[Rumen]

You are welcome, Craig.

The users can directly copy and paste images directly in the content area as base 64 without the need of a dialog as shown in the attached video.

Regards,
Rumen
Progress Telerik

[Craig]

That's a perfect workaround for what they originally asked for (originally they wanted an insert button to open a file dialog to select a local file).  But we can definitely have them take this approach and just have it be a training point when they are writing their documents.  Thanks again for the help!

[Rumen]

Hi Craig,

I would like to present yet another solution to insert base64 images from external URLs via the Insert Image Light dialog of RadEditor. 

Here you go:

<script>
    Telerik.Web.UI.InsertImage.prototype._insertClickHandler = function (e) {

        if (!this._originalImage && this._imageSrc.value) this._originalImage = this.createElement("img");
        var image = this.getModifiedImage();
        if (image) {
            var that = this;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {

                    var reader = new FileReader();
                    reader.onloadend = function () {
                        base64data = reader.result;

                        var editorId = e.target.id.replace("_iplInsertBtn", "")
                        var theDoc = $find(editorId).get_document();
                        var imgs = theDoc.querySelectorAll("[myBase64Image]");
                        if (imgs.length > 0) {
                            imgs[0].setAttribute("src", base64data);
                            imgs[0].removeAttribute("myBase64Image");
                        }
                    }

                    reader.readAsDataURL(this.response);
                }
                else if (this.readyState == 4 && this.status == 500) {
                    console.log("There is an error obtaining this image! Implement proper error handling here");
                }
            }
            xhr.open('GET', image.getAttribute("src"));
            xhr.responseType = 'blob';
            xhr.send();

            image.setAttribute("myBase64Image", "myBase64Image")

            that._clearImgeDimensions(image);
            var arg = new Telerik.Web.UI.EditorCommandEventArgs("InsertImage", null, image);
            that._container.close(arg);


        }
        else $telerik.cancelRawEvent(e);
    }


</script>
<telerik:RadEditor ID="RadEditor1" runat="server">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="InsertImage" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

Regards,
Rumen
Progress Telerik