Questions tagged [draftjs]

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Filter by
Sorted by
Tagged with
72 votes
10 answers
62k views

draftjs how to initiate an editor with content

Stumbled on this cool text editor, draft.js by Facebook. I tried to follow the example in Github, but I want to create an editor with content instead of an empty editor. var EditorState = Draft....
vdj4y's user avatar
  • 2,649
11 votes
1 answer
7k views

Insert text into an existing / external draftjs textfield

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 ...
JoniVR's user avatar
  • 1,859
33 votes
8 answers
77k views

React JS Server side issue - window not found

Hi I'm trying to use react-rte in my reactJS project. I have server side rendering and every time I want to use this package I get: return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase()...
Jan Omacka's user avatar
  • 1,810
0 votes
3 answers
8k views

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

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 ...
Hongbo Miao's user avatar
  • 47.2k
35 votes
6 answers
26k views

Draft js. Persist EditorContent to database

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 ...
Dulguun Otgon's user avatar
20 votes
5 answers
16k views

How to limit Max Length of Draft js

How to limit max characters in draft js? I can get length of the state like that, but how to stop updating component? var length = editorState.getCurrentContent().getPlainText('').length;
Firanolfind's user avatar
  • 1,588
13 votes
1 answer
14k views

React & Draft.js - convertFromRaw not working

I'm using Draft.js to implement a text editor. I want to save the content of the editor to a DB and later retrieve it and inject it in an editor again, e.g. when revisiting the editor page. First, ...
gisderdube's user avatar
7 votes
3 answers
15k views

Render html saved from draft-js

I'm learning React: totally newbie. If I save in DB the HTML directly from draft.js (or it's variants always based on it) and then in a view page of my React SPA I retrieve HTML from DB through my ...
user avatar
3 votes
1 answer
2k views

Losing the selection after a mutation

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. ...
davesnx's user avatar
  • 384
1 vote
2 answers
2k views

How to include html tags in text editor? [Snippet attached]

