Заставить HTML-редактор распознавать / переносить специальные теги CMS - PullRequest
Новая
       35

Заставить HTML-редактор распознавать / переносить специальные теги CMS

0 голосов
/ 14 января 2012

Я планирую использовать экземпляр Markitup (http://markitup.jaysalvat.com/home/) для форматирования HTML на сайте, но надеялся включить кнопки / настройки, специфичные для CMS, с которой я буду извлекать контент. Проблема в том, что пока указанные элементы отформатированы как HTML-теги, редактор не будет распознавать их или позволять оборачивать их содержимым / текстом.

Мне не нужно анализировать теги, мне просто нужен редактор, чтобы иметь возможность вставлять их, но идентифицировать их как HTML в настройках не удается, равно как и идентифицировать их как текст.

Есть ли способ использовать такой редактор, чтобы обернуть пользовательские теги вокруг существующего контента?

То, что я пытаюсь сделать, это, по сути, нажать кнопку в редакторе, ответить подсказками, запрашивающими несколько различных параметров, и затем обернуть оставшиеся выбранные HTML-теги тегами, в результате чего результат будет выглядеть примерно так: это: 

<box title="EXAMPLE" align="LEFT">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl id sem volutpat interdum. Donec ante sapien, tincidunt nec venenatis at, posuere a magna. Suspendisse id metus sapien. Nullam sed rutrum tellus. Integer laoreet sem non lorem elementum ultricies.</box>

1 Ответ

0 голосов
/ 15 января 2012

Никогда не используя Markitup, оказалось, что это довольно просто сделать. Начиная с html demo , вам нужно будет изменить 3 вещи в markitup / sets / html /:

  1. Добавьте изображение для вашей кнопки в папку изображений (или выберите существующее на данный момент).
  2. Добавить ссылку на изображение в style.css. Кажется, что каждая кнопка получает класс на основе своего порядка в ряду кнопок (.markItUpButton1, .markItUpButton2 и т. Д.). Некоторые использовали другой класс (чистый / предварительный просмотр), но все равно были учтены. Поэтому я добавил кнопку в конце, она была 18-го числа, а код был просто: .markItUp .markItUpButton18 a {background-image: url (images / box.png);} В качестве альтернативы вы используете атрибут "className" в set.js и ссылаться на него.
  3. Добавить объект в set.js. Используйте существующие кнопки для сравнения.

Вы можете начать с чего-то простого: 

{name:'Box', openWith:'<box>', closeWith:'</box>'}

Синтаксис для добавления атрибутов немного причудлив, но, опять же, вы можете понять суть, посмотрев на другие кнопки: 

{name:'Box', openWith:'<box title="[![Title]!]" align="[![Align]!]" >', closeWith:'</box>' }

Протестировано и работает как вы описали! Дайте мне знать, если у вас есть вопросы. Самым сложным для меня было понять, что я не могу запустить ни один из примеров без загрузки дополнительных «наборов» (например, html).

...