如何更改所选文本的颜色？

Question

我需要使用 codemirror 更改所选文本的背景颜色。 有人可以帮忙吗？

Answer 1

不要忘记必不可少的

!important

。你需要：

.CodeMirror-selected {background-color: #CCCCCC !important;}

如果您还需要更改选择的前景色，CodeMirror 有

mark-selection.js

插件 可以实现这一点。

Answer 2

更改 .CodeMirror-selected {} 的背景颜色，该类位于 codemirror.css 中

.CodeMirror-selected {background:#CCCCCC;}

Answer 3

我能够通过覆盖特定于 CodeMirror 主题的突出显示颜色来解决此问题：

/** OVERRIDE SELECTED TEXT HIGHLIGHT COLOR FOR THEMES: **/

    /* isotope theme */
    .cm-s-isotope div.CodeMirror-selected {
        background: #0004FF !important;
    }
    /* colorforth theme */
    .cm-s-colorforth div.CodeMirror-selected {
        background: #0004FF !important;
    }
    /* 3024-night theme */
    .cm-s-3024-night div.CodeMirror-selected {
        background: #0004FF !important;
    }

/** - - - - - **/

此解决方案适用于CodeMirror的AngularJS版本。

Answer 4

您需要导入

mark-selection

添加并设置自定义背景颜色。

1. 导入“codemirror/addon/selection/mark-selection”；
2. 如果您需要将背景颜色重置为默认浏览器行为，请将其添加到您的样式中

   background-color: highlight;

Answer 5

在 CodeMirror 6 中，使用它来更改选择颜色：

.cm-selectionBackground,
.cm-editor ::selection {
  background-color: #ccc !important;
}

当您使用

.cm-selectionBackground

扩展时，将使用

drawSelection()

选择器，该扩展是文档推荐的

basicSetup

集的一部分。

.cm-editor ::selection

选择器用于设置浏览器本机选择的样式，以防您不使用

drawSelection()

。

要将其重置为浏览器的默认值，而不是

drawSelection

自己选择的颜色，请使用以下命令：

.cm-selectionBackground {
  background-color: highlight !important;
}

Answer 6

我相信这是 CSS 的问题。请参考以下文章：

使用 CSS 覆盖默认文本选择颜色