Как обернуть тег table в в TinyMCE 4

Всем здасьте, думаю многие пользуются всеми любимыv Bootstrap 3, мне кажется
самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Я люблю собирать сайтики на Evolution CMS, у меня не возникало проблем что-бы сделать табличку резиновой или полосатой, но ведь после меня в админке сайтом будут заниматься люди !? Так еще мало или вообще не разбирающихся в HTML или CSS, они будут пользоваться или настроенными TV-шками и тут тоже вероятно не будет проблем, или проявят свое творчество с помощью TinyMCE!
Поступила задача, что бы при вставки таблицы в TinyMCE у самой таблицы присваивался class=«table», и все это обернуть в тег . Ну и для красоты добавим к таблице класс и сделаем «зебру» — Как сделать это правильно я конкретного ответа в интернетах не нашел, поэтому закидывайте помидорами или укажите на верный путь, может есть другое решение.
На данный момент эксперимент проводиться на сборке 1.4.0.RC.
1) открываем файлик /assets/plugins/tinymce4/tinymce/plagins/table/plagin.min.js
2) для удобства восприятия кода преобразовал его тут3) что бы обернуть table в div:в начале цикла for перед тегом
ставим и в return после
ставим 4) дальше класс присваиваем так:
в параметры a.settings.table_default_attributes пишем class: 'table table-striped'
получаем:

//добавляем div с классом table-responsiv
            function d(c, d) {
                var e, f, g, h;
                for (g = '<div class="table-responsive"><table id="__mce"><tbody>', e = 0; e < d; e++) {
                    for (g += "<tr>", f = 0; f < c; f++) g += "<td>" + (b.ie && b.ie < 10 ? " " : "
") + "</td>";
                    g += "</tr>"
                }
                return g += "</tbody></table></div>", a.undoManager.transact(function() {
                    a.insertContent(g), h = a.dom.get("__mce"), a.dom.setAttrib(h, "id", null), a.$("tr", h).each(function(b, c) {
                        a.fire("newrow", {
                            node: c
                        }), a.$("th,td", c).each(function(b, c) {
                            a.fire("newcell", {
                                node: c
                            })
                        })
                    }), a.dom.setAttribs(h, a.settings.table_default_attributes || {
                        class: 'table table-striped'
                    }), a.dom.setStyles(h, a.settings.table_default_styles || {})
                }), h
            }


Коротенький видосик как получилось

таблица на десктопе
таблица на мобилке

5 комментариев

avatar
Вот вариант получше (но тоже не очень хороший), добавить в Custom Parameters:

setup: function (editor) {
    editor.on('BeforeSetContent', function(e) {
        if (e.content.indexOf('<table') == 0) {
            e.content = '<div class="table-responsive">' + e.content.replace('<table','<table class="table table-bordered table-striped table-hover" ') + '</div>';
        }
    });
}
avatar
Отлично. А где это прописать?
avatar
а всё, нашёл, в конфигурации плагина есть поле «Custom Parameters (Be careful or leave empty!)».
avatar

в плагине TineMCE на вкладке кофигурации
avatar
Я обычно с разметкой химичу не в админке, а на фронте, просто ориентируясь на родителя jqury/javascript можно и классы добавлять, и обертывающие элементы и все, что душе угодно. Завтра появится еще десяток необходимостей добавит/убрать классы/обертки и такая костыльность на стороне tinymce возникнет, что мама не горюй
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.