删除 TinyMCE4 状态栏中的路径

Posted 2023-04-18

【中文标题】删除 TinyMCE4 状态栏中的路径

【英文标题】：Remove path in status bar in TinyMCE4

【发布时间】：2013-06-16 03:04:50

【问题描述】：

我刚刚从 TinyMCE3 迁移到 TinyMCE4，我想知道如何删除状态栏中的路径。但我想保留我的状态栏以便具有调整大小的功能。

使用 TinyMCE3 我们可以做到：

tinymce.init(
    ...
    theme_advanced_path : false
);

如何使用 TinyMCE4 获得相同的结果？

谢谢

【参考方案1】：

在 TinyMCE 4 中，您可以通过将配置 elementpath 设置为 false 来仅删除状态栏中的路径，如下所示：

tinymce.init( elementpath: false );

【讨论】：

也适用于 TinyMCE 5，应该是公认的答案。

【参考方案2】：

这对我有用：

.mce-path /* CSS */
    display: none !important;

编辑：

在TinyMCE4中，我认为没有官方方法可以通过将参数传递给tinymce.init(); 来禁用路径。您可以传递statusbar: false，但不幸的是，这将隐藏路径和调整大小图标！

我使用 CSS 给出的答案隐藏了路径，但调整大小图标仍然存在。但请确保您在tinymce.init(); 中有statusbar: true

【讨论】：

另外.mce-statusbar border-width: 0 !important; 删除了底部的双边框。

【参考方案3】：

tinymce.init(
    statusbar : false,

【讨论】：

谢谢，但如果我这样做，我会丢失状态栏，并且无法调整 TinyMCE 块的大小。

【参考方案4】：

CSS 方法有效，但通常全局应用于页面中的每个编辑器。 TinyMCE 3 的旧选项可以单独应用于不同的编辑器。

我想保持这种灵活性并找到以下解决方案：

a) 定义一个 CSS 规则，例如 .myMceNoPath .mce-pathdisplay:none;

b) 对于应该提供不显示路径的调整大小句柄的编辑器实例，定义以下选项：

resize: "both", 
init_instance_callback : function (ed) 
    ed.getContainer().className += " myMceNoPath";

这会为编辑器元素动态添加一个类，使我们能够仅将 CSS 应用到以这种方式特别标记的编辑器。

【参考方案5】：

很遗憾，TinyMCE 4 已弃用此功能。但是你总是可以通过 CSS 直观地阻止它。它必须看起来像这样：

.mce-path 
 display: none;

【参考方案6】：

TinyMCE 4 中的一个快速解决方案是将路径元素的不透明度设置为透明：

tinymce.init(
    ...
    init_instance_callback: function (editor) 
        $(editor.getContainer()).find(".mce-path").css("opacity", "0");
    
);

这应该隐藏路径文本而不影响状态栏。我发现通过 init() 函数或 CSS display 属性禁用状态栏的可见性也会导致浮动字数和调整大小图标与滚动条重叠。

感谢 immo 和其他人指出回调和 CSS 概念。我喜欢这个特殊的 (jQuery) 解决方案，因为它是独立的，并且仅适用于它的父编辑器，尽管变化是可能的。

【参考方案7】：

tinyMCE.init(
    menubar:false,
    statusbar: false,
        //etc
)

发件人：Remove menu and status bars in TinyMCE 4

【讨论】：

迄今为止的最佳答案，这实际上删除了状态栏

【参考方案8】：

将 theme_advanced_statusbar_location 设置为空字符串对我有用。

tinyMCE.init(

    theme_advanced_statusbar_location : "",
)

【参考方案9】：

我的基于上述 Dustin Carr 的不透明度概念： 对于 TinyMCE 4，我找到了skin.min.css，搜索了mce-path-item，在display:inline-block 之后，我添加了opacity:0。所以它最终类似于display:inline-block;opacity:0; *display...

这只是一个快速的技巧，正如 Carr 所说：当我点击元素时它仍然存在，只是标准用户看不到它。

希望对某人有所帮助...

编辑：mce-divider 也一样 ;)

【参考方案10】：

感谢@Dustin Carr 的回答。 我已经扩展了他的答案，这就是我所做的，它对我来说很好，当用户将光标悬停在路径区域上时，它根本不显示光标（不透明度为 0，它在路径上显示光标和路径仍然可点击）。

tinymce.init(

...
init_instance_callback: function (editor) 
$(editor.getContainer()).find(".mce-path").css("visibility", "hidden");
,

);

HTH

【参考方案11】：

我正在使用 tinyMCE v5。以下作品。 为了隐藏路径，在 init 对象中传递 "elementpath": false 和 "statusbar": false 来隐藏完整的状态栏。如果你隐藏整个状态栏，那么你也将失去增加或减少高度的能力。