Orchard CMS Bootstrap CSS Classes in Html Editor

0
votes

We have an Orchard CMS 1.8 site that has been deployed and the content is now managed by the customer. One thing they are having a problem with is adding Bootstrap UI CSS classes to their content in the Html editor.

For example, they have some content and want to create a link to a "Register Now" page. It's easy enough to create the anchor tag using the toolbar buttons but without knowledge of HTML how would they turn that anchor tag into a Bootstrap button without diving into the HTML.

Also knowing that Bootstrap likes to combine classes like the following, how could a content manager pick a combination of styles from the Html Editor toolbar.

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

Does anyone have a recommendation for customizing TinyMCE to make bootstrap classes more accessible to a content manager?

Thanks, Brian

2
content-management-systemtinymceorchardcmsorchardcms-1.8

2 Answers

0
votes

In Your Theme; add a ResourceManifest and create a reference to a Javascript file. 

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

this js file will be a TinyMCE customisation override. Make sure the ScriptName is the same and the version is always higher than the one at use in the TinyMCE module. 

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]"
});

As you can see, now you can customise TinyMCE at will. Take note of the content_css property. That css file will be used in your Editor.
I use it all the time, so my clients can really have a true WYSIWYG experience.

0
votes

One way to do this is to add bootstrap styles into style_formats in tinymce configuration.

Here is one way to do it by adding to 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' }
                    ]
                },

Complete implementation is here:

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