Question

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

Answer 1

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

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

有没有办法使用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垫片。在此方法中，您包括在浏览器中实现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转发器。

好处是它易于配置。您可以自己托管支持脚本，也可以链接到cdnjs.com等CDN版本。部署新版本的代码只是意味着编辑主脚本并部署更改后的版本。

Answer 4

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

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

使用React而不使用JSX语法突出显示

4 个答案: