MD Composer 附加内容

是否可以将“构建投票”选项(在桌面端)从额外菜单移出,并放置在其他格式按钮旁边?

就像 你在移动端的请求 一样,这需要更复杂的编辑,我无法在这个主题组件中添加。但按照 angus 和 spirobel 提出的逻辑,在桌面端的自定义组件中实现应该是可行的。

3 个赞

如何移除居中按钮并将左右按钮对齐?

顺便说一句,非常喜欢这个组件。

你好!

您可以在您的主题或组件中添加以下 CSS 代码:

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

我猜您指的是“两端对齐”按钮,因为“左对齐”按钮尚未添加在同一个组件中。

1 个赞

能否将这些新按钮全部移入“选项”按钮/菜单中?

这是可能的,但你需要稍微深入代码研究一下。

在“桌面” > “头部”中,你将找到所有 JavaScript 代码,只需修改几行即可。

例如,工具栏中按钮的代码如下:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "underline_button",
        group: "fontStyles",
        icon: "underline",
        perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
    });
});

你需要将其改为使用以下内容:

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
      action: "underline",
      icon: "underline",
      label: "underline_button"
  };
});

并在以下部分添加操作:

api.modifyClass("controller:composer", {
  actions: {
    underline() {
      this.get("toolbarEvent").applySurround('[u]', '[/u]', "underline_text");
    },
    floatleft() {
      this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
    },
    columns() {
      this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
    }
  }
});

翻译应该没问题。

如果有任何错误,你会很快发现,因为 Discourse 在保存更改时会显示一些错误消息。

5 个赞

很棒的组件 @Steven
如果还能支持 H1、H2 和 H3 就太棒了

2 个赞

能否为这个主题组件添加 [color] [/color] 功能?如果可以,那就完美了,因为这样就能使用官方的 Discourse bbcode+md 编辑器。我目前使用的是格式工具栏 + mdcomposer。当然,我可以用 CSS 隐藏多余的按钮,但在某些地方 CSS 不起作用,比如管理面板或 Pavilion 的 Custom Wizard 插件。颜色按钮的使用频率很高。

这是我使用 CSS 后的效果(非常完美):
image

这是不使用 CSS 时的效果:
image

1 个赞

我的计划是为不想使用插件的用户提供一个组件。不过,我会创建一个带有颜色 BBCode 的分支。如果我有时间,几小时内会尝试一下。准备好后我会通知你,并说明如何安装。

2 个赞

谢谢,下标/上标按钮是继续使用 md 编辑器的原因之一,其他插件和主题组件都缺乏这一功能。官方 bbcode 包含了许多格式化工具栏插件中没有的功能,例如 [spoiler] [/spoiler]。为了兼得两者之长,我认为最好保留 discourse bbcode,然后通过 mdcomposer 添加我们需要的按钮。

我没想到脚本按钮会这么受欢迎,我会把它们保留在基础组件中。

我会创建几个分支:一个只包含一些基本格式按钮的简单分支,以及一个添加颜色 bbcode 的颜色分支。

2 个赞

大家好,

只是想通知大家,md 编辑器中已添加了一个新的 color 分支。现在,您可以结合使用官方的 Discourse bbcode 插件、md 编辑器(color 分支)以及 Discourse spoiler-alert(模糊敏感内容)。我认为这是目前 Discourse 编辑器按钮的最佳组合。

此外,还有一个想法是使用这个免费的库添加颜色选择器:

如果有人愿意帮忙并且知道如何添加颜色选择器,欢迎协助 Steven!

2 个赞

我该如何完全隐藏或移除其中一些按钮?我们只需要其中几个,我注意到移除按钮并不会移除对应的列表项(它仍然会显示为一个没有可见图标的空白区域)。

最佳方法是在您当前的主题中添加一些 CSS 代码。

如果您想隐藏对齐按钮,我提供了以下示例:

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

如果您需要隐藏特定按钮,我也可以为您提供相应的 CSS 代码。

5 个赞

史蒂文,你好,很棒的组件。感谢分享!

有个小问题:是否可以添加一些按钮来插入不间断空格(例如 nbsp ; ensp ; emsp?我应该用什么代替 applySurround?

我的社区里有些成员在格式化帖子(主要是缩进)时遇到困难,我认为这对他们会有帮助。

谢谢!

是的,您可以轻松地添加一个按钮,并且使用 addText 而不是 applySurround

我有一个旧示例供您参考:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "br_button",
        group: "extras",
        icon: "level-down-alt",
        perform: e => e.addText('<br>', 'br_text')
    });
});
3 个赞

太好了!这招管用!

嗯……你的 Discourse Formatting Toolbar 中似乎没有删除线,但这里有。我更喜欢 Formatting Toolbar,因为它包含其他所有功能,甚至更多,但我希望删除线也能作为一个选项。考虑到这两者之间的兼容性问题,你有什么建议吗?

我可以在插件的工具栏中添加一个删除线按钮,这在未来可能很有用。

我会考虑一下,但在此期间,您可以使用该插件并添加此组件:GitHub - MonDiscourse/discourse-strikethrough: Add a strikethrough button in the composer

它将在弹出菜单操作中添加一个删除线按钮,它与该插件兼容。

3 个赞

我提交了一个拉取请求:https://github.com/MonDiscourse/md-composer-extras/pull/10,除非我放错了逗号什么的,否则应该可以修复

为防止测试出错,请在 `modifyClass` 调用中添加 `pluginId` 键。这将确保修改只应用一次。
2 个赞