WYMeditor Django-cms попробуй забори

В общем сабж. В интернете нашёл только краткий пост Ивана Маркеева

http://markeev.labwr.ru/2010/02/django-cms-wymeditor.html

Я не прочитал внимательно строчку: Приведенные WYM_STYLES определяют то, как контент будет выглядеть в редакторе. 

То есть просто как он будет выглядеть в редакторе :) В окошке редактирования

1. Для кастомизации WYMeditora в рамках Django-cms следует изменить свой файл настроек django проекта settings.py

дописав в него примерно следующее:

#WYMEditor
WYM_TOOLS = ",\n".join([
"{'name': 'Bold', 'title': 'Strong', 'css': 'wym_tools_strong'}",
"{'name': 'Italic', 'title': 'Emphasis', 'css': 'wym_tools_emphasis'}",
"{'name': 'Superscript', 'title': 'Superscript', 'css': 'wym_tools_superscript'}",
"{'name': 'Subscript', 'title': 'Subscript', 'css': 'wym_tools_subscript'}",
"{'name': 'InsertOrderedList', 'title': 'Ordered_List', 'css': 'wym_tools_ordered_list'}",
"{'name': 'InsertUnorderedList', 'title': 'Unordered_List', 'css': 'wym_tools_unordered_list'}",
"{'name': 'Indent', 'title': 'Indent', 'css': 'wym_tools_indent'}",
"{'name': 'Outdent', 'title': 'Outdent', 'css': 'wym_tools_outdent'}",
"{'name': 'Undo', 'title': 'Undo', 'css': 'wym_tools_undo'}",
"{'name': 'Redo', 'title': 'Redo', 'css': 'wym_tools_redo'}",
"{'name': 'Paste', 'title': 'Paste_From_Word', 'css': 'wym_tools_paste'}",
"{'name': 'ToggleHtml', 'title': 'HTML', 'css': 'wym_tools_html'}",
#"{'name': 'CreateLink', 'title': 'Link', 'css': 'wym_tools_link'}",
#"{'name': 'Unlink', 'title': 'Unlink', 'css': 'wym_tools_unlink'}",
#"{'name': 'InsertImage', 'title': 'Image', 'css': 'wym_tools_image'}",
"{'name': 'InsertTable', 'title': 'Table', 'css': 'wym_tools_table'}",
#"{'name': 'Preview', 'title': 'Preview', 'css': 'wym_tools_preview'}",
])



WYM_CONTAINERS = ",\n".join([
"{'name': 'P', 'title': 'Paragraph', 'css': 'wym_containers_p'}",
"{'name': 'H1', 'title': 'Heading_1', 'css': 'wym_containers_h1'}",
"{'name': 'H2', 'title': 'Heading_2', 'css': 'wym_containers_h2'}",
"{'name': 'H3', 'title': 'Heading_3', 'css': 'wym_containers_h3'}",
"{'name': 'H4', 'title': 'Heading_4', 'css': 'wym_containers_h4'}",
"{'name': 'H5', 'title': 'Heading_5', 'css': 'wym_containers_h5'}",
"{'name': 'H6', 'title': 'Heading_6', 'css': 'wym_containers_h6'}",
"{'name': 'PRE', 'title': 'Preformatted', 'css': 'wym_containers_pre'}",
"{'name': 'BLOCKQUOTE', 'title': 'Blockquote', 'css': 'wym_containers_blockquote'}",
"{'name': 'TH', 'title': 'Table_Header', 'css': 'wym_containers_th'}",
])



WYM_CLASSES = ",\n".join([
"{'name': 'date', 'title': 'PARA: Date', 'expr': 'p'}",
"{'name': 'hidden-note', 'title': 'PARA: Hidden note', 'expr': 'p[@class!=\"important\"]'}",

"{'name': 'center', 'title': 'PARA: Center', 'expr': 'p'}",
"{'name': 'contentheading', 'title': 'PARA: Center', 'expr': 'p, h1'}",


])

WYM_STYLES = ",\n".join([
"{'name': '.hidden-note', 'css': 'color: #999; border: 2px solid #ccc;'}",
"{'name': '.date', 'css': 'background-color: #ff9; border: 2px solid #ee9;'}",

"{'name': '.center', 'css': 'border: 20px solid #9acd32; text-align:center;'}",
"{'name': '.contentheading', 'css': 'border: 5px solid #9acd32;'}",


])

Многие спросят чего так много?! Это скопированно из стандартных настроек редактора

/usr/local/lib/python2.6/dist-packages/django_cms-2.2-py2.6.egg/cms/plugins/text/settings.py

Там читаем в начале коммент, для тех кто хочет подключить другой редактор, я не стал

и дальше из того что скопировал в свой файл настроек django, поудалял строки такого вида:

WYM_TOOLS = getattr(settings, "WYM_TOOLS", WYM_TOOLS)

этой строкой он лезет в наш settings.py проекта и достаёт то что мы кастомизируем. Можно кастомизировать не всё,

а только то, что нужно.

Теперь по делу

1. WYM_TOOLS - это то что мы хотим видеть из кнопок настройки, или утилит, к примеру я для себя раскоментировал "{'name': 'InsertTable', 'title': 'Table', 'css': 'wym_tools_table'}",

Чтобы появилась возможность добавлять таблицы

2. WYM_CONTAINERS это, как следует из названия контейнеры. :)

Как получилось у меня: для того чтобы применить свойство контейнера для этого нужно было изначально заключить кусок текста в контейнер. Не понятно?

При добавлении контента может случиться так, что вы добавите контент без тега, в смысле, что он не будет заключён в тег параграфа. Тогда вы не сможете применить свойство контейнера.

Так что перед добавлением сначала нажмите пару раз Enter для появления в визуальном просмотре пары контейнеров <p>

2.1 Для того чтобы применить контейнер, к примеру {Heading_1}

Следует текст, который будет выделен этим тегом заключить в отдельный <p>

И тогда уже выделять этот отдельный <p> и выбирать контейнер, они могут переключаться. Т.е, {Heading_1} можно поменять на {Heading_2} не переключаясь сначала в параграф.

Итог: текст для применения свойства контейнер должен находиться в теге <p>

WYM_CLASSES

WYM_CLASSES пример:

"{'name': 'contentheading', 'title': 'PARA: Center', 'expr': 'p, h1'}",

Тут мы приступаем к самому вкусному и не понятному.

Данная строчка позволяет добавлять класс (contentheading) из нашей таблицы стилей сайта к заданным тегам:

'expr': 'p, h1', и отображаться это будет под названием 'title': 'PARA: Center'. Что такое пара, не интересовался. Center можно заменить на своё. Но вообще и работает просто

любой title, например Таблица, такой который будет вам понятен.

Другими словами: Добавили эту строчку, и к тегам p, h1 можем нажатием на PARA: Center задавать класс contentheading заданному тегу.

WYM_STYLES 

Вот эта строчка показывает нам что, если у нас в html коде встречается тег с классом .contentheading, то мы его обводим каёмочкой в 5 пикселей, и красим в цвет.

"{'name': '.contentheading', 'css': 'border: 5px solid #9acd32;'}",

Вроде всё понятно.

Особенность

Заметил такую штуку, что когда мы применили {Classes} к параграфу, а потом решили сделать его всё-таки{Heading_1}, то нужно будет повторно применить класс, иначе он сбросится.