格式工具栏

自定义 插件
148

我想我可能无法做到这一点。当我创建该插件时，我们还没有使用 FontAwesome5，我没有找到一个合适的右缩进图标。如果你有

但如果你想更改默认按钮，你有两种解决方案：

通过以下 CSS 隐藏左浮动按钮：

/* 左浮动按钮 */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

然后导入一个主题组件，该组件将添加一个右浮动按钮。

你可以使用这个：discourse-floatr.zip|附件 (1.2 KB)

这是我在 Discourse Theme 上刚刚创建的一个主题组件，用于添加一个右浮动按钮，其图标与之前的左浮动按钮相同。

https://theme-creator.discourse.org/theme/Steven/floatr

1 个赞
149

Steven！你真是个天才！非常感谢你为此付出的额外努力 :folded_hands:

我选择了选项 2，因为我完全不知道如何 fork 并修改一个插件！

一切运行完美，现在那个按钮完全符合我们的需求！

1 个赞
150

还有一个问题……有没有简单的方法可以将特定按钮从主栏移走，并隐藏到齿轮图标菜单中？

例如：

image
image956×417 105 KB

我非常喜欢这个插件提供的所有工具，但我认为大多数用户可能不会使用丰富的格式化选项，因此我想为他们简化界面。如果能让用户体验更简洁清晰，我在撰写帖子时多一次点击也无妨。

151

简单的方法不行。它需要一些修改，就像 floatr 按钮那样。

要么 fork 并编辑该插件，要么隐藏它们并在工具栏弹出菜单选项中重新创建它们。

你可以参考我的主题组件，了解如何在此菜单中添加一些选项。或者，我可以修改我创建的 floatr 组件，将按钮添加到弹出菜单选项中，之后你可以轻松完成剩余工作。

https://github.com/iunctis/md-composer-extras

152

首先，再次感谢你对 floatr 按钮的优化！我已经使用过它好几次了，非常高兴不再需要在 floatl 和 floatr 之间来回切换！非常感谢！！！

我希望将来能更深入地学习，掌握编辑和创建插件的方法。我很乐意回馈社区，为像您这样的开发者所取得的卓越成果添砖加瓦。

如果您能将那些额外的按钮添加到齿轮图标的“弹出菜单”中，让普通用户看到的选项更少，那就太好了。我熟悉 CSS，也擅长通过检查浏览器元素来找到需要修改的类名或 ID。我是否也能对您的“组件”进行类似操作，查看其代码语法，从而轻松决定哪些按钮应保留在菜单中、哪些应移除，或者重新放回工具栏？还是说这要复杂得多？

153

这更复杂，因为它没有使用相同的 JavaScript。

我创建了一个快速示例：如果你想在编辑器中添加删除线按钮，必须使用以下 JavaScript：

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "strike_button",
        group: "fontStyles",
        icon: "strikethrough",
        perform: e => e.applySurround('<s>', '</s>', 'strike_text')
    });
});

但对于工具栏菜单选项，则完全不同：

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "strike",
    icon: "strikethrough",
    label: "strike_button"
  };
});

api.modifyClass("controller:composer", {
  actions: {
    strike() {
      this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
    },
  }
});

我尚未添加工具栏选项所需的翻译等内容，但你应该明白大致思路。

我缺乏在工具栏和菜单选项之间进行选择并相应调整 JavaScript 的知识。我曾尝试添加一些选项来启用/禁用某些按钮，起初有效，但最近失效了，我也不太清楚如何修复。因此，我不得不为大多数用户做出选择。

无论如何，如果你希望保留 bbcode，但将按钮转移到菜单选项中，我认为最好的方法是保留插件，通过 CSS 隐藏按钮，并使用主题组件在菜单选项中添加按钮。这完全可行，因为我们之前为浮动按钮做过类似的事情。这需要一些时间，但如果你在这个问题上感到困惑，我可以提供帮助。

对于主题组件，最好使用 Discourse Theme。你可以为组件添加设置、翻译和代码，并预览效果。这对创作者来说是一个非常出色的工具。

2 个赞
154

你太棒了，@Steven！感谢你的详尽回复。我想先看看社区如何适应所有选项，如果听到大家觉得困惑，我就会采用你提到的第二种方法，即使用主题组件。这种方法对我来说非常清晰。

再次感谢你的帮助，以及对这个出色插件的支持。顺便说一句……我对帮你将默认浮动按钮改为“右侧”这件事感激不尽，效果太棒了！

