MD Composer 附加内容

我已经按照您的建议操作,并像这样隐藏了我不想要的按钮:

// Hides unneeded buttons from the MD Composer Extras TC 
.d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

但是,如果能够让用户在 TC 设置中选择要包含哪些按钮,那就太好了。我想知道这是否可以通过简单地做到:如果按钮的设置中没有文本,那么就不创建该按钮来实现。

我尝试过这样做,但这超出了我微薄的能力;我就是无法让每个部分都根据相关设置进行条件化。

1 个赞

你好 Steven# 组件非常好,但发现了一个小错误。上标有一个小错误。请看下面。

用 /sub 而不是 /sup 关闭

2 个赞

只是一个想法,你或许可以有一个一体化的解决方案,在高级版本中使用设置切换。

即如果使用 bbcode 插件,则有一个切换开关,两者都可以选择隐藏按钮或向工具栏添加按钮。如果管理员想在 :gear: 下拉菜单中排除选项,也可以这样做。

我还在学习 CSS,还不太熟练。但是,可以创建一个补充组件,用级联下拉菜单来组织下拉菜单,增加一些额外的装饰。

即主下拉菜单齿轮,带颜色选项选择器。

:gear: .
插入投票
插入表格
文本颜色. > 红色
绿色
蓝色
橙色

也许可以将其他格式化选项分组到下拉菜单和/或工具栏中,以便有一个菜单来选择格式化选项。

1 个赞

谢谢,我已在此问题上推送了一个修复程序。

2 个赞

非常欢迎,非常感谢您快速响应和修复! :vulcan_salute::smiling_face_with_sunglasses::handshake:

我建议更新您的 Op Post,以包含如何使用可选的分支安装。我找到了您的“color”和“simple”分支替代方案。

在我的 color 分支中,我对 bbcode_color 做了一个小改动

在“Desktop\Head” - 第 65 行和“€Mobile\Head*” - 第 96 行

“[color=##233]”“[color=name]”,因为我将为我的 WiP 网站做一个关于将名称更改为颜色名称的指南。

十六进制值不是您原来的值。我只是把它当作一个参考,说明它大概是什么。

我对这些东西还很陌生,需要创建一个 GitHub 并学习如何进行拉取请求。

非常感谢您提供这个简单且功能丰富的组件!非常感激。

另外一个小建议,是否可以使用 Markdown 的 ~~删除线~~ 约定来表示删除线,而不是更冗长的 <s>删除线</s> 约定?

1 个赞

加入这个讨论 :slight_smile:

如果能有一个原生选项,仅向特定用户组显示 MD composer 的附加功能,那就太好了。在我们的例子中,我们目前只想为我们的员工测试这些附加按钮。

现在,我通过在 nathan 的代码中添加 body:not(.staff) 来隐藏它:

// 从非员工用户隐藏 MD Composer Extras TC 中不需要的按钮
body:not(.staff) .d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

下一个级别将是为每个单独的按钮设置权限。:drooling_face:

2 个赞

@jrgong 您可以通过添加此组件和一些 CSS 来实现此目的

可以查看我的用户卡上的组导航菜单部分 TC 以获取 CSS 示例 - 链接。

5 个赞

这个为什么还没有成为核心功能? :smiley: 感谢分享,我真的很感激。

3 个赞

这个插件(Plugin)是否仍然比这个主题组件(Theme Component)有优势?

但我仍然认为插件更好,不过如果这里提供的选项适合你,那也没关系。

2 个赞

感谢您快速的答复。可以请您解释一下原因吗?

这只是我个人的看法,我认为我们在组件中添加了太多的按钮。
该插件更侧重于基本功能,bbcode 系统也更简单([center] 而不是 [wrap="center"]),但该组件显然更容易安装。

4 个赞

以防万一您还没看到:

image

3 个赞

我提交了一个 PR :+1:

https://github.com/MonDiscourse/md-composer-extras/pull/12

2 个赞

是否可以将 md-composer-extras CSS 类添加到所有按钮?我的目标是一次性隐藏所有按钮,以便非员工用户无法看到,这样 CSS 目标定位会简单得多。

我不确定这是否可能,从插件 API 文件中的示例代码来看,我看不到添加所有这些图标的根类的方法。不过我可能错了。

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
    id: 'pop-text',
    group: 'extras',
    icon: 'bolt',
    action: 'makeItPop',
    title: 'pop_format.title'
  });
});

staff 类应用于 <body> 元素。

因此,您可以像这样定位任何按钮:

body:not(.staff) .d-editor-button-bar {
    /* 隐藏所有内容
     * (可见按钮,包括弹出菜单按钮)
     */
    button,
    .toolbar-popup-menu-options {
        display: none;
    }
}
body:not(.staff) .d-editor-button-bar {
    /* 隐藏特定按钮 */
    button {
        /* 行内按钮 */
        &.align_justify_button,
        &.align_right_button
        /* ... */
        {
            display: none;
        }

        /* 弹出菜单 */
        &.toolbar-popup-menu-options {
            [data-name="Float left"],
            /* ... */ {
                display: none;
            }
        }
    }
}

这有帮助吗?

另外,您可能对这个组件感兴趣:

嘿 Arkshine!这确实有帮助!但我认为,将 CSS 类 md-composer-extras 添加到每个按钮上是一种更有效的方法。这样,隐藏所有元素的 CSS 标记就非常简单了 :slight_smile:

谢谢!我们实际上已经在使用了 :wink: