0

Доброго времени суток. Нужно сделать плагин для TinyMce v4. Суть плагина такова, есть некий JSON массив со списком фотографий т.е.

{images:{id:150,name:'imeges1.jpg'}, id:151,name:'imeges2.jpg'}, id:152,name:'imeges3.jpg'}]}

Нужно сделать так, что бы в TinyMce v4 открывалось окно, в окне формировался стисок фотографий и при выборе какой то фотографии (нажать на фото) в текст вставлялся тег {images-152} который бы не выделялся тегами <p></p>. А если как то возможно то вставлялась бы еще и сама картинка, но при условии, что в коде все таки был тег {images-152}

2
  • Покажите, на каком шаге вы застряли, мы подскажем!
    – lampa
    29 июл 2014 в 9:43
  • не понимаю как в окно вставить HTML код,а потом при нажатии на фото закрыть это и при этом вставить тег
    – Abitlord
    29 июл 2014 в 19:29

1 ответ 1

3

Если подключаешь min библиотеку, то:

../plugins/pasteImage/plugin.min.js

Если full, то

../plugins/pasteImage/plugin.js

Содержание плагина:

tinymce.PluginManager.add('PasteImage', function(editor, url) {
    // Adds a menu item to the tools menu
    editor.addMenuItem('PasteImage', {
        text: 'PasteImage plugin',
        context: 'tools',
        onclick: function() {
            var images = [
                {image: 'https://secure.gravatar.com/avatar/870c227ab02e5c61101a8265cdd14989?s=128&d=identicon&r=g' , id: '120'},
                {image: 'https://secure.gravatar.com/avatar/870c227ab02e5c61101a8265cdd14989?s=128&d=identicon&r=g' , id: '123'},
                {image: 'https://secure.gravatar.com/avatar/870c227ab02e5c61101a8265cdd14989?s=128&d=identicon&r=g' , id: '142'},
            ];

            for(var i=0, html = ''; i < images.length; i++) {
                html += "<img src='" + images[i].image + "' style='width:190px;margin: 10px;' data-paste='{images-" + images[i].id + "}'>";
            }

            // Open window with a specific url
            editor.windowManager.open({
                title: 'Choise image',
                width: 600,
                height: 400,
                html: html,
                buttons: [{text: 'Закрыть', onclick: 'close'}],
                onclick: function(ed) {
                    ed.preventDefault();

                    if(ed.target.tagName.toLowerCase() == 'img') {
                        editor.insertContent(ed.target.outerHTML);
                        var win = editor.windowManager.getWindows()[0];
                        win.close();

                    }
                }
            });
        }
    });
});

В init:

tinymce.init({
    selector: "textarea",
    plugins: 'PasteImage'
 });
6
  • Хм интересно, а не хотели бы вы написать все модули которые мне требуются для TinyMce v4 fl.ru/projects/2023450/…
    – Abitlord
    30 июл 2014 в 14:33
  • Чуть поправил и прямо то, что надо if(ed.target.tagName.toLowerCase() == 'img') { editor.insertContent(ed.target.outerHTML); var win = editor.windowManager.getWindows()[0]; win.close(); }
    – Abitlord
    30 июл 2014 в 14:53
  • @Abitlord могу написать.
    – lampa
    31 июл 2014 в 8:14
  • хорошо, если вы есть на фрилансе, то выберите как исполнитель
    – Abitlord
    1 авг 2014 в 5:13
  • @Abitlord а если меня там нет? Оставьте свой емеил тут: [email protected] я вам напишу.
    – lampa
    1 авг 2014 в 5:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.