TinyMCE多个自定义类选择

时间:2016-12-15 作者:iMarkDesigns

我想在我的WP TinyMCE编辑器中使用一些类。我在google上搜索了一些脚本/函数,一开始似乎工作得很好。虽然我正在探索向脚本添加更多内容并向editor\\u样式添加样式,但我在“inspect元素”中注意到,我的一些键没有正常工作。

Note: 我使用ShellCreeper 然后跟踪那里的一切。

Current Code Fig. 1

$custom_styles_formats = [
  [ \'title\' => \'Quote\',
    \'items\' => [
      [ \'title\' => \'Quote Left\',  \'block\' => \'blockquote\', \'classes\' => \'alignleft\',  \'icon\' => \'alignleft\' ],
      [ \'title\' => \'Quote Right\', \'block\' => \'blockquote\', \'classes\' => \'alignright\', \'icon\' => \'alignright\' ]
    ]
  ],
  [ \'title\' => \'Buttons\',
    \'items\' => [
      [ \'title\' => \'Button Default\', \'selector\' => \'a\', \'classes\' => \'uk-button uk-button-primary\' ],
      [ \'title\' => \'Button Large\', \'selector\' => \'a\', \'classes\' => \'uk-button uk-button-primary uk-button-large\' ],
      [ \'title\' => \'Button Red\', \'selector\' => \'a\', \'classes\' => \'uk-button uk-button-danger\' ],
    ]
  ],
  [ \'title\' => \'Small\', \'inline\' => \'small\' ],
];
我正在使用UIKit框架,并希望将该样式实现到我的编辑器中。

Case Issue

创建新链接时,请选择Button Default 并切换到另一个按钮类,如:Button Large, 它不会切换类别&;style和我必须删除整个文本才能使用class&;创建新的按钮集;风格这类似于我在切换左对齐和右对齐时的Blockquote。

Note: 我不想在这里使用第三方插件来修改我的一些导航。

1 个回复
最合适的回答,由SO网友:iMarkDesigns 整理而成

好的,我找到了这期TinyMCE的正确格式,其中也保留了一些原始版本Style Format 选择。享受

function my_wpeditor_buttons( $buttons, $editor_id ) {
  if ( \'content\' != $editor_id ) {
    return $buttons;
  }

  array_unshift( $buttons, \'styleselect\' );
  return $buttons;
}
add_filter( \'mce_buttons_2\', \'my_wpeditor_buttons\', 10, 2 );

function my_wpeditor_formats_options( $settings ) {
  $default_style_formats = [
    [ \'title\' => \'Headings\',
      \'items\' => [
        [ \'title\' => \'Heading 1\', \'format\' => \'h1\' ],
        [ \'title\' => \'Heading 2\', \'format\' => \'h2\' ],
        [ \'title\' => \'Heading 3\', \'format\' => \'h3\' ],
        [ \'title\' => \'Heading 4\', \'format\' => \'h4\' ],
        [ \'title\' => \'Heading 5\', \'format\' => \'h5\' ],
        [ \'title\' => \'Heading 6\', \'format\' => \'h6\' ],
      ]
    ], // Headings

    [ \'title\' => \'Inline\',
      \'items\' => [
        [ \'title\' => \'Bold\',        \'format\' => \'bold\',         \'icon\' => \'bold\' ],
        [ \'title\' => \'Italic\',      \'format\' => \'italic\',       \'icon\' => \'italic\' ],
        [ \'title\' => \'Underline\',   \'format\' => \'underline\',    \'icon\' => \'underline\' ],
        [ \'title\' => \'Superscript\', \'format\' => \'superscript\',  \'icon\' => \'superscript\' ],
        [ \'title\' => \'Subscript\',   \'format\' => \'subscript\',    \'icon\' => \'subscript\' ],
        [ \'title\' => \'Code\',        \'format\' => \'code\',         \'icon\' => \'code\' ],
      ]
    ], // Inline

    [ \'title\' => \'Blocks\',
      \'items\' => [
        [ \'title\' => \'Div\',         \'format\' => \'div\' ],
        [ \'title\' => \'Paragraph\',   \'format\' => \'p\' ],
        [ \'title\' => \'Pre\',         \'format\' => \'pre\' ],
        [ \'title\' => \'Blockquote\',  \'format\' => \'blockquote\' ],
      ]
    ], // Blocks

    [ \'title\' => \'Alignment\',
      \'items\' => [
        [ \'title\' => \'Left\',    \'format\' => \'alignleft\',    \'icon\' => \'alignleft\' ],
        [ \'title\' => \'Center\',  \'format\' => \'aligncenter\',  \'icon\' => \'aligncenter\' ],
        [ \'title\' => \'Right\',   \'format\' => \'alignright\',   \'icon\' => \'alignright\' ],
        [ \'title\' => \'Justify\', \'format\' => \'alignjustify\', \'icon\' => \'alignjustify\' ],
      ]
    ], // Alignment
  ];

    $custom_styles_formats = [
        [ \'title\' => \'Header\', \'type\' => \'group\',
            \'items\' => [
                [ \'title\' => \'Headline\', \'selector\' => \'h1,h2,h3\', \'classes\' => \'section-headline\', \'exact\' => \'1\' ],
                [ \'title\' => \'SubHeadline\', \'selector\' => \'h1,h2,h3\', \'inline\' => \'small\', \'classes\' => \'subheadline\', \'exact\' => \'1\' ],
            ]
        ], // Content Headers

        [ \'title\' => \'Buttons\', \'type\' => \'group\',
            \'items\' => [
                [ \'title\' => \'Link\', \'selector\' => \'a, button\', \'classes\' => \'uk-button-link\', \'exact\' => \'1\' ],
                [ \'title\' => \'Button\', \'selector\' => \'a, button\', \'classes\' => \'uk-button uk-button-primary\', \'exact\' => \'1\' ],
                [ \'title\' => \'Large Button\', \'selector\' => \'a, button\', \'classes\' => \'uk-button-large\', \'exact\' => \'1\' ],
            ]
        ], // Buttons

        [ \'title\' => \'Quote\', \'type\' => \'group\',
            \'items\' => [
                [ \'title\' => \'Quote Justify\', \'selector\' => \'blockquote\', \'classes\' => \'align-justify\', \'exact\' => \'1\' ],
                [ \'title\' => \'Quote Right\', \'selector\' => \'blockquote\', \'classes\' => \'align-right\', \'exact\' => \'1\' ],
                [ \'title\' => \'Quote Center\', \'selector\' => \'blockquote\', \'classes\' => \'align-center\', \'exact\' => \'1\' ],
            ]
        ], // Buttons
    ];

  $new_style_formats = array_merge( $default_style_formats, $custom_styles_formats );
  $settings[\'style_formats\'] = json_encode( $new_style_formats );
  return $settings;

}
add_filter( \'tiny_mce_before_init\', \'my_wpeditor_formats_options\' );