- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试根据主 draft.js 页面上的示例创建基本草稿 js 编辑器 https://draftjs.org/ .
当我在主页面的编辑器中单击切换了 ol/ul 的选项卡时,我得到了嵌套列表。但是在我自己的实现编辑器中只是失去了焦点。尽管我的大部分代码都是从主页上的编辑器中获取的。我检查了很多次差异,但没有发现任何不一致。
这里是我编辑的 github 页面上的链接:https://drogbi.github.io/draft-editor/这里的代码:https://github.com/Drogbi/draft-editor/blob/master/src/RichEditor.jsx
最佳答案
我找到了这个例子并且工作正常:https://codepen.io/Kiwka/pen/YNYvyG !
'use strict';
const {Editor, EditorState, RichUtils} = Draft;
class RichEditorExample extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.focus = () => this.refs.editor.focus();
this.onChange = (editorState) => this.setState({editorState});
this.handleKeyCommand = (command) => this._handleKeyCommand(command);
this.onTab = (e) => this._onTab(e);
this.toggleBlockType = (type) => this._toggleBlockType(type);
this.toggleInlineStyle = (style) => this._toggleInlineStyle(style);
}
_handleKeyCommand(command) {
const {editorState} = this.state;
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return true;
}
return false;
}
_onTab(e) {
const maxDepth = 4;
this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));
}
_toggleBlockType(blockType) {
this.onChange(
RichUtils.toggleBlockType(
this.state.editorState,
blockType
)
);
}
_toggleInlineStyle(inlineStyle) {
this.onChange(
RichUtils.toggleInlineStyle(
this.state.editorState,
inlineStyle
)
);
}
render() {
const {editorState} = this.state;
// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'RichEditor-editor';
var contentState = editorState.getCurrentContent();
if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'unstyled') {
className += ' RichEditor-hidePlaceholder';
}
}
return (
<div className="RichEditor-root">
<BlockStyleControls
editorState={editorState}
onToggle={this.toggleBlockType}
/>
<InlineStyleControls
editorState={editorState}
onToggle={this.toggleInlineStyle}
/>
<div className={className} onClick={this.focus}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
onTab={this.onTab}
placeholder="Tell a story..."
ref="editor"
spellCheck={true}
/>
</div>
</div>
);
}
}
// Custom overrides for "code" style.
const styleMap = {
CODE: {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
fontSize: 16,
padding: 2,
},
};
function getBlockStyle(block) {
switch (block.getType()) {
case 'blockquote': return 'RichEditor-blockquote';
default: return null;
}
}
class StyleButton extends React.Component {
constructor() {
super();
this.onToggle = (e) => {
e.preventDefault();
this.props.onToggle(this.props.style);
};
}
render() {
let className = 'RichEditor-styleButton';
if (this.props.active) {
className += ' RichEditor-activeButton';
}
return (
<span className={className} onMouseDown={this.onToggle}>
{this.props.label}
</span>
);
}
}
const BLOCK_TYPES = [
{label: 'H1', style: 'header-one'},
{label: 'H2', style: 'header-two'},
{label: 'H3', style: 'header-three'},
{label: 'H4', style: 'header-four'},
{label: 'H5', style: 'header-five'},
{label: 'H6', style: 'header-six'},
{label: 'Blockquote', style: 'blockquote'},
{label: 'UL', style: 'unordered-list-item'},
{label: 'OL', style: 'ordered-list-item'},
{label: 'Code Block', style: 'code-block'},
];
const BlockStyleControls = (props) => {
const {editorState} = props;
const selection = editorState.getSelection();
const blockType = editorState
.getCurrentContent()
.getBlockForKey(selection.getStartKey())
.getType();
return (
<div className="RichEditor-controls">
{BLOCK_TYPES.map((type) =>
<StyleButton
key={type.label}
active={type.style === blockType}
label={type.label}
onToggle={props.onToggle}
style={type.style}
/>
)}
</div>
);
};
var INLINE_STYLES = [
{label: 'Bold', style: 'BOLD'},
{label: 'Italic', style: 'ITALIC'},
{label: 'Underline', style: 'UNDERLINE'},
{label: 'Monospace', style: 'CODE'},
];
const InlineStyleControls = (props) => {
var currentStyle = props.editorState.getCurrentInlineStyle();
return (
<div className="RichEditor-controls">
{INLINE_STYLES.map(type =>
<StyleButton
key={type.label}
active={currentStyle.has(type.style)}
label={type.label}
onToggle={props.onToggle}
style={type.style}
/>
)}
</div>
);
};
ReactDOM.render(
<RichEditorExample />,
document.getElementById('target')
);
问题是我没有使用 onTab 属性来处理选项卡上的行为。
关于javascript - 尝试创建嵌套列表时失去编辑器焦点 (Draft.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51403235/
我在我的项目(Ubuntu 18.04.2 LTS)中使用了 celery 4.4.0 版本。当我提出异常('功能中的功能太少无法分类')时, celery 项目失去了 worker ,我得到了这样的
我在这样的更新面板中有一个 GridView :
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关闭 9 年前。 这个问题似乎不是关于 a specific programming problem,
当我尝试使用 jquery 的 html() 将 HTML 附加到另一个元素时。我失去了 ng-click 的能力。这是我的代码的粗略描述。例如我有一个名为 testController 的 Cont
我正在将 python 连接到 mySqL 数据库,并从 android 发送两个 Double 值以存储在 Mysql 中,然后我收到此错误 enter code here Exception i
无法理解为什么这个简单的事情没有反应性。看起来我错过了一些 Vue 的基础。 {{connection_status}} export default {
我不明白出了什么问题,在我的设备上应用程序运行良好,但有时在日志中(应用程序用户、 session 、崩溃......通过某些服务跟踪)我看到应用程序崩溃(NullPointerException),
我正在处理一个我有点困惑的问题。问题是假设您是二战期间英国空军的一名将军。您还剩下 100 架飞机来保卫英国。在您执行的每个任务中,每架飞机都有 50% 的几率被德国高射炮击落,因此每次执行任务您都会
我相信我的问题与以下问题非常相似 Spring security 'remember me' cookie not avaiable in first request . 基本上,我有一组用于公司内部
似乎 Bootstrap 下拉按钮在单击后仍保持焦点。 我的用例与此不兼容, 用户应该在单击按钮后按“SPACE”键,为了触发与按钮无关的东西。 问题是按钮保持焦点状态,因此按空格键 激活按钮。 我希
我有一个 MKMapView,其中有很多从解析器 xml 定义的注释引脚;那是我的代码: -(IBAction)LoadAnnotation:(id)sender { RXML element
我有一个 HTML 表格,用户可以在其中输入他的待机开始时间和待机结束时间,该时间计算总时数,并基于此计算获得的补偿时数。这一切都有效。 现在,它所做的是,每当用户输入开始和结束时间时,用户必须将焦点
Windows 系统更新后,Eclipse 不再了解 Android 的任何信息...我如何恢复对 Android 的支持?我尝试重新安装 SDK,但没有成功... 太奇怪了。我注意到项目模板丢失了,
我正在发送 SOAP 请求来更新某些实体。当我创建(而不是更新)几乎相同的东西时,一切正常。我跟踪了客户端和传输的日志记录,最后它给了我一个线索。它看起来像这样: DEBUG:suds.client:
这个问题在这里已经有了答案: TypeError: Cannot read property 'setState' of undefined (3 个答案) How to access the co
我使用 PostgreSQL 和 repmgrd 创建了一个 Docker 镜像,所有这些镜像都是使用 supervisor 启动的。 我现在的问题是,当它启动时,由 supervisor 生成的 r
新的 iOS 开发者为 iPhone 编写第一个委托(delegate)应用程序。 模态调用的父 View Controller 有六个 subview Controller ,它们使用父 View
我目前正在 MVC4 中创建一些用户配置文件编辑表单,并且为了测试,我将 UserId 属性呈现为表单上的只读文本框,如下所示: @Html.LabelFor(model => model.
我是一名优秀的程序员,十分优秀!