1 Востаннє редагувалося Betterthanyou (08.12.2016 18:58:29)

Тема: TinyMCE API або просто JS, зробити площу (форму)

Якщо вам цікаво що я роблю

Я додав нову кнопку до TinyMCE і хочу щоб при натисканні на неї створилося вікно (не window.open) таке як спливає

приклад
https://ps.w.org/photo-gallery/assets/screenshot-3.png?rev=1508783

Як це зробити за допомогою TinyMCE API або просто JS ?

Подякували: 221VOLT1

2 Востаннє редагувалося 221VOLT (08.12.2016 19:07:25)

Re: TinyMCE API або просто JS, зробити площу (форму)

пропоную подивитись ісходники отут - https://vx.gs/ (вас цікавить boxes - https://vx.gs/boxes )
там один чувак куски коду з вк старої версії узяв, зліпив свій невеличкий ui-js-фреймворк
там є код, який вам потрібно, розіібратися в коді не складно

по суті вам потрібно 2 слоя -
1 - блок на всю ширину-висоту-затінення(опціонально -- клік по ньому-закриває)
2 - власне блок який з потрібним контентом

загалом тут трошки js + трошки css потрібно

https://blog.clever-games.win/
Це ще не кінець. Це навіть не початок кінця. Але, можливо, це кінець початку.
Зростання мудрості можна точно вимірювати ступенем зменшення злоби.
///// у творчій відпустці. не турбувати /////
Подякували: Betterthanyou1

3

Re: TinyMCE API або просто JS, зробити площу (форму)

Найшов, нарешті тут

Все набагато краще ніж я думав.

Всього лиш потрібно створити окрему HTML сторінку і в цьому коді замінити параметри title(заголовок) і url(шлях до вашої сторінки)

// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
    title: "My html dialog",
    url: 'mydialog.html',
    width: 700,
    height: 600
});

І все.


повний код виглядає так (якщо раптом комусь знадобиться)

(function() {
    tinymce.PluginManager.add( 'НАЗВА_ВАШОГО_ПЛАГІНА', function( editor, url ) 
        {
        // Add Button to Visual Editor Toolbar
        editor.addButton('НАЗВА_ВАШОГО_ПЛАГІНА', {
            title: 'ЗАГАЛОВОК',
            cmd: 'НАЗВА_ВАШОГО_ПЛАГІНА',
                        image: url + '/ШЛЯХ_ДО_ЗОБРАЖЕННЯ',
                        
        });    
                // Add Command when Button Clicked
                editor.addCommand('НАЗВА_ВАШОГО_ПЛАГІНА', function() 
                {
                    editor.windowManager.open({
                        title: "ЗАГАЛОВОК",
                        url: url + '/ШЛЯХ_ДО_СТОРІНКИ',
                        width: 700,
                        height: 600
                    });
                });
    });
})();
Подякували: 221VOLT, NagarD2

4 Востаннє редагувалося Betterthanyou (10.12.2016 22:29:34)

Re: TinyMCE API або просто JS, зробити площу (форму)

Як то краще генерувати HTML код ? В мене поки що дві ідеї:
1) Створити сам код, помістити його в рядок, а потім за допомогою функції заміни заміняти ті поля які мені потрібно

    <table border="1">
        <tr>
            <td class="col1" rowspan="3">[field1]</td>
            <td class="col2">[field2]</td>
            <td rowspan="3">[field5]</td>
        </tr>
        <tr>
            <td class="col2">[field3]</td>
        </tr>
        <tr>
            <td class="col2">[field4]</td>
        </tr>
    </table>
............
str.replace("[field1]", "text1");
...
str.replace("[field5]", "text5");

2) Друга ідея мені більше до-вподоби, але мін кажеться (а точніше так є) я не знаю як праильно програмувати за допомогою JS

        var row = 3;
        var col = 3;
        
        window.onload = function()
        {
            var concert_table = document.createElement("table");
            
            var table_tr;
            var table_td;
            for(var i = 0; i < row; i++)
            {
                table_tr = document.createElement("tr");
                for(var j = 0; j < col; j++)
                {
                    table_td = document.createElement("td");
                    table_tr.appendChild(table_td);
                    table_td.setAttribute('rowspan', 3);
                    table_tr.setAttribute('colspan', 3);
                }
                concert_table.appendChild(table_tr);
            }
            
            document.body.appendChild(concert_table); 
        };

я не знаю як правильно зробити так щоб додати атрибути в потрібні мені поля (є там ідея зробити розгалуження якщо i=='n' то писати атрибут), також я не знаю як потім звернутися до потрібних мені полів (бо я ж їх переприсвоюю в циклі), можливо їх занести в масив.

Можете мені сказати ідею як це правильно зробити чи написати код щоб створював таку таблицю як зверху (1 - 13 рядок)

Подякували: 221VOLT1