JSXを使用しないReactを使用した構文ハイライト

Question

非常に単純な構文強調を持つテキストフィールドを使用してReactフォームを作成したいが、JSXなしでそれをやりたいDraftJSをJSXなしで使用する方法はありますか？

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 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> 

このアプローチの欠点は、ユーザーのブラウザが実際にあなたのコードを実行する前に、バビロンのtranspilerを実行し、ソースコードの多くをダウンロードしなければならないことです。

設定が簡単です。サポートスクリプトを自分でホストすることも、cdnjs.comのようなCDNバージョンにリンクすることもできます。新しいバージョンのコードをデプロイするとは、メインスクリプトを編集し、変更されたバージョンをデプロイすることだけです。

Answer 4

React-jsコードに基づいて静的なWebサイトを展開するためのツールがいくつかあります。私はまだそれらを試していないが、彼らは有望に見える。

Generator react component

これら

React static boilerplate

全てが反応-jsのため complementary toolsのリストから来ます。