0

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

例如，他们有一些内容并想要创建指向“立即注册”页面的链接。使用工具栏按钮创建锚标记很容易，但在不了解 HTML 的情况下，他们如何在不深入 HTML 的情况下将锚标记转换为 Bootstrap 按钮。

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

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

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

谢谢，布赖恩

4

2 回答 2

0

在你的主题中；添加 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 文件将在您的编辑器中使用。
我一直在使用它，所以我的客户可以真正拥有真正的所见即所得体验。

于 2014-07-13T08:33:59.110 回答
0

一种方法是将引导样式添加到 tinymce 配置中的 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

于 2016-09-20T22:24:37.793 回答