155

快速提问：在我们的主题中，若要为编辑器中的按钮实现不同的操作，需要修改 api.onToolbarCreate 代码中的哪些部分？

基本上，我们想添加一个新的编辑器按钮，使其能在多行代码块周围包裹以下 Markdown：

```text

```

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
    });
});

这样，结果就能包裹整个多行代码块，而不是为每一行单独添加我们的新操作？

按钮操作前：

Screen Shot 2020-04-08 at 7.02.47 PM
Screen Shot 2020-04-08 at 7.02.47 PM860×209 11.8 KB

按钮操作后：

Screen Shot 2020-04-08 at 7.02.53 PM
Screen Shot 2020-04-08 at 7.02.53 PM2048×858 130 KB

我猜应该有一个不同于 e.applySurround 的方法，可以作用于多行文本块？但在网站上搜索以及使用 Google 搜索都没有找到相关内容，所以搜索了 30 分钟后决定发帖提问。

另外，我也在 https://docs.discourse.org/ 上用各种关键词搜索过，但同样没有收获。

谢谢，

156

通过更多谷歌搜索，我找到了方法/参数 multiline: false。

perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )

});
api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
    });
});

所以，我已经准备好了。谢谢。

157

如果我理解有误请纠正，官方的 Discourse bbcode 已经打包在最新的 Discourse 中。如果我安装这个插件，会冲突吗？我想要这个格式工具栏的主要原因是希望通过按钮来更改文本颜色。

158

完全没有任何冲突。

159

Discourse BBCode 插件目前似乎仍是一个外部插件，并未包含在核心版本中。

你有两个选择：

  • 使用该插件，它会在引擎中添加 BBCode 功能，并在工具栏中增加一些按钮。
  • 使用 官方 BBCode 插件 加上 Composer 扩展组件（这是一个可选的主题组件，可在工具栏中添加一些按钮）。

如果你更倾向于使用官方插件，那么第二个选项是最佳选择。如果需要升级，该主题组件可以轻松停用。

格式化工具栏不应出现损坏或与 Discourse 核心产生冲突的情况。

1 个赞
160

我之前使用的是官方 bbcode 插件配合 md composer 主题组件。不过，该插件没有更改文本颜色的按钮。理想情况下，如果能有一个颜色选择器就好了，但我觉得这可能无法实现。

161

啊，我明白了。该组件仅使用核心中可用的元素，而颜色 BBCode 需要一个插件，正如你所知。编辑组件中的按钮（或在 GitHub 上分叉）并不难，但在你的情况下，你说得对，这个插件是最佳选择。

你可以安装这个插件，但我建议同时卸载官方的 BBCode 插件，以避免 Markdown 引擎中的任何冲突。

关于颜色选择器，说实话我不是一个优秀的程序员，我只是使用了一些可用的工具来与社区分享。我很乐意接受拉取请求，以改进这个插件。

1 个赞
162

我可能会通过为编辑器添加按钮来学习如何使用，因为我打算开发自己的插件。不过，由于我最近才开始学习 Discourse，不确定我是否适合提交一个添加颜色选择器的拉取请求。

是的，我已经卸载了官方的 bbcode 插件。还有一个功能很棒的 bbcode 插件，带有自动补全功能。不过，因为有了颜色按钮，我认为这个插件对刚接触 Discourse、不熟悉 bbcode 的普通用户来说更合适。

163

image

我注意到这个插件还包含另一个“插入图片”按钮。既然原来的按钮已经支持附件或 URL 链接，这个按钮真的有必要吗？除此之外，我喜欢它的格式按钮。只是有点疑惑，因为编辑器里出现两个图片图标看起来有点奇怪。如果无法移除，我就只能改回使用 Markdown 编辑器加官方 BBCode 了。

1 个赞
164

您可以轻松使用 CSS 隐藏编辑器工具栏中您想要隐藏的任何按钮或项目。

或者，另一种选择：

您可以轻松修改插件，以移除您不想在编辑器工具栏中显示的任何按钮。

165

它主要是为了配合浮动按钮使用，或者用于那些高度依赖外部链接的论坛对齐。如果您主要使用内部上传的图片，可以将其隐藏。

166

如果我注释掉这些行，是否足以移除该按钮？

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25

167

最好在您的主题中添加一些 CSS

/* 图像按钮 */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}
1 个赞