是的 @satonotdead 我认为这个话题有点偏离了主题…… 我认为这个话题可能会被修改为指在浮动的编辑/引用弹出窗口中添加一个高亮按钮。
所以,我制作了一个主题组件 https://meta.discourse.org/t/highlighter-composer-button/277597,用于非常特定和有限的目的,即单击作曲家工具栏中的按钮来插入 标记此标记,并且还添加了一个键盘快捷键 Ctrl-H 以方便使用。
还有 2 个不同的作曲家按钮组件,它们都允许您即时插入代码以添加文本背景和文本颜色。对我来说,这另外 2 个组件不太快捷方便,原因有 2 个:
-
它们要求在插入的代码中手动输入颜色才能工作。
-
它们并不总是能很好地与其他我在帖子中使用的元素配合,例如可滚动的内容框:
2 个赞
当然,@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 个赞
@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 个赞