我刚刚从TinyMCE 3迁移到TinyMCE 4,我想知道如何删除状态栏中的路径。但我想保留我的状态栏以获得调整大小功能。
使用TinyMCE3,我们可以做到:
tinymce.init({
...
theme_advanced_path : false
});
如何使用TinyMCE4获得相同的结果?
谢谢
这对我有用:
.mce-path {/* CSS */
display: none !important;
}
编辑:
在TinyMCE4中,我认为没有官方方法可以通过将参数传递给tinymce.init();
来禁用路径。你可以传递statusbar: false
,但不幸的是,这将隐藏路径和调整大小图标!
我使用CSS给出的答案隐藏了路径,但调整大小图标仍然存在。但要确保你在statusbar: true
有tinymce.init();
感谢@Dustin Carr的回答。我已经扩展了他的答案,这就是我所做的,它适用于我,当用户将光标悬停在路径区域上时根本不显示光标(使用不透明度0,它将光标显示在路径上路径仍然可点击)。
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("visibility", "hidden");
},
});
HTH
我正在使用tinyMCE v5。以下是有效的。为了隐藏Path,在init对象中传递“elementpath”:false,并在“statusbar”:false中传递以隐藏完整的状态栏。如果隐藏整个状态栏,那么您也将失去增加或减少高度的能力。
在TinyMCE 4中,您可以通过将配置元素路径设置为false来删除状态栏中的路径,如下所示:
tinymce.init({ elementpath: false });
tinymce.init({
statusbar : false,
CSS方法有效,但通常全局应用于页面中的每个编辑器。 TinyMCE 3的旧选项可以单独应用于不同的编辑器。
我想保持这种灵活性并找到以下解决方案:
a)定义像.myMceNoPath .mce-path{display:none;}
这样的CSS规则
b)对于应该提供没有路径显示的调整大小句柄的编辑器实例,定义以下选项:
resize: "both",
init_instance_callback : function (ed) {
ed.getContainer().className += " myMceNoPath";
}
这会动态地向编辑器元素添加一个类,使我们只能将CSS应用于以这种方式标记的编辑器。
不幸的是,在TinyMCE 4中不推荐使用此功能。但是你总是可以通过CSS直观地阻止它。它必须看起来像这样:
.mce-path {
display: none;
}
TinyMCE 4中的一个快速解决方案是将path元素的不透明度设置为透明:
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("opacity", "0");
}
});
这应该隐藏路径文本而不会影响状态栏。我发现通过init()函数或CSS显示属性禁用状态栏的可见性也会导致浮动字数和调整大小图标与滚动条重叠。
感谢immo和其他人指出回调和CSS概念。我喜欢这个特殊的(jQuery)解决方案,因为它是自包含的,仅适用于其父编辑器,尽管可能存在变化。
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
将theme_advanced_statusbar_location设置为空字符串对我有用。
tinyMCE.init({
theme_advanced_statusbar_location : "",
})
我的基于Dustin Carr上面的不透明概念:对于TinyMCE 4,我找到skin.min.css
,搜索mce-path-item
并且在display:inline-block
之后,我添加了opacity:0
。所以它最终是像display:inline-block;opacity:0; *display...
这只是一个快速的技巧,正如卡尔所说:当我点击它时,元素仍然存在,它只是标准用户看不到它。
希望它可以帮助一些人......
编辑:mce-divider相同;)