Классы CSS Bootstrap Orchard CMS в HTML-редакторе

У нас есть развернутый сайт Orchard CMS 1.8, и теперь его контентом управляет клиент. У них есть проблема с добавлением CSS-классов Bootstrap UI к своему контенту в HTML-редакторе.

Например, у них есть какой-то контент, и они хотят создать ссылку на страницу «Зарегистрироваться сейчас». Достаточно легко создать тег привязки с помощью кнопок на панели инструментов, но без знания HTML, как можно превратить этот тег привязки в кнопку Bootstrap, не углубляясь в HTML.

Кроме того, зная, что Bootstrap любит комбинировать классы, как показано ниже, как контент-менеджер может выбрать комбинацию стилей на панели инструментов Html Editor.

<a href="/register" class="btn btn-primary">Register Now</a>

Есть ли у кого-нибудь рекомендации по настройке TinyMCE, чтобы сделать классы начальной загрузки более доступными для менеджера контента?

Спасибо, Брайан


content-management-system orchardcms tinymce orchardcms-1.8
person Brian Behm    schedule 07.07.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В вашей теме; добавьте ResourceManifest и создайте ссылку на файл Javascript. 

manifest.DefineScript("OrchardTinyMce").SetVersion("1.1").SetUrl("orchard-tinymce.js").SetDependencies("TinyMce");

этот файл js будет переопределением настройки TinyMCE. Убедитесь, что имя сценария такое же, а версия всегда выше, чем та, которая используется в модуле TinyMCE. 

var mediaPlugins = ",|";

if (mediaPickerEnabled) {
    mediaPlugins += ",mediapicker";
}

if (mediaLibraryEnabled) {
    mediaPlugins += ",medialibrary";
}

tinyMCE.init({
    theme: "advanced",
    schema: "html5",
    mode: "specific_textareas",
    editor_selector: "tinymce",
    plugins: "fullscreen,searchreplace,inlinepopups" + mediaPlugins.substr(2),
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo" + mediaPlugins + ",|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,blockquote,styleselect,|,code,fullscreen,",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_resizing : true,
    convert_urls: false,
    content_css: "/Themes/[*YOUR-THEME-NAME*]/Styles/custom.css",
    valid_elements: "*[*]",
    // shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
    extended_valid_elements: "script[type|defer|src|language]"
});

Как видите, теперь вы можете настроить TinyMCE по своему усмотрению. Обратите внимание на свойство content_css. Этот файл css будет использоваться в вашем редакторе.
Я использую его постоянно, поэтому мои клиенты действительно могут получить настоящий WYSIWYG-опыт.

person ErMasca    schedule 13.07.2014
comment
Не могли бы вы объяснить, что значит создать ResourceManifest? - person Tim Long; 22.02.2015
comment
ResourceManifest похож на Bundles в MVC. похоже, но не то же самое. посмотрите: stackoverflow.com/questions/10243345/ - person ErMasca; 22.02.2015

arrow_upward
0
arrow_downward

Один из способов сделать это — добавить стили начальной загрузки в style_formats в конфигурации tinymce.

Вот один из способов сделать это, добавив в orchard-tinymce.js

style_formats: [
        {
            title: 'Typography', items: [
                {
                    title: 'Body Copy', items: [
                        { title: 'Lead Body Para', block: 'p', classes: 'lead' }
                    ]
                },
                {
                    title: 'Inline Text', items: [
                        { title: 'Small', inline: 'small' },
                        { title: 'Highlight', inline: 'mark' },
                        { title: 'Deleted', inline: 'del' },
                        { title: 'Strikethrough', inline: 's' },
                        { title: 'Insert', inline: 'ins' }
                    ]
                },

Полная реализация здесь:

https://www.bhavindoshi.com/blog/bootstrap-style-formats-in-tinymce-orchard-or-other-cms

person bdoshi    schedule 20.09.2016