我们已经部署了一个 Orchard CMS 1.8 站点，内容现在由客户管理。他们遇到的一件事是在 Html 编辑器中将 Bootstrap UI CSS 类添加到他们的内容中。
例如，他们有一些内容并想要创建指向“立即注册”页面的链接。使用工具栏按钮创建锚标记很容易，但在不了解 HTML 的情况下，他们如何在不深入 HTML 的情况下将锚标记转换为 Bootstrap 按钮。
同样知道 Bootstrap 喜欢组合如下类，内容管理器如何从 Html 编辑器工具栏中选择样式组合。
<a href="/register" class="btn btn-primary">Register Now</a>
是否有人建议自定义 TinyMCE 以使内容管理器更容易访问引导类？
谢谢， 布赖恩
【问题讨论】：
标签： content-management-system tinymce orchardcms orchardcms-1.8
在您的主题中；添加 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 文件将在您的编辑器中使用。
我一直在使用它，所以我的客户可以真正拥有真正的所见即所得体验。
【讨论】：
一种方法是将引导样式添加到 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
【讨论】：