我正在创建一个包含类列表的下拉列表,以便我的用户可以将它们应用于链接,段落等。由于advanced
主题支持此功能,因此我在很多地方都读过盒子,但我找不到该主题的下载位置。
[我怀疑高级主题仅在这一点上才是Wordpress,因为我发现它包含在wordpress下载中,但没有允许我使用的格式。
我想念什么吗?
好的,我发现了混乱所在。
TinyMCE版本3.x包含advanced
主题,但我所使用的4.0并未附带该主题。我确实下载了3.x,并尝试了4.0的高级主题,但它不兼容。似乎Wordpress附带了3.x,这就是为什么我认为这是唯一的wordpress选项。
有关详细信息(希望它对其他人有帮助):
现在看来,您必须对TinyMCE编辑器使用format_styles
和custom_formats
选项,以使用户能够选择样式。我编写了一些代码来解析我的CSS文件,查找所有H2, 2 etc
,P
和A
类并填充这些选项。这是很长的路要走,但效果很好。真是可惜,没有开箱即用的例程。
我最终将CssParser与以下代码一起使用(C#-复制粘贴此代码无效,但应该为如何做提供很好的指导):
//Declared so we can deserialise into JSON
public class CustomFormat
{
public string title;
public string selector;
public string classes;
}
private void BuildTinyMCECSS()
{
List<string> AllowedTags = new List<string> { "p", "a", "h1", "h2", "h3", "h4", "h5", "h6" };
CssParser StyleSheet = new CssParser();
StyleSheet.AddStyleSheet("MyPath/Styles.css");
//1: Only in our allowed tags. 2: Isn't a pseudo class. 3: Is a class of one of the allowed tags.
foreach (KeyValuePair<string, StyleClass> Style in StyleSheet.Styles.Where(n => AllowedTags.Any(a => n.Key.StartsWith(a) && !n.Key.Contains(':') && n.Key.Contains('.'))))
{
CustomFormat CF = new CustomFormat();
CF.title = Style.Key;
CF.selector = Style.Key.Substring(0, Str.IndexOf('.'));
CF.classes = Style.Key.Substring(Style.Key.IndexOf('.') + 1);
//Note: CCUtils is a static class I use for utilities. Any code to deserialise will work
string JS = String.Format("{1},", Style.Key, CCUtils.SerializeToStringJSON(CF, typeof(CustomFormat)));
Session["JS"] += JS;
}
//Remove the spare comma at the end (ie won't like it)
Session["JS"] = Session["JS"].ToString().Substring(0, Session["JS"].ToString().LastIndexOf(','));
}
我对style_formats
的初始化代码看起来像这样(请注意,我必须重新添加默认选项,因为向style_format
中添加任何内容都会清除它的现有列表。
style_formats:
[{
title: "Headers",
items: [{title: "Header 1",format: "h1"}, {title: "Header 2",format: "h2"}, {title: "Header 3",format: "h3"}, {title: "Header 4",format: "h4"}, {title: "Header 5",format: "h5"}, {title: "Header 6",format: "h6"}]},
{title: "Inline",items: [{title: "Bold",icon: "bold",format: "bold"}, {title: "Italic",icon: "italic",format: "italic"},
{title: "Underline",icon: "underline",format: "underline"}, {title: "Strikethrough",icon: "strikethrough",format: "strikethrough"}, {title: "Superscript",icon: "superscript",format: "superscript"}, {title: "Subscript",icon: "subscript",format: "subscript"}, {title: "Code",icon: "code",format: "code"}]},
{title: "Blocks",items: [{title: "Paragraph",format: "p"}, {title: "Blockquote",format: "blockquote"}, {title: "Div",format: "div"}, {title: "Pre",format: "pre"}]},
{title: "Alignment",items: [{title: "Left",icon: "alignleft",format: "alignleft"}, {title: "Center",icon: "aligncenter",format: "aligncenter"}, {title: "Right",icon: "alignright",format: "alignright"}, {title: "Justify",icon: "alignjustify",format: "alignjustify"}]},
{
title: "Classes", items: [<%= Session["JS"] %>]
}]
有关style_formats
选项的更多信息,可在此处找到:TinyMCE Style Formats
我知道这是一个老问题...但是我时不时地偶然发现这个问题...
如果您正在寻找一种方法来修改工具栏(我一直在寻找):
您可以像这样设置初始化按钮:
tinyMCE.init({
selector: 'textarea.tinymce',
theme : "silver",
toolbar: "bold italic underline strikethrough | alignleft aligncenter"
// and so on...
});