我想构建一个带有非常简单语法突出显示的文本字段的 React 表单，但我想在没有 JSX 的情况下这样做。有没有办法在没有 JSX 的情况下使用 DraftJS？
问问题
210 次
4 回答
0
你可以在没有 Draft.js 的情况下使用divwith来做到这一点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>于 2016-10-27T06:03:57.657 回答
0
当然有。使用 draft-js 会更简单，但我怀疑您是否需要使用如此繁重的编辑器来完成这项简单的工作。看看https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html#content
于 2016-10-31T11:09:18.523 回答
0
你可以在浏览器和 ES6 shim 中运行 Babel。在这种方法中，您包括在浏览器中实现 JSX 和 ES6 的支持脚本。Draft.js 项目包含一些使用这种技术的示例。以下是包含的支持脚本：
<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 转译器。
好处是它很容易配置。您可以自己托管支持脚本或链接到 CDN 版本，如 cdnjs.com。部署新版本的代码只意味着编辑主脚本并部署更改后的版本。
于 2016-11-12T00:26:22.520 回答