在没有 JSX 的情况下使用 React 进行语法高亮显示

Question

我想构建一个带有文本字段的 React 表单，该表单具有非常简单的语法高亮显示，但我想在没有 JSX 的情况下完成。有没有办法在没有 JSX 的情况下使用 DraftJS？

Answer 1

您可以在没有 Draft.js 的情况下使用 div 和 contenteditable="true" 来完成此操作。这是我到目前为止所做的。对于此示例，突出显示规则是元音应以绿色突出显示。

它运行得相当好，但我仍然需要添加代码来使选择保持在正确的位置。

有没有办法改用 DraftJS？有更简单的方法吗？

var SpanEditor = React.createClass({
    handleChange: function(event) {
      for (
          var i = 0;
          i < this.contentSpan.childNodes.length;
          i++) {
        var child = this.contentSpan.childNodes[i];
        if (child.childNodes.length > 1) {
          while (child.childNodes.length > 0) {
              var grandchild = child.childNodes[0];
            child.removeChild(grandchild);
            if (grandchild.nodeName == '#text') {
              var grandchildText = grandchild;
              grandchild = document.createElement(
                'span');
              grandchild.appendChild(grandchildText);
            }
            this.contentSpan.insertBefore(
              grandchild,
              child);
          }
          this.contentSpan.removeChild(child);
          child = this.contentSpan.childNodes[i];
        }
        if (child.nodeName == 'SPAN') {
          var childText = child.textContent,
              childClass = child.className;
          for (var j = 0; j < childText.length; j++) {
            var c = childText.charAt(j),
                className = (
                    'aeiouAEIOU'.indexOf(c) >= 0
                    ? 'vowel'
                    : '');
            if (className != childClass) {
              if (j == 0) {
                  child.className = className;
              }
              else {
                  var newChild = document.createElement(
                    'span');
                newChild.className = childClass;
                newChild.appendChild(
                  document.createTextNode(
                    childText.substring(0, j)));
                child.childNodes[0].nodeValue = (
                  childText.substring(j));
                child.className = className;
                this.contentSpan.insertBefore(
                  newChild,
                  child);
                j = childText.length;
              }
            }
          }
        }
      }
    },
    mountContentSpan: function(span) {
      this.contentSpan = span;
      var child = document.createElement('span');
      child.appendChild(document.createTextNode(
        'Type something.'));
      this.contentSpan.appendChild(child);
      this.handleChange();
    },
    render: function() {
      return React.createElement(
        'span',
        {
          id: 'z',
          onInput: this.handleChange,
          contentEditable: true,
          suppressContentEditableWarning: true,
          ref: this.mountContentSpan
        });
    }
  });

  var rootElement =
    React.createElement('div', {}, 
      React.createElement(
        'p',
        {},
        'Edit the next paragraph.'),
      React.createElement(SpanEditor)
    )

  ReactDOM.render(
    rootElement,
    document.getElementById('react-app'))

span.vowel {
  background-color: lime;
}

<div id="react-app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

Answer 2

当然有。使用 draft-js 使它变得更简单，但我怀疑你是否需要使用如此繁重的编辑器来完成这项简单的工作。看看https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html#content

Answer 3

您可以运行浏览器中的 Babel 加上 ES6 shim。在这种方法中，您包括在浏览器中实现 JSX 和 ES6 的支持脚本。 Draft.js 项目包括一些使用此技术的 examples。以下是包含的支持脚本：

<script src="../../node_modules/react/dist/react.min.js"></script>
<script src="../../node_modules/react-dom/dist/react-dom.js"></script>
<script src="../../node_modules/immutable/dist/immutable.js"></script>
<script src="../../node_modules/es6-shim/es6-shim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script src="../../dist/Draft.js"></script>

这种方法的缺点是用户的浏览器必须下载大量源代码，然后运行 Babylon 转译器才能真正运行编译您的代码。

好处是它易于配置。您可以自己托管支持脚本或 link 到像 cdnjs.com 这样的 CDN 版本。部署新版本的代码仅意味着编辑主脚本并部署更改后的版本。

Answer 4

有一些工具可以帮助部署基于 React-js 代码的静态网站。我还没试过，但看起来很有前途。

这些都来自 complementary tools for React-js 的列表。

在没有 JSX 的情况下使用 React 进行语法高亮显示

Syntax highlighting using React without JSX

javascript

reactjs

draftjs