React JS中实现无工具栏、带颜色高亮的文本输入框方法

可以用专业的代码编辑器库来实现，下面是三种实用方案：

方案一：CodeMirror（轻量灵活） #

CodeMirror是专门做代码编辑的轻量库，支持几十种语言的语法高亮，默认没有顶部工具栏，只需简单配置就能满足需求。

实现步骤： #

1. 引入CodeMirror的CSS和JS资源（用CDN即可）
2. 创建编辑器容器
3. 初始化编辑器，指定高亮语言和主题

代码示例：

<!-- 引入基础样式和主题 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/monokai.min.css">
<!-- 引入编辑器核心和对应语言的高亮规则（以Python为例） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/python/python.min.js"></script>

<!-- 编辑器容器 -->
<div id="editor"></div>

<script>
  // 初始化编辑器
  const editor = CodeMirror(document.getElementById('editor'), {
    value: '# 输入你的Python代码\nprint("Hello CodeMirror")',
    mode: 'python', // 设置高亮语言
    theme: 'monokai', // 配置高亮配色主题
    lineNumbers: false, // 可选：隐藏行号
    readOnly: false, // 允许编辑
    indentUnit: 4
  });

  // 调整编辑器尺寸
  editor.setSize('100%', '300px');
</script>

如果需要自定义非标准语言的高亮规则，可以参考CodeMirror的mode开发规范自行扩展。

方案二：Monaco Editor（VS Code同款） #

Monaco是VS Code底层的编辑器，功能更强大，默认无工具栏，自带丰富的语法高亮支持。

实现步骤： #

1. 引入Monaco的加载器
2. 创建容器
3. 初始化编辑器并指定语言

代码示例：

<div id="monaco-editor" style="width:100%; height:300px;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs/loader.min.js"></script>
<script>
  require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs' }});
  require(['vs/editor/editor.main'], function() {
    const editor = monaco.editor.create(document.getElementById('monaco-editor'), {
      value: '// 输入你的JavaScript代码\nconst msg = "Hello Monaco";\nconsole.log(msg);',
      language: 'javascript', // 设置高亮语言
      theme: 'vs-dark', // 配置主题
      minimap: { enabled: false }, // 可选：隐藏右侧小地图
      scrollBeyondLastLine: false
    });
  });
</script>

方案三：自定义简单高亮（无需第三方库） #

如果只是简单的文本片段高亮，不需要复杂语法解析，可以用contenteditable元素结合JS实现：

<style>
  .highlight-input {
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    font-family: monospace;
    outline: none;
  }
  .keyword { color: #ff4500; font-weight: bold; }
  .string { color: #228b22; }
</style>

<div class="highlight-input" contenteditable="true" id="custom-editor">
  输入文本示例：<span class="keyword">function</span> <span class="string">"demo"</span>
</div>

<script>
  const editor = document.getElementById('custom-editor');
  editor.addEventListener('input', function() {
    // 简单高亮逻辑：匹配关键词和字符串
    let content = this.innerHTML;
    // 高亮关键词（可自行扩展）
    content = content.replace(/(function|const|let|if)/g, '<span class="keyword">$1</span>');
    // 高亮双引号包裹的字符串
    content = content.replace(/"([^"]*)"/g, '<span class="string">"$1"</span>');
    this.innerHTML = content;
    
    // 修复光标位置问题
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(this);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
  });
</script>

这个方案适合简单场景，复杂语法高亮还是推荐用专业编辑器库。

内容的提问来源于stack exchange，提问作者Ramki_45