问题 TinyMCE高级主题 - 它在哪里?


我正在创建一个下拉列表,其中包含一个类列表,因此我的用户可以将它们应用于链接,段落等。我已经阅读了很多地方,现在 advanced 主题支持这个开箱即用,但我找不到在哪里下载这个主题。

我怀疑高级主题仅仅是Wordpress,因为我发现它包含在wordpress下载中,但不是允许我使用它的格式。

我错过了什么吗?


2110
2018-06-19 17:13


起源

+1好问题 - Thariama
@Thariama - 谢谢,我发现了这个混乱,并在下面回答。 - webnoob


答案:


好的,我发现了混乱所在。

TinyMCE版本3.x包含 advanced 主题,但它没有附带4.0我正在使用。我确实下载了3.x并尝试使用4.0的高级主题,但它不兼容。 Wordpress似乎随附3.x,这就是为什么我认为它只是一个wordpress选项。

有关更多信息 (希望它可以帮助其他人):

现在看来你必须使用 format_styles 和 custom_formats 针对TinyMCE编辑器的选项,使用户能够选择样式。我编写了一些代码来解析我的CSS文件,查找所有内容 H2, 2 etcP 和 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样式格式


15
2018-06-20 10:19



+1用于分享您的解决方案 - Thariama