Тема: TinyMCE API або просто JS, зробити площу (форму)
Я додав нову кнопку до TinyMCE і хочу щоб при натисканні на неї створилося вікно (не window.open) таке як спливає
Як це зробити за допомогою TinyMCE API або просто JS ?
Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → JavaScript, TypeScript, ECMAScript → TinyMCE API або просто JS, зробити площу (форму)
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися
Я додав нову кнопку до TinyMCE і хочу щоб при натисканні на неї створилося вікно (не window.open) таке як спливає
Як це зробити за допомогою TinyMCE API або просто JS ?
пропоную подивитись ісходники отут - https://vx.gs/ (вас цікавить boxes - https://vx.gs/boxes )
там один чувак куски коду з вк старої версії узяв, зліпив свій невеличкий ui-js-фреймворк
там є код, який вам потрібно, розіібратися в коді не складно
по суті вам потрібно 2 слоя -
1 - блок на всю ширину-висоту-затінення(опціонально -- клік по ньому-закриває)
2 - власне блок який з потрібним контентом
загалом тут трошки js + трошки css потрібно
Найшов, нарешті тут
Все набагато краще ніж я думав.
Всього лиш потрібно створити окрему 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
});
});
});
})();
Як то краще генерувати 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 рядок)
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися