Stack Overflow
Stack Overflow

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.

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

Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.

In Draft.js, everything is customizable – it provides the building blocks so that you have full control over the user interface.

You can learn more about Draft.js here.

746 questions
4
votes
3 answers

How to store rich-text in database

I want to store data that is being edited with Draft.js and React (in the UI) into a MySQL database. I am not sure in which format should I store my data, so that I can fetch the data from database and display it on the page with the formatting…
chitresh jain
  • 49
  • 1
  • 2
4
votes
2 answers

Validation of draft-js EditorState via yup in Formik

I'm using Draft-js with Formik with yup for validation of the Draft EditorState component. I assumed I would be able to check that EditorState is not blank by using the following yup test: //Each note has a string title and a body, which is a Draft…
gatlanticus
  • 1,158
  • 2
  • 14
  • 28
4
votes
1 answer

DraftJS: how to move the focus (cursor) to some character on the right, programmatically?

I am inserting some text in the editor using this: _insertText(text) { const { editorState, onChange } = this.props const newContentState = Modifier.insertText( editorState.getCurrentContent(), editorState.getSelection(), …
acmoune
  • 2,981
  • 3
  • 24
  • 41
4
votes
3 answers

Add target="_blank" to all links in Draft.js content

I am trying to add target="_blank" to all the links in Draft.js content. I am new to this library, so my initial attempt is to simply iterate through all the entities and identify the LINK entities. However the entity map is coming up empty even…
Naresh
  • 23,937
  • 33
  • 132
  • 204
4
votes
1 answer

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. But when I try to use this data and transform raw…
Muhammad Ateeq Azam
  • 1,009
  • 1
  • 12
  • 26
4
votes
1 answer

Draft.js cannot insert uploaded image from external form

Over my simple draft.js project I try to insert an image uploaded from an external form into the editor's content. The editor I use is the react-draft-wysiwyg that internally uses the draftjs editor. My editor is rendered from the…
Dimitrios Desyllas
  • 9,082
  • 15
  • 74
  • 164
4
votes
1 answer

How can I configure isomorphic-style-loader to load a node module?

I'm trying to use the react-draft-wysiwyg module, but the imported styles associated with the module aren't being utilized. I think this is due to the imported css being loaded into a hash whereas the class attributes of the elements in the module…
AstroBoogie
  • 498
  • 5
  • 17
4
votes
1 answer

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
  • 118
  • 2
  • 9
4
votes
0 answers

Set text programatically in already initialized draft.js editor

This is my component in it's current state. class TextInput extends React.Component { constructor(props) { super(props); this.state = { editorState:…
Willy G
  • 1,172
  • 1
  • 12
  • 26
4
votes
2 answers

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 = createEmojiPlugin({theme}); Unfortunately, this…
Boris Zagoruiko
  • 12,705
  • 15
  • 47
  • 79
4
votes
1 answer

React - redux-form initialValues with draftjs

I am trying to use draft-js for Rich Text Editor in my app, with redux-form, the problem I am facing is I am not able to populate initialValues into the Editor from draft-js, my code looks like this
iphonic
  • 12,615
  • 7
  • 60
  • 107
4
votes
0 answers

Draft.js new line after and before IMMUTABLE entity

how to get rid of a break after and before every IMMUTABLE object in editor. When I add image for example. const contentStateWithEntity = contentState.createEntity( "image", "IMMUTABLE", { src: urlValue } …
Piotr Leniartek
  • 1,177
  • 2
  • 14
  • 33
4
votes
1 answer

How to give a focus effect to my Draft JS Editor border?

I understand that the draft js editor is not a classic textarea element. I applied some styles to make it look better. However, i can't find this little trick that doing a natural html focus effect when i'm focusing on my draftjs editor. I am not a…
John
  • 179
  • 1
  • 4
  • 13
4
votes
4 answers

Empty elements removed when using convertFromHTML()

I'm trying to populate a Draft.js 0.10.0 editor with some HTML content when it initializes. The problem is that any HTML block elements that don't have text in them don't get converted to ContentBlocks. So all of the extra spacing from line breaks…
Paul
  • 1,907
  • 2
  • 21
  • 29
4
votes
1 answer

How to display the saved Draft-JS data in the Editor? (React + Meteor)

I am trying to keep the saved content in the Editor (after refresh for instance). Currently, the content comes from the DB to the console.log and displays as expected. But I can't keep it in the Editor. [Edit] Removed the draft project link, see…
user6198643
1 2 3
…
49 50