Первинна настройка tinymce

Разоб'ем настройку TinyMCE на кілька кроків. Зазвичай потрібно зробити наступне:

Існує думка, що настройка форматування тексту, для самої популярної теми advanced, відбувається в файлі /themes/advanced/skins/default/content.css. Це не так. На ділі, звернення до цього файлу, без додаткової настройки, TinyMCE не робить.

Щоб налаштувати зовнішній вигляд тексту в області редагування TinyMCE, треба зробити наступне:

1. Скопіювати файл /themes/advanced/skins/default/content.css в каталог, де лежать css-файли сайту або CMS. Я зазвичай використовую каталог / css (щодо кореня сайту).

2. Перейменувати скопійований файл з /css/content.css на /css/tinymce.css, бо через деякий час можна забути, звідки з'явився і для чого потрібен файл з назвою "content.css".

3. У налаштуваннях TinyMCE (тобто в настроювальному масиві tinyMCE.init) треба додати опцію:

4. Треба переконатися, що даний файл впливає на TinyMCE. Для цього треба в першому рядку замінити розмір шрифту font-size з 10px на 12px. Ось так:

Цю установку має сенс так і залишити, бо розмір 10px всі вважають занадто дрібним.

5. Оновлюємо сторінку. Для того, щоб побачити зміни оформлення, в деяких браузерах, особливо це стосується Opera, треба обов'язково очистити кеш, щоб перевантажився css-файл.

Багато хто намагається вирішити цю проблему шляхом прописування в настроювальний масив tinyMCE.init наступної настройки:

Цього робити нетреба! По-перше, TinyMCE глючить при роботі з рядками, розділеними тегом
. Про це знають розробники TinyMCE, але безпосередньо не говорять, а настійно не рекомендують користуватися такою налаштуванням. А по-друге, наше завдання зовсім в іншому - треба зробити однаковим міжрядковий інтервал та інтервал між параграфами. Тоді користувачу буде зручно працювати.

Тому, в створений нами файл /css/tinymce.css потрібно додаємо рядок:

За допомогою цього рядка новий пункт не буде відділятися великим відступом, а буде зовні виглядати як новий рядок.

Тепер потрібно зробити так, щоб текст, створений в TinyMCE, відображався на сторінках сайту саме в тому вигляді, в якому він видно в області редагування TinyMCE.

Якщо ми просто підключимо файл /css/tinymce.css до коду сторінки сайту, то нічого доброго з цього не вийде. А чи не вийде тому, що правила, прописані в /css/tinymce.css, написані в "явному вигляді" для всіх основних тегів. Таким чином, просте підключення /css/tinymce.css до HTML-коду сторінки сайту, може порушити верстку сторінки.

Я довго розбирався, яким же чином можна підключити CSS-правила, які використовуються в TinyMCE так, щоб вони впливали тільки на певну область HTML-коду (тобто на ту облась, в якій знаходиться текст, створений за допомогою TinyMCE). В результаті підійшов тільки один метод. Трохи незручний, але зате працює залізобетонно.

Нам потрібно зробити наступне:

1. Скопіювати файл /css/tinymce.css, давши йому ім'я /css/site_tinymce.css. У цьому новому файлі треба перед кожним CSS-правилом прописати рядок ".tinymce". Наприклад, маємо файл /css/tinymce.css з вмістом:

mceItemTable. mceItemTable td. mceItemTable th. mceItemTable caption. mceItemVisualAid

2. Підключаємо файл /css/site_tinymce.css до HTML-коду сторінки сайту:

3. Ту область, де буде подаватись текст, створений в TinyMCE, укладаємо в тег div, із зазначенням класу tinymce:

Таким чином, ми створили CSS-файл правил, які застосовуються тільки до елементів, розташованим всередині тега з класом "tinymce". Тому, ці правила не будуть порушувати верстку сайту. А щоб ці правила використовуються в тексті, створеному в TinyMCE, ми робимо висновок цей текст в тег

Чому такий підхід незручний? Та тому, що тепер потрібно постійно пам'ятати, що якщо щось перенастроїли в файлі /css/tinymce.css, те ж саме потрібно зробити і в файлі /css/site_tinymce.css.

