TinyMCE-工具栏上的自定义CSS样式菜单

如何解决TinyMCE-工具栏上的自定义CSS样式菜单

我已经用单个.test类设置了一个简单的CSS文件，并在TinyMCE中进行了以下设置，我得到了两个菜单，都在顶部显示“段落”。如何编辑CSS样式菜单

  tinymce.init({
        selector: '#tiny',menubar:false,'content_css': 'my-styles.css',importcss_append: false,style_formats_merge: true,plugins: ['importcss'],toolbar: 'code| insertfile undo redo searchreplace | paste pastetext | formatselect | styleselect '
        });

格式菜单

css样式菜单

解决方法

这是一个可行的示例，以防其他人正在寻找：

content_style:
'.news-img-left { float: left;margin:1em 1em 1em 0;max-width:400px;height:auto }' +
'.news-img-right { float: right;margin:1em 0 1em 1em;max-width:400px;height:auto }' +
'.news-img-full { margin:1em 0;width:100%;max-width:100%;height:auto }',style_formats: [
{ title: 'Text Formats' },{ title: 'Paragraph',format: 'p' },{ title: 'Heading 1',format: 'h1' },{ title: 'Heading 2',format: 'h2' },{ title: 'Heading 3',format: 'h3' },{ title: 'Image Formats' },{ title: 'Image Full Width',selector: 'img',classes: 'news-img-full' },{ title: 'Image Left',classes: 'news-img-left' },{ title: 'Image Right',classes: 'news-img-right' },],

然后在工具栏中添加按钮'styleselect'

,

TinyMCE Github issuetracker中也曾问过这个问题，为了完整性，我将在此处复制答案。

formatselect和styleselect均显示当前使用的format。默认格式为“段落”，基本上与<p>标签匹配。

styleselect实际上与CSS样式没有任何关系，更多地从视觉外观方面考虑。 styleselect和formatselect之间的区别主要在于可用的配置选项中：

• formatselect按钮由block_formats option配置，非常简单。
• styleselect按钮是通过style_formats option配置的，并且更为高级。它可以包含嵌套菜单，具有组等。