ace 编辑器中标记的自定义样式答案

【问题标题】：Custom style for markers in ace editorace 编辑器中标记的自定义样式
【发布时间】：2017-03-21 19:32:52
【问题描述】：

是否可以为单个标记设置自定义样式？我正在尝试为我添加的每个标记将边框颜色设置为自定义颜色，而不是使用一个类。这些颜色是我无法提前知道的，我需要在程序运行时设置它们。这就是为什么我不能创建十几个类并将它们用于此目的的原因。

【问题讨论】：

你能用 ID 代替类吗？
什么是标记？
发帖后被编辑为'in ace editor'。

【解决方案1】：

您可以使用类似于 cloud9 在这里使用的动态标记 https://github.com/c9/core/blob/2d05ddeb7c0c1f6f3b35e305f60d1ba4f39f0294/plugins/c9.ide.collab/author_layer.js#L41 https://github.com/c9/core/blob/2d05ddeb7c0c1f6f3b35e305f60d1ba4f39f0294/plugins/c9.ide.collab/author_layer.js#L98

【讨论】：

【解决方案2】：

这是您可以做到这一点的一种方法：https://jsfiddle.net/sheriffderek/wkwzprfh/

标记

<ul class="marker-type-list">

  <li class='marker-type'>
    <button class='js-create-marker' data-color='red'>Create red marker</button>
  </li>

  <li class='marker-type'>
    <button class='js-create-marker' data-color='green'>Create green marker</button>
  </li>

  <li class='marker-type'>
    <button class='js-create-marker' data-color='blue'>Create blue marker</button>
  </li>

</ul>

<ul class='marker-list'><!-- X --></ul>

脚本

$('.js-create-marker').on('click', function() {
    var color = $(this).data('color');
    console.log(color);
  $('.marker-list').append('<li class="marker ' + color + '">marker</li>');
});

样式

.marker.red {
  color: red;
}

.marker.green {
  color: green;
}

.marker.blue {
  color: blue;
}

【讨论】：