1. У файлі не можна використовувати складні селектори. Селектори повинні бути написані для тегів в явному вигляді, або простими правилами. Внаслідок цього, не працює ідея прописування рядки ".tinymce" перед кожним селектором, і обрамлення з TinyMCE в тег з класом "tinymce".</p> <p>2. У файлі не можна використовувати інклуд інших CSS-файлів. Рядки следущего виду:</p> <p>порушують роботу css-парсера, вбудованого в TinyMCE, і текст починає відображатися абсолютно некоректно.</p> <p>Внаслідок цих обмежень, я поки не бачу іншого рішення, відмінного від ідеї тримати два css-файлу: один для TinyMCE, другий для сторінок сайту.</p> <p>Залишився останній пункт - розібратися, як використовувати в TinyMCE CSS-класи оформлення, використовувані на сайті. Тут довелося зіткнутися з тими ж проблемами, що і в попередній задачі, але до счатью, рішення виявилося досить простим.</p> <p>Отже, у нас є CSS-файл, в якому прописані CSS-правила оформлення, використовувані на сторінках сайту. Нехай це буде файл /css/site.css. Нехай, наприклад в ньому є три ось таких правил:</p> <p>font-family: Verdana, Arial, Helvetica, sans-serif;</p> <p>Ми хочемо, щоб в TinyMCE була можливість форматування тексту саме цими правилами. Зовні це повинно виглядати так - в панелі TinyMCE повинен бути список, що випадає, в ктор буде три пункти:</p> <p>При виборі відповідного пункту, текст повинен форматироваться правилом ".font_big_head", ".font_mini" або ".font_block_code".</p> <p>Зробити таку функціональність неважко. Потрібно в настроювальному масиві tinyMCE.init додати елемент styleselect в якусь лінійку кнопок, наприклад в theme_advanced_buttons2. Ось так це може виглядати:</p> <p>theme_advanced_buttons2. "Fontselect, fontsizeselect, styleselect",</p> <p>Потім треба вказати, який випадає буде показувати елемент styleselect. Для цього в настроювальний масив tinyMCE.init потрібно додати наступну опцію:</p> <p>Однак, незважаючи на правильно генерується HTML-код, в вікні редагування TinyMCE ми не побачимо застосування даного форматування. Чому? Та тому, що CSS-файл /css/site.css з нашими правилами невідомий TinyMCE.</p> <p>Значить, нам треба підключити в TinyMCE два файли - /css/tinymce.css і /css/site.css. Однак, вивчаючи документацію, ми бачимо, що за допомогою опції content_css підключити щось можна тільки один CSS-файл. До того ж, як ми вже з'ясували, підключити один CSS-файл всередині іншого CSS-файлу так само не представляється можливим.</p> <p>Я навіть спробував прописати в масив tinyMCE.init дві опції content_css:</p> <p>але як і очікувалося, ні до чого хорошого це не призвело - зчитується тільки перший файл.</p> <p>Знову довелося лізти в вихідні TinyMCE, і що ж я там побачив? Виявляється, можливість додати кілька css-файлів є, тільки про це в документації не написано. Потрібно просто перерахувати підключаються файли, розділяючи їх імена пропуском / комами. Ось так:</p> <p>content_css: "/css/tinymce.css, /css/site.css",</p> <p>Потрібно відразу обумовити один важливий момент.</p> <p>Пам'ятайте, що ми додавали правило "p, span <margin: 0; padding: 0;>"В файл /css/tinymce.css. Так ось, нульові відступи, задані в цьому правилі, будуть" переважувати "відступи, задані в правилі" .font_block_code ". Це відбувається через те. Що правило, з тегом в селекторі ( p, span), "важить" більше, ніж правило, заданий тільки з використанням імені класу (.font_block_code).</p> <p>font-family: Verdana, Arial, Helvetica, sans-serif;</p> <h4>Схожі статті</h4> <ul> <li> <p><a href="/articles/instrukcija-po-nalashtuvannju-routera-snr-cpe-w4g.php">Інструкція по налаштуванню роутера snr-cpe-w4g, bscom</a></p> </li> <li> <p><a href="/articles/centos-5-nastrojka-internet-shljuzu-z-dhcp.php">Centos 5 настройка інтернет-шлюзу з dhcp-сервером</a></p> </li> <li> <p><a href="/articles/skidannja-domofona-eltis-cp100-rd13-na-zavodski.php">Скидання домофона eltis цп100-rd13 на заводські настройки</a></p> </li> </ul> </div> </article> </div> </div> </div> <footer class="igrzom-footer clearfix"> <ul> <li><a href="/articles/kreditni-karti-dlja-pensioneriv-krashhi-umovi.php">Кредитні карти для пенсіонерів, кращі умови банків</a></li> <li><a href="/articles/shho-take-regenerat.php">Що таке регенерат</a></li> <li><a href="/articles/ditjacha-miska-klinichna-likarnja-7-poliklinichne.php">Дитяча міська клінічна лікарня № 7 поліклінічне відділення № 1 казань, вул</a></li> <li><a href="/articles/medichnij-centr-maks-vell-medichni-visti-novinnij.php">Медичний центр макс-велл - медичні вісті - новинний медичний журнал києва</a></li> <li><a href="/articles/jak-vlashtuvati-den-narodzhennja-hlopcju.php">Як влаштувати день народження хлопцю</a></li> </ul> <p>© Copyright 2016 - 2024 | Всі права захищен</p> <br> <p><a href="/privacy.php">Privacy Policy</a></p> <script type="text/javascript"> document.write("<a href='//www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t50.6;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet' "+ "border='0' width='31' height='31'><\/a>") </script> </footer> </div> </div></body> </html>