title: How to change default html for adding image in Tinymce
body: <p>When i add an image in tinymce, this is the default html source code i get:</p>
  
  <pre><code>&lt;p&gt;&lt;img class="img-responsive img-post" src="/Images/uploads/img.png" alt="" /&gt;&lt;/p&gt;
  </code></pre>
  
  <p>How do i change this? to something like:</p>
  
  <pre><code>&lt;p&gt;&lt;img class="img-responsive img-post" data-original="/Images/uploads/img.png" src="/Images/loading.gif" alt="" /&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Where i have data-original as the src and src is the loading icon, it needs to be like this because i have lazy loading on images.</p>
  
  <p>I know you can extend valid elements using:</p>
  
  <pre><code>extend_valid_elements: "data-original"
  </code></pre>
  
  <p>but how do i change the structure of default html source code? Is there something like on selecting ok for image insert callback??</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Here is my tinymce initiation code:</p>
  
  <pre><code>/******************************tinyMce*******************************/
  function tinyMce() {
      tinymce.init({
          theme: "modern",
          selector: "#mceEditor",
          height: 500,
          extend_valid_elements: "data-original",
          relative_urls: true,
          convert_urls: false,
          image_advtab: true,
          image_title: false,
          image_description: false,
          image_dimensions: false,
          image_class_list: [
              { title: "Responsive", value: "lazy img-responsive img-post" }
          ],
          image_list: function (success) {
              $.ajax({
                  url: "/Image/List",
                  type: "GET",
                  dataType: "json",
                  success: function (data) {
                      success(data);
                  }
              });
          },
          // enable automatic uploads of images represented by blob or data URIs
          automatic_uploads: true,
          // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
          images_upload_url: "/Image/Upload",
          // here we add custom filepicker only to Image dialog
          file_picker_types: "image",
          // and here's our custom image picker
          file_picker_callback: function (cb, value, meta) {
              var input = document.createElement("input");
              input.setAttribute("type", "file");
              input.setAttribute("accept", "image/*");
  
              // Note: In modern browsers input[type="file"] is functional without 
              // even adding it to the DOM, but that might not be the case in some older
              // or quirky browsers like IE, so you might want to add it to the DOM
              // just in case, and visually hide it. And do not forget do remove it
              // once you do not need it anymore.
  
              input.onchange = function () {
                  var file = this.files[0];
  
                  var reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onload = function () {
                      // Note: Now we need to register the blob in TinyMCEs image blob
                      // registry. In the next release this part hopefully won't be
                      // necessary, as we are looking to handle it internally.
                      var id = "blobid" + (new Date()).getTime();
                      var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                      var base64 = reader.result.split(',')[1];
                      var blobInfo = blobCache.create(id, file, base64);
                      blobCache.add(blobInfo);
  
                      // call the callback and populate the Title field with the file name
                      cb(blobInfo.blobUri(), { title: file.name });
                  };
              };
  
              input.click();
          }
      });
  }
  </code></pre>
  
  <p>I am thinking about another way now, if i can replace default src attribute inside tinymce to data-original, that would be perfect, but inside tinymce, if i use data-original, it won't show the picture, it justs shows blank. Is there a way to tell tinymce when adding an image, put data-original instead of src and read from data-original instead of src?</p>
  
  <p>so from this:</p>
  
  <pre><code>&lt;p&gt;&lt;img class="img-responsive img-post" src="/Images/uploads/img.png" alt="" /&gt;&lt;/p&gt;
  </code></pre>
  
  <p>to this without src at all:</p>
  
  <pre><code>&lt;p&gt;&lt;img class="img-responsive img-post" data-original="/Images/uploads/img.png" alt="" /&gt;&lt;/p&gt;
  </code></pre>