Question

我有一个codemirror对象。当光标悬停在代码上方时，我想在codemirror编辑器顶部显示一个时髦的按钮。

到目前为止，我可以检测到鼠标何时悬停，但是我无法在编辑器顶部显示任何内容。我的代码如下，我也有一个sandbox here

Id1(1)

我的另一个想法是尝试将标记包装在一个时髦的按钮中？但是我不确定如何做出反应。我看了一下使用Codemirror解析器的this react syntax highlighter，我相信我找到了对代码块进行样式化的代码：

import React from "react";
import ReactDOM from "react-dom";
import { Controlled as CodeMirror } from "react-codemirror2";


var codeSample = `
openssl rand -base64 756 > <path-to-keyfile>
chmod 400 ~/KeyFilePath`

class App extends React.Component {
  state = {
    valueTit: "Hello"
  };

  constructor() {
    super();
  this.instance = null;

  }
  _onMouseMove(e) {
    console.log("mouse moved!!!")
      this.setState({ x: e.screenX, y: e.screenY });
      var node = event.srcElement;
      console.log(node.innerText);
      return(<Tooltip id="sib" interactive='true' title="hi"></Tooltip>)
    }
  render() {
    const { valueTit } = this.state;
    return (

      <Tooltip id="sib" interactive='true' title={valueTit}>
      <div onMouseMove={this._onMouseMove.bind(this)}>
        <CodeMirror
          value= {codeSample}
          options={{
            mode: "clike",
            theme: "material",
            lineNumbers: true
          }}
          editorDidMount={editor => { this.instance = editor }}
        />
        </div>
      </Tooltip>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

export default App;

我会做某种const pushElement = (token, style) => { elements.push(_react["default"].createElement("span", { className: style ? prefix + style : '', key: ++index }, token)); }; const mode = codeMirror.findModeByName(language); codeMirror.runMode(value, mode ? mode.mime : language, (token, style) => { if (lastStyle === style) { tokenBuf += token; lastStyle = style; } else { if (tokenBuf) { pushElement(tokenBuf, lastStyle); } tokenBuf = token; lastStyle = style; } }); pushElement(tokenBuf, lastStyle); const code = _react["default"].createElement("code", { className: inline ? `inline ${prefix}s-${theme}` : '' }, elements); return inline ? code : _react["default"].createElement("pre", { className: `${className} ${prefix}s-${theme}` }, code); }来创建时髦的按钮吗？

ReactJS：在Codemirror编辑器顶部显示另一个UI元素

0 个答案: