draftjs

draftjs how to initiate an editor with content

由 北城余情 提交于 2019-12-17 10:47:52
问题 Stumbled on this cool text editor, draft.js by facebook. I try to follow the example in github but I want to create an editor with content instead an empty editor. var EditorState = Draft.EditorState; var RichEditor = React.createClass({ getInitialState(){ return {editorState: EditorState.createWithContent("Hello")} //the example use this code to createEmpty editor // return ({editorState: EditorState.createEmpty()}) } }); run it, but I get error saying that "Uncaught TypeError: contentState

make document.execCommand('insertText', false, 'message') work with draftjs?

由 ◇◆丶佛笑我妖孽 提交于 2019-12-12 19:40:12
问题 I'm working on an application which needs to insert text into a contenteditable="true" div (a Draftjs based textfield to be precise). Now I am aware that Draft.js uses react and that it should be used that way, but in this case, the application already exists and this is a third party electron app that works with it. I'm working on in-line notification replying on macOS, so I need that reply text to be pasted inside the draftJS field, however, when I do so using: document.querySelector('div

Draft JS unordered list bullet colour

由 ﹥＞﹥吖頭↗ 提交于 2019-12-12 16:40:30
问题 I've implemented Draft JS on a project as a simple editor but I'm having trouble styling unordered lists, specifically changing the colour of the bullets to match the text colour. There doesn't seem to be information in the docs on how to apply styles to the li that wraps unordered-list-item items. I can select text and apply colours however this produces editor state like the following: { "entityMap": {}, "blocks": [ { "key": "bcci", "text": "Heading", "type": "unstyled", "depth": 0,

How to stop DraftJS cursor jumping to beginning of text?

由 血红的双手。 提交于 2019-12-11 04:23:09
问题 Code involved using DraftJS and Meteor Js application Task - Make a live preview where text from DraftJS will get saved to DB and from DB it get displayed on another component. But problem is once data comes from DB and I try to edit DraftJS cursor moved to the beginning. Code is import {Editor, EditorState, ContentState} from 'draft-js'; import React, { Component } from 'react'; import { TestDB } from '../api/yaml-component.js'; import { createContainer } from 'meteor/react-meteor-data';

Initiate a Draft.js Editor with unordered list

由 和自甴很熟 提交于 2019-12-10 23:54:30
问题 I have an array of string that I want to pre-populate a draft.js editor with as an unordered list. Here's the code: const content = ContentState.createFromText(input.join('*'), '*') const editorState = EditorState.createWithContent(content) this.setState({ editorState: RichUtils.toggleBlockType(editorState, 'unordered-list-item' }) This is only created a bullet point item for the first entry in the array but the other items are not inheriting the blockstyle. Any ideas? 回答1: You can create

How to insert / upload image (update entity and blocks) in Draft.js?

由 跟風遠走 提交于 2019-12-05 10:44:37
问题 I am trying to insert image to Draft.js editor. Based on my understanding, I need update entity by mergeData and blocks by mergeBlockData. (I am not sure) Now I am trying to use mergeBlockData to insert a block. mergeBlockData( contentState: ContentState, selectionState: SelectionState, blockData: Map<any, any> ): ContentState Please read comment in the code. import { Map } from 'immutable'; const selection = this.state.editorState.getSelection(); const contentState = this.state.editorState

How to insert / upload image (update entity and blocks) in Draft.js?

由 狂风中的少年 提交于 2019-12-03 23:15:51
I am trying to insert image to Draft.js editor. Based on my understanding, I need update entity by mergeData and blocks by mergeBlockData . (I am not sure) Now I am trying to use mergeBlockData to insert a block. mergeBlockData( contentState: ContentState, selectionState: SelectionState, blockData: Map<any, any> ): ContentState Please read comment in the code. import { Map } from 'immutable'; const selection = this.state.editorState.getSelection(); const contentState = this.state.editorState.getCurrentContent(); console.log(convertToRaw(contentState)); // for example, I have 3 blocks const

Draft js. Persist EditorContent to database

由 安稳与你 提交于 2019-12-03 08:21:42
问题 I'm trying to persist draft-js 's EditorContent to database then read and recreate the EditorContent object again. But EditorContent.getPlainText() strips away rich text content. I don't know how else to do it. How do I properly persist EditorContent ? 回答1: The getPlainText() method, as its name suggests, only returns the plain text without any rich formatting. You should use the convertToRaw() and convertFromRaw() functions to serialize and deserialize the contents of the editor. You can

Draft js. Persist EditorContent to database

由 感情迁移 提交于 2019-12-02 22:04:39
I'm trying to persist draft-js 's EditorContent to database then read and recreate the EditorContent object again. But EditorContent.getPlainText() strips away rich text content. I don't know how else to do it. How do I properly persist EditorContent ? The getPlainText() method, as its name suggests, only returns the plain text without any rich formatting. You should use the convertToRaw() and convertFromRaw() functions to serialize and deserialize the contents of the editor. You can import them this way if necessary: (assuming you are using ES6) import {convertFromRaw, convertToRaw} from

Losing the selection after a mutation

由 ▼魔方 西西 提交于 2019-12-02 01:24:35
I'm doing some tricky state mutations on editorState and I'm losing the selection. I need to get the currentText(), transform into HTML with some magic library and convert it back to editorState. That works fine, it's just the selection that breaks so hard. Right now, I'm trying to get the selection on the first beginning and then do a forceSelection , but fails with some error related to selection.hasFocus() (that seems not really related...). I'm guessing that I need to calculate the "new" selection based on anchors and offsets, but not really sure, any ideas to do that? Right now my code
订阅 draftjs