Ich möchte ein React-Formular mit einem Textfeld erstellen, das sehr einfache Syntaxhervorhebung hat, aber ich möchte es ohne JSX machen. Gibt es eine Möglichkeit, DraftJS ohne JSX zu verwenden?Syntaxhervorhebung mit React ohne JSX
Sie können es ohne Draft.js mit einer div mit contenteditable="true" tun. Hier ist, was ich bisher herausgefunden habe. In diesem Beispiel lautet die Hervorhebungsregel, dass Vokale grün hervorgehoben werden sollten.
Es funktioniert einigermaßen gut, aber ich muss noch Code hinzufügen, um die Auswahl an der richtigen Stelle zu halten.
Gibt es eine Möglichkeit, DraftJS stattdessen zu verwenden? Gibt es einen einfacheren Weg dies zu tun?
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>Sicher gibt es. Die Verwendung von draft-js macht es viel einfacher, aber ich bezweifle, dass Sie einen so starken Editor für diese einfache Aufgabe benötigen. Werfen Sie einen Blick auf https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html#content
Wollen Sie sagen, dass es eine Möglichkeit gibt, Draft.js ohne JSX zu verwenden? Der Link, den Sie angegeben haben, sagt mir, wie man Dekoratoren in Draft.js mit JSX konfiguriert. Ich versuche, eine einfache, statische JavaScript-Site zu schreiben, die einfache Syntaxhervorhebung in einem Textfeld enthält. –
ja, es ist möglich, wir verwenden draftjs in unserer firma und entpuppt sich als ziemlich gut ohne jsx. Vielleicht finden Sie hier etwas https://github.com/nikgraf/awesome-draft-js. Ich versuche auch, den Editor zu öffnen, den ich gerade erstelle, viele Code-Refactoring, also werde ich Sie wissen lassen, wenn es heraus ist. – kaushik94
Sie können Babel im Browser und die ES6-Shim ausführen. Bei diesem Ansatz fügen Sie Support-Skripts hinzu, die JSX und ES6 im Browser implementieren. Das Draft.js-Projekt enthält einige examples, die diese Technik verwenden. Hier sind die Support-Skripten, die enthalten bekommen:
<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>
Der Nachteil dieses Ansatzes ist, dass der Browser des Benutzers eine Menge Quellcode zum Download hat, dann das Babylon Transpiler laufen, bevor sie tatsächlich den Code ausgeführt wird.
Der Vorteil ist, dass es einfach zu konfigurieren ist. Sie können die Support-Skripte selbst hosten oder eine Verknüpfung zu einer CDN-Version wie cdnjs.com herstellen. Die Bereitstellung einer neuen Version Ihres Codes bedeutet lediglich, dass Sie Ihr Hauptscript bearbeiten und die geänderte Version bereitstellen.
Es gibt einige Tools zum Bereitstellen einer statischen Website basierend auf React-js-Code. Ich habe sie noch nicht ausprobiert, aber sie sehen vielversprechend aus.
Diese stammen alle aus der Liste der complementary tools für React-js.
draftjs nicht textfield verwenden, aber contenteditable dom. –