如何在TinyMCE 4.0.10版本中使用importcss插件?(无法加载content_css并查看样式下拉列表)

How to use importcss plugin in TinyMCE Version 4.0.10 ? (Unable to load content_css and see a dropdown of styles)

本文关键字:content 加载 css 下拉列表 样式 TinyMCE 版本 importcss 插件      更新时间:2023-09-26

我们使用的是最新的TinyMCE 4.0.10 版本

我们需要加载content_css,并在styleselect菜单中看到样式的下拉列表。

根据TinyMCE 4.x的文档,我们尝试使用importcss插件来实现这一点。

但我们无法在样式选择菜单中看到样式的下拉列表。

以下是相同的代码片段:

theme: "modern",
menubar : false,
statusbar: false,
plugins: [
"advlist autolink lists autoresize link image charmap print preview hr anchor",
"searchreplace wordcount visualblocks visualchars code fullscreen pagebreak",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons paste textcolor spellchecker template noneditable importcss"
],
contextmenu: "cut copy paste | image inserttable",
toolbar1: button1,
toolbar2: button2,

toolbar_items_size: 'small',

content_css: "/CSS/user.css",

style_formats: [{title: 'Example 1', inline: 'span', classes: 'example1'}],

importcss_append: true

在这里,button1,button2在运行时获得正确呈现工具栏菜单的值。

下面是user.css:

body {
background-color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
}

td {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
}

pre {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
}

.example1 {
font-size: 14px;
font-weight: bold;
}

.example2 {
color: #FF0000;
font-size: 12px;
font-weight: bold;
}

.tablerow1 {
background-color: #BBBBBB;
}

我们期待的是:

类example1、example2、tablerow1应该动态加载在styleselect/Formats下拉菜单中,而不是硬编码(通过在style_Formats配置选项中定义它们)

如果我们遗漏了什么,请告诉我们。

提前谢谢。

代码对我来说很好。除了CSS文件路径。试试这个

content_css: "CSS/user.css" instead of content_css: "/CSS/user.css"