Froala editor v2.3.4 insert image -> just insert into DOM as "data:image" no upload to server

Question

I'm using Froala editor v2.3.4 and I have the insertImage plugin using the file 2.3.4/js//image.min.js, which activated without additional parameters.

Every time I instert an image, it gets uploaded to

I want that the image gets entered into the DOM tree with the src="data:image"

I get this behavior by setting the imageUploadURL parameter and with an invalid URL:

The result is that the HTML code looks like this:

The image is not uploaded but just added to the DOM as a base64 encoded string. That is exactly what I want. But, of course, I got an error:

Is there an option in the Froala editor v2, which disables the image upload to a server ( not the possibility to insert images into the editor field ) and stores inserted images as src="data:image?

Answer 1

Provide the below property in the editor options:

imageUploadRemoteUrls: false

Then the image will be added to the DOM as URL instead of local server.

Answer 2

Although inserting images as base64 can be easily achieved, our recommendation is to use images that are loaded from an URL. This might be tempting at a first glance because you don't have to deal with all the image storage, but you will get in troubles quickly. Here are the top 2 reasons for doing that when you're using a WYSIWYG HTML editor and

browser tend to slow down when images are inserted as base64 because they have to process very large chunks of HTML; when you save the content, you'll pass a lot of data to your server and that would result in an unwanted overload.

 new FroalaEditor('.selector', {
   events: {
     "image.beforeUpload": function(files) {
     var editor = this;
      if (files.length) {
        // Create a File Reader.
        var reader = new FileReader();
        // Set the reader to insert images when they are loaded.
        reader.onload = function(e) {
          var result = e.target.result;
          editor.image.insert(result, null, null, editor.image.get());
        };
        // Read image as base64.
        reader.readAsDataURL(files[0]);
      }
      editor.popups.hideAll();
      // Stop default upload chain.
      return false;
     }
   }
 })

You can check the link also: https://wysiwyg-editor.froala.help/hc/en-us/articles/115000555949-Can-I-insert-images-as-base64-