I am making text editor using, react-draft-wysiwyg and draftjs-to-html .. And also I have injected the dynamic html into editor like, index.js: export default function App() { const dynamicData = `&...
Undefined's user avatar
  • 941
34 votes
6 answers
39k views

I can't get the html output from draft-js?

I've been playing around with draft-js by Facebook, but I can't actually figure out how to get the html output of the editor. The console.log in the following example outputs some _map properties, but ...
Ewan Valentine's user avatar
9 votes
1 answer
4k views

React controlled contenteditable

hi I'm trying to create a react contenteditable div component that works like an input field but with some additional features that I want to implement, but since there are just few features, I want ...
Amin_mmz's user avatar
  • 434
6 votes
1 answer
9k views

React and Electron with Draft.js: "Global is not defined"

There is a similar question raised here: Uncaught ReferenceError: global is not defined at Object../node_modules/fbjs/lib/setImmediate.js And there are two answers on that question that both seem ...
BrianMagus's user avatar
6 votes
3 answers
4k views

Draft JS unordered list bullet colour

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 ...
Ashley 'CptLemming' Wilson's user avatar
5 votes
3 answers
4k views

How to programatically add mentions using draft-js-mention-plugin?

The problem: I'm trying to create an edit interface for contents created with draft-js + draft-js-mention-plugin. However, editorState wasn't persisted, only plain text. Mentions were saved as an ...
Diego Haz's user avatar
  • 952
5 votes
1 answer
11k views

How to change cursor position with draft.js?

I am wondering how you can change the cursor position in draft.js after having done an text insertion on key command. Therefore I am currently using _handleKeyCommand(cmd) to insert a custom text ...
nullmn's user avatar
  • 587
5 votes
3 answers
7k views

How to stop DraftJS cursor jumping to beginning of text?

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 ...
Sandeep Chikhale's user avatar
4 votes
2 answers
1k views

How to extend theme of draft-js-emoji-plugin

I need to extend only several CSS rules in draft-js-emoji-plugin. Documented way is to pass theme object to configuration: const theme = { emojiSelectButton: 'someclassname' }; const emojiPlugin = ...
Boris Zagoruiko's user avatar
4 votes
1 answer
4k views

Draft.js (react-draft-wysiwyg): text update from the outside of the Editor component does not work

I'm trying to update the text from a calling component into the Editor component. I use the props to pass the text from the caller, but when the text change (props is updated in the ContentEditor) the ...
robob's user avatar
  • 1,739
4 votes
1 answer
4k views

Mention list and emoji top position (Draft.js)

Will you please help me how I can change its position from bottom to top? I want to show mention list on top of the text instead of the bottom. The same question about emoji list. Example link.
Hasnain Shafqat's user avatar
4 votes
1 answer
10k views

DraftJS - contentState.getBlockMap is not a function

I'm trying to save editorState to DB and show back to editor. For this thing, I followed this answer Now, when I try to get current content and permanently save it using convertToRaw, It works fine. ...
Muhammad Ateeq Azam's user avatar
3 votes
3 answers
5k views

Draft js saving and rendering or displaying content

The question is: How do I save draft-js content as html and later render the content (which is a html string at this point) on the page. Thought I'd share what I've learnt. Please find in the ...
Ally Jr's user avatar
  • 1,065
3 votes
1 answer
11k views

React Draft.js Wysiwyg: How to programmatically insert text at the cursor location?

I am using the React Draft Wysiwyg and I need to insert arbitrary text from one component of my application into the editor component. I am doing this via the clipboard as an intermediary for the ...
dchosen1's user avatar
  • 163
3 votes
1 answer
4k views

How to create custom key bindings in draft.js?

I press CTRL+B => I want selected text bolded. Useful links: http://facebook.github.io/draft-js/docs/advanced-topics-key-bindings.html#content - describes what keyBindingFn and handleKeyCommand do....
Evgenia Karunus's user avatar
3 votes
1 answer
3k views

React - upload an image to Imgur using axios returns ERR_HTTP2_PROTOCOL_ERROR

I'm trying to send POST request to Imgur API - to upload an image. My Imgur App is public - only Client ID is required. Always getting this error during runtime: Error: Network Error at createError (...
Almandoro's user avatar
2 votes
2 answers
5k views

Get caret position (line number) in draft.js

How do you get the caret position in draft.js? I guess you can get the block from the selectionstate and then get the block array and see at which position the block array is, but I'm not sure this is ...
ryudice's user avatar
  • 36.8k
2 votes
1 answer
2k views

How to include Attach File option in react-draft-wysiwyg?

I am trying to create a text editor using react-draft-wysiwyg. Editor code <Editor editorState={this.state.editorState} onEditorStateChange={this.onEditorStateChange} toolbar={{ ...
aham's user avatar
  • 137
2 votes
1 answer
2k views

Not able to display image in Editor

I am using draft-js and react-draft-wysiwyg package to show the Email editor for my application. I am able to show correct content but facing issue with Image. Image is not displaying in editor when ...
Mukesh Purohit's user avatar
2 votes
3 answers
3k views

Draft.js - How to trim contents

How can I trim whitespace from both ends of contents generated with Draft.js
Ming Soon's user avatar
  • 1,008
2 votes
3 answers
2k views

How to set content into mui-rte with selenium webdriver in python?

I am using mui-rte rich text editor (https://github.com/niuware/mui-rte) in a react project. I am not able to figure out how to input text to the rte input area when writing a selenium webdriver ...
Vess Perfanov's user avatar
2 votes
2 answers
3k views

How to check empty spaces in draft js Editor

How i can check empty there are empty spaces in editor? i don't want to submit form when there are empty spaces in editor. i'm using this function that detect is editor is empty or not but it does ...
Hasnain Shafqat's user avatar
1 vote
1 answer
530 views

How to delete the image (from database) after using backspace in editor ? (draftjs)

If suppose the user uploaded the image but later he decided to remove the image using backspace or delete then how it will delete from the database. Currently, it's not deleting from the database and ...
Lucas Abrantes's user avatar
1 vote
0 answers
417 views

Draft.js - createWithContent or convertFromRaw throwing error

i am trying to use Draft.js in the Blog app i am creating. It all seems fine when saving data to the database and getting it back, just i cannot seem to get createWithContent to work. I am going to ...
Francesco's user avatar
  • 569
1 vote
1 answer
2k views

How to limit spaces and breaks lines in Draft JS?

I am trying to clean my html content before save it to my database. I need to limit both vertical and horizontal spaces. I don't want to allow more than 1 space in both cases. However, the ...
John's user avatar
  • 319
1 vote
1 answer
1k views

How to insert text programmaticaly into draft js rich text field while maintaining the current inline style?

When I click on a button with a certain symbol, I'd like it to put the symbol in the text field. To achieve that I use a function for text insertion: insertText(characterToInsert) { let ...
tomashauser's user avatar
1 vote
1 answer
3k views

Draftjs apply inline styling to text programatically

I have the following function buttonToSelection(){ const editorState = this.state.editorState; var selectionState = editorState.getSelection(); const newSelection = selectionState.merge({ ...
Ando's user avatar
  • 1,792
0 votes
1 answer
2k views

Create a new entity from selection in draft.js / /Draftail, wrap existing text and link entities

I'm trying to create a new entity for Wagtail's Draftail text editor (based on draft.js). I've started off with the example here: http://docs.wagtail.io/en/v2.5.1/advanced_topics/customisation/...
urlsangel's user avatar
0 votes
0 answers
449 views

Could you inject a script into a React page (with Draft.js editor) to append HTML to the existing contents of the editor?

I'm looking to mash up Chrome Extension's ability to inject scripts with Draft.js's ability to add content to the editor. Would it be possible to inject a script like this into a React/Draft.js page, ...
11teenth's user avatar
  • 1,913
0 votes
1 answer
2k views

Text selection bug with draft.js and decorator

I'm using a draft.js editor in such a way that I need to update the decorator and also the props of the component it renders on the fly inside onChange. This to mark parts of the text with a ...
jorgen's user avatar
  • 3,495