在etherpad中更改颜色而不是文本的背景颜色

Posted 2023-05-07

【中文标题】在etherpad中更改颜色而不是文本的背景颜色

【英文标题】：Change color instead of background color of text in etherpad

【发布时间】：2017-03-25 19:47:14

【问题描述】：

我正在尝试在 etherpad 中找到“Authorship color”的解决方案。没用过etherpad的人，请忽略这个问题，他们不会理解的。

所以通常“作者颜色”是作为文本背景颜色提供的颜色，它可以在初始化 pad 时作为参数给出。它有助于识别谁在垫子上写了什么。

我想为所有文本设置白色背景，并根据用户更改 text-color 而不是背景颜色。因此，如果我在初始化 pad 时提供红色，我希望在 pad 中使用红色书写而不是红色背景和在 pad 中书写白色（像往常一样）。

请不要搁置这个问题，因为我没有提供与此问题相关的任何特定代码。请在评论中提问，我会清除任何无法理解的内容。

谢谢，

【参考方案1】：

首先，感谢大家没有在帖子上阻止或提出这个问题，因为没有提供任何代码。

当我决定再尝试一次时，我正要对这个问题提出赏金，并且在经历了很多之后我已经解决了这个问题。不过，它帮助我更好地理解了 etherpad。

我想列出两个与etherpad相关的重要链接：

https://github.com/ether/etherpad-lite/wiki 关于src - https://github.com/ether/etherpad-lite/wiki/Introduction-to-the-source

如果您想了解 etherpad 或想自己进行一些修改，它们可能非常重要。

这就是你的做法：

在 src/static/js/ace2_inner.js 中，转到 setAuthorStyle 函数并替换：

        // author color
        authorStyle.backgroundColor = bgcolor;
        parentAuthorStyle.backgroundColor = bgcolor;

        // text contrast
        if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5)
        
          authorStyle.color = '#ffffff';
          parentAuthorStyle.color = '#ffffff';
        else
          authorStyle.color = null;
          parentAuthorStyle.color = null;
        

        // anchor text contrast
        if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.55)
        
          anchorStyle.color = colorutils.triple2css(colorutils.complementary(colorutils.css2triple(bgcolor)));
        else
          anchorStyle.color = null;
        

与：

authorStyle.backgroundColor = '#ffffff';
parentAuthorStyle.backgroundColor = '#ffffff';

authorStyle.color = bgcolor;
parentAuthorStyle.color = bgcolor;

并注释掉：

if ((typeof info.fade) == "number")

  bgcolor = fadeColor(bgcolor, info.fade);

Ofcource 不要忘记通过bin/run.sh 重新启动进程以进行更改。

有兴趣了解其工作原理的人可以继续阅读。

所以 etherpad 接收到 etherpad 已在 src/static/js/pad.js 中初始化的参数，因此如果您在初始化 pad 时定义了：'userColor'，它将进入上述文件中的 globalUserColor。

然后这个变量globalUserColor 填充pad.myUserInfo.colorId 在同一个文件中。

现在在collab_client.js 中，这个colorId 被存储在函数tellAceAuthorInfo 中的cssColor 中，并且通过给定参数bgcolor: cssColor 来调用editor.setAuthorInfo。

现在这个函数setAuthorInfo 存在于src/static/js/ace2_inner.js 中，它调用了我们进行更改的其他本机函数（同一文件）setAuthorStyle。

我所做的是，而不是使用提供的变量 bgcolor 更改背景颜色，它实际上包含 userColor ：

authorStyle.backgroundColor = bgcolor;
parentAuthorStyle.backgroundColor = bgcolor;

我将backgroundColor 更改为白色(#ffffff) 并将文本颜色更改为bgcolor：

authorStyle.backgroundColor = '#ffffff';
 parentAuthorStyle.backgroundColor = '#ffffff';

 authorStyle.color = bgcolor;
 parentAuthorStyle.color = bgcolor;

我也删了：

         // text contrast
         if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5)
         
           authorStyle.color = '#ffffff';
           parentAuthorStyle.color = '#ffffff';
         else
           authorStyle.color = null;
           parentAuthorStyle.color = null;
         

        // anchor text contrast
         if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.55)
         
           anchorStyle.color = colorutils.triple2css(colorutils.complementary(colorutils.css2triple(bgcolor)));
         else
           anchorStyle.color = null;
         

因为，这些行设置文本颜色的对比度取决于背景选择的颜色。但我已将背景设为白色并将文本颜色设置为给定的userColor，因此我不再需要对比功能。

最后我也评论了：

    if ((typeof info.fade) == "number")
    
      bgcolor = fadeColor(bgcolor, info.fade);
    

因为当用户不在线时它会使文本消失，至少对我来说是这样。

就是这样。 我希望它能帮助那些想要和我一样功能的人。