uniapp 在富文本编辑器用户输入#号后面的字符自动更改颜色

UniApp 中的富文本编辑器，如 vant-weapp 的 textarea 组件，可以结合自定义组件或事件处理来实现这样的功能。当用户输入 # 号后，可以通过监听 input 或 change 事件，检查当前光标位置的内容，如果包含 # 后面的颜色名称（如 #FF0000），然后使用正则表达式匹配，并设置相应的样式，比如通过 Vue 的 v-bind:class 绑定动态颜色。

以下是一个简单的示例代码：

<view class="richtext">
  <van-textarea placeholder="请输入带有颜色代码的文字" @input="handleInput" :value="content"></van-textarea>
</view>

<script>
export default {
  data() {
    return {
      content: '',
    };
  },
  methods: {
    handleInput(e) {
      const { value } = e.detail;
      let colorCode = '';
      if (value.includes('#')) {
        const index = value.indexOf('#');
        if (index !== -1) {
          colorCode = value.slice(index);
          this.content = value.substring(0, index);
          // 颜色对应的样式，这里仅做示例，实际应用需要映射到具体的颜色库或CSS变量
          this.$refs.textarea.style.color = `#${colorCode}`;
          this.contentWithColor = `${this.content} (#${colorCode})`;
        }
      }
    },
  },
};
</script>

在这个例子中，`handleInput` 方法会在用户每次输入后被触发，检查内容是否包含 #，如果有，则提取颜色部分并改变当前输入框的颜色。注意这只是一个基础实现，实际应用可能还需要更复杂的颜色解析逻辑以及颜色库管理。