Взаимодействие с TinyMCE, загрузка картинок в доп.поля и прочие "лайфхаки"

[fanera 20]

Наверное, одно из самых недооцененных - использование jquery, ajax, api tinymce для упрощения, автоматизации и других рутинных задач. Каждый проект имеет свои особенности, но порой можно сократить одни и те же задачи.

Описывать можно бесконечно, т.к. функций очень много различных, я решил выписать самое базовое и мое любимое, ужав весь материал в несколько строк кода 🙂

Получить значения из Заголовок, Метатег Title, ЧПУ URL статьи (аналогично делается для других полей):

$('[name=\"title\"]').val()
$('[name=\"meta_title\"]').val()
$('[name=\"alt_name\"]').val()

Чтобы установить значение, нужно просто передать в val строку. Пример:

$('[name=\"title\"]').val("Привет, мир")

Взаимодействие с редактором tinymce:

const short_story = tinymce.get('short_story');
const full_story = tinymce.get('full_story');

Замена чего-то в tinymce, например, в полном:

var full_story_content = full_story.getContent();
full_story_content = content.replaceAll('<div class=\"bad-class\">', '<p>');
full_story.setContent(full_story_content);

tinymce имеет набор функций (событий), которые можно использовать для упрощения. Например:

• BeforeSetContent
• BeforeRenderUI
• и многое другое, зависит от хотелок и требований, https://www.tiny.cloud/docs/tinymce/latest/events/#editor-core-events

Взять пример с BeforeSetContent (размещать нужно в tinymce.init({ .....):

setup: function(editor) {
  editor.on('BeforeSetContent', function (e) {
	e.content = e.content.replaceAll('<strong>', '<b>');
  });

BeforeSetContent интересен тем, что срабатывает ДО установки содержимого в редактор. Это полезно при копировании с других источников и в других различных случаях, когда стоит задача в удалении различных html тегов и стилей из редактора.

Взаимодействие с облаком тегов (добавить, заменить и прочее):

$('#tags').tokenfield('createToken', 'тег');
$('#tags').tokenfield('setTokens', data); //устанавливает, заменяя теги, где data это строка через запятую или массив или объект

Подробнее по методам tokenfield на https://sliptree.github.io/bootstrap-tokenfield/#methods, с ним очень просто работать

Функция для установки категории с помощью JS:

function select_category(index) {
  $('.categoryselect').val(index);
  $('.categoryselect').trigger('chosen:updated');
  $('.categoryselect').trigger('change');
}

Это работает с мультикатегориями и вызывается через select_category(значение категории из <option value="..."...)

Загрузка картинки в доп.поле с типом Загружаемое изображение:

Тут потребуется создать отдельный php файл, т.к. при обращении из браузера с xhr, fetch или ajax на сторонние сайты будем ловить cors. Например, можно создать его в папке /engine/ajax/, назвав getimagefromlink.php:

<?php
echo file_get_contents($_REQUEST['image_url'])
?>

Данный код является лишь примером. Его суть просто - получить содержимое из запроса и отдать ответом. Так что убедитесь, что понимаете для чего и как используете, т.к. необходима дополнительная защита.

Затем JS обработчик:

    function uploadToField(url) {
        getImgURL(url, (imgBlob) => {
            const file = new File([imgBlob], "123.png", imgBlob)
            file_uploaders['ТУТ ID ПОЛЯ'].addFile(file, "123.png");
        })
    }

    function getImgURL(url, callback) {

        $.ajax({
            url: '/engine/ajax/getimagefromlink.php',
            method: 'GET',
            data: {
                'image_url': url
            },
            xhrFields: {
                responseType: 'blob'
            },
            dataType: 'binary',
            success: function(data) {
                callback(data);
            }
        });
    }

"123.png" - название, его можно как-то предварительно получить например обрезав ссылку пути картинки, генерировать и прочее. Все индивидуально.

Вызываем uploadToField(путь до картинки) и изображение будет автоматически загружено в поле.

Подставка URL картинки в "С сайта (URL):" и загрузка в загрузчик файлов:

const full_story = tinymce.get('full_story');
media_upload( full_story.options.get('dle_upload_area'), full_story.options.get('dle_upload_user'), full_story.options.get('dle_upload_news'), '2');
$('#copyurl').val('адрес картинки');
$('button:contains(Загрузить)')[0].click()

Это будет работать только с абсолютными путями, т.к. DLE не поддерживает загрузку путями вроде http://site.zone/d/fgfdg/hg445

Изменено 10 февраля пользователем fanera