使用React而不使用JSX的語法高亮

我想用帶有非常簡單的語法高亮顯示的文本字段構建React表單，但是我希望在沒有JSX的情況下使用它。有沒有一種方法可以在沒有JSX的情況下使用DraftJS？使用React而不使用JSX的語法高亮

2016-10-27 Don Kirkby

draftjs不使用textfield，但contenteditable dom。 –

通過使用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>

來源

2016-10-27 06:03:57

肯定有。使用draft-js使其更簡單，但我懷疑是否需要使用如此龐大的編輯器才能完成這項簡單的工作。看看https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html#content

來源

2016-10-31 11:09:18 kaushik94

你是說有沒有方法可以在沒有JSX的情況下使用Draft.js？您提供的鏈接只是告訴我如何使用JSX在Draft.js中配置裝飾器。我正在嘗試編寫一個簡單的靜態JavaScript網站，其中包含文本字段中的簡單語法高亮顯示。 –

是的，這是可能的，我們在我們公司使用draftjs，沒有jsx，結果是非常好的。你可能會在這裏找到一些https://github.com/nikgraf/awesome-draft-js。此外，我正試圖開源編輯器，我現在正在構建，大量的代碼重構，所以我會讓你知道它什麼時候出來。 – kaushik94

您可以在瀏覽器中運行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>

對這個缺點的方法是，用戶的瀏覽器有實際運行您的代碼之前下載了大量的源代碼，然後運行巴比倫transpiler。

好處是它很容易配置。您可以自己託管支持腳本，也可以鏈接到cdnjs.com等CDN版本。部署新版本的代碼意味着編輯主腳本並部署更改的版本。

來源

2016-11-12 00:26:22

有一些工具可以幫助部署基於React-js代碼的靜態網站。我還沒有嘗試過，但他們看起來很有前途。

這些都來自的complementary tools的陣營-JS列表。

來源

2016-11-12 00:34:30

使用React而不使用JSX的語法高亮

回答

相關問題