wymeditor — форматирование заголовков в таблице стилей

Я пытаюсь использовать в wymeditor те же стили, что и на моем веб-сайте. К сожалению, этот редактор практически не документирован, поэтому я не знаю, как это сделать.

документация предполагает, что вы можете использовать таблицу стилей, в которой вы определяете все в какую-то форму, и она будет проанализирована и использована в редакторе. Я мог бы сделать это, но только с классами (второе поле на правой панели). В документации есть пример, но только для классов, а не для контейнеров. Есть ссылка на полную таблицу стилей, но она не работает, и таблица стилей используемые в примерах определяют только классы, а не контейнеры.

Итак, как мне сделать, например, красный h1 в редакторе? Или хотя бы в предварительном просмотре.

Я был бы очень рад, если бы кто-нибудь связал или привел полный пример таблицы стилей, в которой контейнеры, такие как h1 и p, также отформатированы и используются в редакторе. Если это невозможно, каковы другие способы сделать это?


ИЗМЕНИТЬ:

Я мог бы внедрить CSS в iframe с помощью postInit:

postInit: function(wym) {
    var $head = $(wym._box).find('iframe').contents().find("head");
    $head.append($("<link/>", { 
        rel: "stylesheet",
        href: costumIframeCss,
        type: "text/css"
     }));
}

Теперь единственное, что мне нужно, это сделать то же самое, что и в диалоговом окне предварительного просмотра. Возможно, с помощью postInitDialog(wym,wdw). Я еще не знаю как. Большая проблема заключается в том, что мне нужно отличать диалог предварительного просмотра от других диалогов.


person Máthé Endre-Botond    schedule 21.12.2012    source источник


Ответы (2)


Обновление:

Я видел, что у вас есть доступ к диалоговому окну как wdw при использовании postInitDialog. Это классно. То, как вы это сделали (смотря на ваше обновление), то же самое вы можете сделать и для Diaolog.

Посмотрите на следующее изображение. Я отладил диалоговое окно предварительного просмотра, когда оно открывается.
Посмотрите на строку №. 41

Проверка предварительного просмотра

Следуя тому, что вы сделали с редактором, то же самое можно сделать со строкой Preview At №. 41, вы можете получить head и таким же образом добавить стиль

var $head = $(wdw.document.body);
$head.append($("<link/>", { 
    rel: "stylesheet",
    href: customPreviewCss, // CSS for Preview Dialog
    type: "text/css"
}));

Первоначальный ответ:

Насколько я понимаю, вы хотите, чтобы стили действовали во время редактирования. В идеале, для создания h1 красного цвета при редактировании (или любой подобной настройке) у вас есть только следующие варианты:

  • Используйте правильные классы, как объяснено в документации. В этом и заключается основная цель редактора. Настройка должна быть сделана поверх того, что есть
  • Редактировать таблицу стилей по умолчанию, которую вы связали или загружаете, когда редактор активен (это можно проверить с помощью элемента проверки). Это объясняется ниже.

Я вижу, что когда вы используете редактор, он загружается в файл iframe. iframe имеет свои стили. Теперь осмотрите элемент. В вашем случае это h1, но я использую тег p из примера

Проверка самого редактора

Обратите внимание, что он загружает стили из другого файлаwymiframe.css, строка №. 51 для тега p

Поэтому, если вы хотите изменить или добавить свои собственные стили, перейдите в этот файл. (Если вы наведете его, вы получите путь к файлу или щелкните правой кнопкой мыши и открыть в новой вкладке и проверьте в адресной строке)
Добавить или изменить стиль h1 там. Готово.
Кроме того, вы можете перейти к соответствующему файлу html в папке wymeditor/iframe/default. Добавьте свой собственный link в свой собственный файл css. В этом файле делаем все нужные настройки :)

Надеюсь, это помогло!

person Om Shankar    schedule 27.12.2012
comment
Значит ли это, что параметр таблицы стилей предназначен только для классов? И поэтому я не могу определить контейнеры внутри него? - person Máthé Endre-Botond; 27.12.2012
comment
Это приемлемые крайние решения, но ни одно из них не является настолько динамичным, как хотелось бы. Я надеялся на что-то вроде: $('textarea').wymeditor(iframeCss: 'style.css'); но, основываясь на том, что вы сказали, я получил довольно хорошую идею об использовании параметра настройки iframeHtml для создания именно этого. - person Máthé Endre-Botond; 27.12.2012
comment
@SinistraD, за ваш 1-й комментарий. Если я правильно понимаю, таблица стилей будет иметь определения для тегов DOM. Чтобы иметь возможность определять контейнеры внутри него, ребята из wymeditor должны включить его. Это заставляет меня ответить на ваш второй комментарий: wymeditor человек должны включить функцию, чтобы вы могли использовать $('textarea').wymeditor(iframeCss: 'style.css');. На данный момент, в отсутствие этой функции, включенной wymeditor, я думаю, что мой ответ должен работать. Если да, и если вы примете ответ, я буду рад - person Om Shankar; 28.12.2012
comment
@SinistraD, обновил мой ответ, глядя на ваше обновление на вопрос - person Om Shankar; 28.12.2012
comment
Я мог заставить это работать. Вы не ответили на весь вопрос, а только на его части (необходимые части), поэтому я не буду отмечать это как решение, но я дам вам награду, потому что вы этого заслуживаете. Спасибо за помощь. - person Máthé Endre-Botond; 28.12.2012
comment
@SinistraD, спасибо. Вы проверили мой обновленный ответ? Я предполагаю, что теперь вы хотели добавить пользовательские стили в диалог предварительного просмотра, что вы уже сделали для редактора. Итак, я отладил Popup редактора default с сайта. Я обнаружил, что вы можете сделать то же самое и в Popup. Когда вы создаете wymeditor, у вас есть postInitDialog, в котором есть доступ к wdm. Стили могут быть добавлены туда, как описано в моем обновленном ответе. - person Om Shankar; 28.12.2012

Как видите, это всего лишь образцы. Вы не можете использовать это как онлайн-редактор. Вам придется скачать это и попробовать использовать его.

http://files.wymeditor.org/wymeditor-0.5/examples/

Выше показан список примеров. В том, что вы пробовали с первой ссылкой.

Чтобы скачать его, перейдите по этой ссылке.

http://www.wymeditor.org/download/

Выберите последние стабильные версии для меньшего количества недостатков.

Надеюсь это поможет.

И, как вы просили, это работает очень хорошо в предварительном просмотре, при отправке ничего не отражается.

Чтобы добиться этого в предварительном просмотре, щелкните значок HTML, который присутствует на предпоследней позиции.

Напишите свой собственный код, нажав на предварительный просмотр, вы получите результат в новом всплывающем окне.

person Arunkumar Srisailapathi    schedule 23.12.2012
comment
Я не думаю, что вы поняли мой вопрос. Я знаю, что мне нужно скачать его, и я также знаю, как его установить. Мой вопрос был в том, как мне использовать собственные стили заголовков в редакторе? И/или как добавить свой собственный CSS во всплывающее окно предварительного просмотра? - person Máthé Endre-Botond; 23.12.2012