Question

我们已经部署了Orchard CMS 1.8站点，其内容现在由客户管理。他们遇到问题的一件事是在Html编辑器中将Bootstrap UI CSS类添加到他们的内容中。

例如，他们有一些内容，并希望创建一个指向＆＃34;立即注册＆＃34;页。使用工具栏按钮创建锚标记很容易，但不知道HTML如何将该锚标记转换为Bootstrap按钮而不会潜入HTML。

同时知道Bootstrap喜欢组合如下所示的类，内容管理器如何从Html编辑器工具栏中选择样式组合。

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

是否有人建议自定义TinyMCE以使内容管理器更容易访问引导类？

谢谢，布赖恩

Answer 1

在你的主题中;添加ResourceManifest并创建对Javascript文件的引用。

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

这个js文件将是TinyMCE自定义覆盖。确保ScriptName相同且版本始终高于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体验。

Answer 2

执行此操作的一种方法是在tinymce配置中将bootstrap样式添加到style_formats中。

这是通过添加到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

Html编辑器中的Orchard CMS Bootstrap CSS类

2 个答案: