Добиться, чтобы текст внутри редактора TinyMCE отбражался согласно заданному набору. Чтобы отключить автоматическое обрамление тегом <p> строк в.
Первичная настройка Tiny. MCE. Обычно нужно сделать следующее: Добиться, чтобы текст внутри редактора Tiny. MCE отбражался согласно заданному набору CSS- правил. Добиться, чтобы курсор при нажатии Enter перепрыгивал вниз на высоту строки. Добиться, чтобы текст, написанный в Tiny. MCE, выглядел на сайте так же, как и в редакторе. Разобраться, как использовать в Tiny. MCE CSS- классы оформления, используемые на сайте. Итак, по- порядку. В первую очередь надо добиться, чтобы текст внутри редактора Tiny. MCE выглядел так, как нам надо. То есть, нужно настроить CSS- файл, в котором прописаны CSS- правила отображения текста в Tiny. MCE. Существует мнение, что настройка форматирования текста, для самой популярной темы advanced, происходит в файле /themes/advanced/skins/default/content. На деле, обращения к этому файлу, без дополнительной настройки, Tiny. MCE не делает. Чтобы настроить внешний вид текста в области редактирования Tiny. MCE, надо сделать следующее: 1. Скопировать файл /themes/advanced/skins/default/content. CMS. Я обычно использую каталог /css (относительно корня сайта). Переименовать скопированный файл с /css/content. В настройках Tiny. MCE (т. е. Надо убедиться, что данный файл влияет на Tiny. MCE. Для этого надо в первой строчке заменить размер шрифта font- size с 1. Вот так: body, td, pre . Для того, чтобы увидеть изменения оформления, в некоторых браузерах, особенно это касается Opera, надо обязательно очистить кеш, чтобы перегрузился css- файл.* * *Далее нам необходимо сделать так, чтобы курсор при нажатии Enter перепрыгивал на следущую строчку, а не делал большой отступ, показывая создание нового параграфа. Как показывает практика, появление большого отступа при нажатии Enter в Tiny. MCE вызывает ступор у многих пользователей. Связано это с тем, что в . А в Tiny. MCE, по умолчанию, интервал между параграфами больше, чем межстрочный. Многие пытаются решить эту проблему путем прописывания в настроечный массив tiny. MCE. init следующей настройки: force! Во- первых, Tiny. MCE глючит при работе со строками, разделенными тегом < br>. Об этом знают разработчики Tiny. MCE, но напрямую не говорят, а настоятельно не рекомендуют пользоваться такой настройкой. А во- вторых, наша задача совсем в другом - надо сделать одинаковым межстрочный интервал и интервал между параграфами. Тогда пользователю будет удобно работать. Поэтому, в созданный нами файл /css/tinymce. А не выйдет потому, что правила, прописанные в /css/tinymce. Таким образом, простое подключение /css/tinymce. HTML- коду страницы сайта, может нарушить верстку страницы. Я долго разбирался, каким же образом можно подключить CSS- правила, используемые в Tiny. MCE так, чтобы они влияли только на определенную область HTML- кода (то есть на ту облась, в которой находится текст, созданный с помощью Tiny. MCE). В результате подошел только один метод. Немного неудобный, но зато работающий железобетонно. Нам нужно сделать следующее: 1. Скопировать файл /css/tinymce. В этом новом файле надо перед каждым CSS- правилом прописать строку . Например, имеем файл /css/tinymce. Подключаем файл /css/site. Ту область, где должен выводиться текст, созданный в Tiny. MCE, заключаем в тег div, с указанием класса tinymce: < div class=. Посему, эти правила не будут нарушать верстку сайта. А чтобы эти правила применялись к тексту, созданному в Tiny. MCE, мы заключаем этот текст в тег < div class=? Да потому, что теперь нужно постоянно помнить, что если что- то перенастроили в файле /css/tinymce. Например, можно было бы иметь один CSS- файл (с содержимым /css/site. Тогда б и текст внутри редактора, и текст на страницах сайта управлялось бы одним CSS- файлом. Почему бы так не сделать? Отвечаю. На самом деле, CSS- файл, подключаемый через опцию content. Он нигде в Tiny. MCE не подключается в том виде, в котором считан. Вместо этого он парсится ява- скриптом, и свойства отображения текста применяются динамически. Эксперименты и изучение кода Tiny. MCE (v. 3. 3. 6 от 2. Вот эти ограничения: 1. В файле нельзя использовать сложные селекторы. Селекторы должны быть написаны для тегов в явном виде, либо простыми правилами. Вследствие этого, не работает идея прописывания строки . В файле нельзя использовать инклуд других CSS- файлов. Строки следущего вида: @import . Здесь пришлось столкнуться с теми же проблемами, что и в предыдущей задаче, но к счатью, решение оказалось достаточно простым. Итак, у нас есть CSS- файл, в котором прописаны CSS- правила оформления, используемые на страницах сайта. Пусть это будет файл /css/site. Пусть, к примеру в нем есть три вот таких правила. Внешне это должно выглядеть так - в панеле Tiny. MCE должен быть выпадающий список, в ктором будет три пункта: Большой заголовок. Мелкий текст. Код. При выборе соответсвующего пункта, текст должен форматироваться правилом . Нужно в настроечном массиве tiny. MCE. init добавить элемент styleselect в какую- нибудь линейку кнопок, например в theme. Вот так это может выглядеть.. Для этого в настроечный массив tiny. MCE. init нужно добавить следующую опцию.. А если выбрать пункт . Да потому, что CSS- файл /css/site. Tiny. MCE. Значит, нам надо подключить в Tiny. MCE два файла - /css/tinymce. Однако, изучая документацию, мы видим, что с помощью опции content. К тому же, как мы уже выяснили, подключить один CSS- файл внутри другого CSS- файла так же не представляется возможным. Я даже попробовал прописать в массив tiny. MCE. init две опции content. Оказывается, возможность добавить несколько css- файлов есть, только об этом в документации не написано. Нужно просто перечислить подключаемые файлы, разделяя их имена пробелом/запятыми. Помните, что мы добавляли правило ? Так вот, нулевые отступы, заданные в этом правиле, будут . Это происходит из- за того. То есть, вместо вышеприведенных правил.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |