快速亮点

是的 @satonotdead 我认为这个话题有点偏离了主题…… 我认为这个话题可能会被修改为指在浮动的编辑/引用弹出窗口中添加一个高亮按钮。

所以,我制作了一个主题组件 https://meta.discourse.org/t/highlighter-composer-button/277597,用于非常特定和有限的目的,即单击作曲家工具栏中的按钮来插入 标记此标记,并且还添加了一个键盘快捷键 Ctrl-H 以方便使用。

还有 2 个不同的作曲家按钮组件,它们都允许您即时插入代码以添加文本背景和文本颜色。对我来说,这另外 2 个组件不太快捷方便,原因有 2 个:

  1. 它们要求在插入的代码中手动输入颜色才能工作。

  2. 它们并不总是能很好地与其他我在帖子中使用的元素配合,例如可滚动的内容框:

2 个赞

你想打开一点,你是怎么做那些可滚动的框的 :face_with_peeking_eye:

当然,@Jagster,这是这个主题组件……

我的样式框是这样的……

/* 可滚动内容框阴影 */

.scrollable-content {
    border-left: none !important;
    background-color: var(--secondary) !important;
    padding: 1em 0.5em 1em 1em !important;
    box-shadow: 0 1.36px 8.896px #c4b59d, 0 0 1px !important;
    border-radius: 4px !important;
    margin: 0 8.896px !important;
}

.scrollable-content-inner {
    padding-right: 15px !important;
}

.scrollable-content-inner h1,
.scrollable-content-inner h2,
.scrollable-content-inner h3,
.scrollable-content-inner h4,
.scrollable-content-inner h5,
.scrollable-content-inner h6 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}
3 个赞

抱歉,我无法在元(meta)上使用它…… :stuck_out_tongue:

1 个赞

@satonotdead 很抱歉!我在这里开始集思广益,想出一些改进作曲家的方法,我也觉得这些方法很有用。我个人不相信原帖的建议,即在阅读帖子时选择文本时,在引用和快速编辑旁边添加高亮选项。在我看来,将此功能放在作曲家中更有意义。

这里还有一些关于文本目前如何使用 markdown 格式化的通用建议,包括多年来创建的各种主题组件。

有意思。那么你是建议高亮显示的文本只对用户可见,还是对所有人可见?那么几个人可以看到所有人的高亮显示的文本?对我来说,后者感觉很混乱,而且不太有用。前者我认为无法实现。

Discourse Shared Edits 可以使用类似的东西,这样当多个人编辑时,就可以清楚谁贡献了哪些文本。但我觉得价值有限,而且可能很混乱。

太棒了!我已经在我个人网站上安装了这个,并且效果很好。干得好!

3 个赞

正是如此,@tobiaseigen!我们阅读时会使用荧光笔来快速标记文本的某些部分。

我想到了这一点,就像我使用快速编辑一样,我可以在(迷你编辑窗口中)在我想编辑的文本周围输入 <mark> 标签……

<mark>some text</mark>

你认为如果我复制一个“Highlighter Theme Component”并更改 api-setup.js 中的代码,将荧光笔按钮(或按 H)放在 PluginOutlet

quote-button-after

api-setup.js 代码
import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
import I18n from "I18n";

async function applyHighlight(element) {
  const highlights = element.querySelectorAll("mark");
  if (!highlights.length) {
    return;
  }
}

export default apiInitializer("0.11.1", (api) => {
  const { iconNode } = require("discourse-common/lib/icon-library");
  let icon = iconNode("highlighter");
  const currentLocale = I18n.currentLocale();
  // I18n.translations[currentLocale].js.highlight_button_title = I18n.t(themePrefix("composer_highlight_button_title"));
  // I18n.translations[currentLocale].js.composer.highlight_button_text = I18n.t(themePrefix("composer_highlight_button_text"));
  I18n.translations[currentLocale].js.highlight_button_title = "Highlight Text";
  I18n.translations[currentLocale].js.composer.this = "this";
  // I18n.translations[currentLocale].js.composer.highlight_button_text = "Highlight Text";

  api.modifyClass("controller:composer", {
    pluginId: "highlight",
    actions: {
      highlightButton() {
        this.get("toolbarEvent").applySurround("\n" + `<mark>` + "\n</mark>\n");
      },
    },
  });

  // add button to the toolbar
  api.onToolbarCreate((toolbar) => {
    toolbar.addButton({
      id: "composer_highlight_button",
      group: "extras",
      icon: "highlighter",
      shortcut: "H",
      preventFocus: true,
      trimLeading: true,
      title: "highlight_button_title",
      // perform: e => e.applySurround('[wrap=highlight]', '[/wrap]', 'this')
      perform: (e) => e.applySurround("<mark>", "</mark>", "this"),
    });
  });

  api.decorateCookedElement(
    async (elem, helper) => {
      const id = helper ? `post_${helper.getModel().id}` : "composer";
      applyHighlight(elem, id);
    },
    { id: "wrap-mark" }
  );
});

还是我异想天开!?

好的。我明白您想做什么。

如果您能在主题组件中完成,那就请便。我不是程序员,不知道您将如何做到。

2 个赞

两者都插入删除

两者都<ins>插入</ins>和<del>删除</del>

现在我还必须将它们合并到 Composer Button Theme Components 中(正如 @Lilly 所说——“小玩意很酷!”)

哦!HTML Formatting Tags

对我来说,这可能是一种更准确的书签形式。

我想知道您是否可以扩展书签系统来记住文本的突出显示部分?

2 个赞

非常有意思的想法……