Как изменить HTML по умолчанию для добавления изображения в Tinymce

Когда я добавляю изображение в tinymce, это исходный HTML-код по умолчанию, который я получаю:

<p><img class="img-responsive img-post" src="/Images/uploads/img.png" alt="" /></p>

Как мне это изменить? на что-то вроде:

<p><img class="img-responsive img-post" data-original="/Images/uploads/img.png" src="/Images/loading.gif" alt="" /></p>

Если у меня есть data-original, так как src и src - значок загрузки, это должно быть так, потому что у меня ленивая загрузка изображений.

Я знаю, что вы можете расширить допустимые элементы, используя:

extend_valid_elements: "data-original"

но как мне изменить структуру исходного HTML-кода по умолчанию? Есть ли что-то вроде выбора ok для обратного вызова вставки изображения ??

Update:

Вот мой код инициализации tinymce:

/******************************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();
        }
    });
}

Сейчас я думаю о другом способе, если я смогу заменить атрибут src по умолчанию внутри tinymce на data-original, это было бы идеально, но внутри tinymce, если я использую data-original, он не покажет картинку justs показывает пустым. Есть ли способ указать tinymce при добавлении изображения, поставить data-original вместо src и прочитать из data-original вместо src?

так из этого:

<p><img class="img-responsive img-post" src="/Images/uploads/img.png" alt="" /></p>

на это вообще без src:

<p><img class="img-responsive img-post" data-original="/Images/uploads/img.png" alt="" /</p>
7 голосов | спросил Mindless 17 AM000000100000005031 2017, 10:03:50

3 ответа


0

Вот способ определить, когда изображение вставляется в редактор.

JS

var newSrc = "/Images/loading.gif";


tinymce.init({
  selector: 'textarea',
  plugins: "image",
  toolbar: "image",
  height: 350,
    setup: function(editor){
    editor.on('NodeChange', function (e) {
      if(e.element.tagName === "IMG"){          
        e.element.setAttribute("data-original", e.element.currentSrc);
        e.element.setAttribute("src", newSrc);
      }
    });
  }
});

Вы можете получить доступ к элементу, прослушав событие NodeChange. Затем проверьте, что tagName имеет тип IMG. Тогда мы просто устанавливаем наши атрибуты как обычно.

Проверьте эту демонстрационную версию

ответил PalinDrome555 17 PM00000080000000331 2017, 20:23:03
0
  

... но внутри tinymce, если я использую data-original, изображение не будет отображаться, оно будет отображаться пустым.

Продолжайте делать то, что вы делаете здесь, и просто добавьте обработчик изменений, чтобы добавить новый src ...

editor.on('Change', function (e) {
    // Get images that have data-original attribute but not src
    $( 'img[data-original]' ).not( 'img[src]' )
      .attr( 'src', '/Images/loading.gif' ) // Add src
} );
ответил shramee 5 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 05 Sep 2017 07:56:50 +0300 2017, 07:56:50
0

Вы можете решить эту проблему с помощью регулярного выражения и строки метод замены функция вернет замену для совпадения .. как в примере ниже

 // tinymce returning string
let content = '<p><img class="img-responsive img-post" src="/Images/uploads/img.png" alt="" /></p><p><img class="img-responsive img-post" src="/Images/uploads/img2.png" alt="" /></p>';

// searching through all the img tags in the content..
content = content.replace(/<img(\s+[^>]*)src="([^"]*)"([^>]*)>/g,function(full,key, value){
 return `<img ${key} src="/Images/loading.gif" data-original="${value}" alt="">`;
});


//content replaced
console.log(content);

Регулярное выражение используется для соответствия всем тегам img, затем мы просто добавляем новый атрибут data-original и заменяем его в исходной строке

ответил Renzo Calla 5 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 05 Sep 2017 15:54:59 +0300 2017, 15:54:59

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132