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.
744
questions
0
votes
0
answers
8
views
How to Prevent Text Deletion in Draft.js for IMMUTABLE Entities?
I'm currently working on integrating Draft.js, a rich text editor framework, into my application. I'm encountering a specific issue where I want to prevent the deletion of text within the editor.
Here'...
0
votes
0
answers
20
views
Wysiwyg editor gives an error when the editor is empty no text is written in it and i hit the backspace button in the editor
I use Nextjs with Typescipt. This is my code of editor component
import {EditorState, ContentState, convertFromHTML} from 'draft-js'
import {EditorWrapper} from "src/@core/styles/libs/react-draft-...
0
votes
0
answers
25
views
Using Custom option component in toolbar React Draft Wysiwyg
const TextAlign = (props) => {
console.log('PROPS:', props)
return (
<button
type="button"
onClick={() => {
...
0
votes
0
answers
6
views
DraftJS: Trying to figure out how to get an external keyboard to trigger deletion and next line
I have set everything up so that my external keyboard is successfully inputting data into draftjs no matter the language coming from the keyboard with exception of being able to go to the next line or ...
1
vote
0
answers
78
views
how to convert draft js block response to html string with text alignment?
In my React project, I'm using the Draft.js editor with alignment plugins to allow users to align text. Now, I want to export the content from the editor to a PDF file. To do that, I need to convert ...
0
votes
0
answers
11
views
DraftJS - Make first N character of the editor static
If there a way to make the first N characters of the Editor to be static.
I tried using a decorator, but when you select all characters and press delete, it deletes the entire data.
0
votes
0
answers
61
views
Adding Table Support to Draft-js Text Editor: Exploring the draft-js-table-plugin Library
In our project, we are using the draft-js text editor. I am currently attempting to add table support to the text editor.
After trying to implement it myself and realizing that the task was too ...
1
vote
1
answer
35
views
Cannot read property 'getIn' of undefined in nextjs
Iam facing the error "Cannot read property 'getIn' of undefined" when running my code. Does anyone know how to fix this.
How to reproduce:
just write "aa"
this is my code:
import ...
0
votes
1
answer
46
views
Facing issues showing HTML formatted data of draft js in UI
I am facing an issue showing my text in HTML format you can see below I am getting output correctly from the editor but when I display this text in my UI that style is not getting applied
Getting ...
0
votes
0
answers
30
views
Cant make text editor with draft,js
I have a basic component of text editor with draft js
The problem is that I can't choose a font, font size, color, add a photo, choose an emoji, or create a link.
What do I need to do to make this ...
0
votes
0
answers
42
views
How to nest an image inside the link in react-draft-wysiwyg
The react-draft-wysiwyg library is used
As a result, I need to be able to make images links.
So that the resulting html would be something like this:
<a href="some-addr">
<img ...
0
votes
1
answer
32
views
When using MUIRichTextEditor as a redux form Field cursor keeps returning to start
When using MUIRichTextEditor as a redux form field, with every key stroke, redux updates the store and then my component render function is called. I want to set the new value of the ...
0
votes
0
answers
26
views
Using a Chrome Extension content script, how to replace user selected text in a DraftJS editor with some other text
I am developing a Chrome Extension with a content script that injects a button onto a webpage. The webpage has a DraftJS editor and I need to replace any user-selected text with a string of question ...
0
votes
0
answers
45
views
How to change the default value of toolbar in WYSIWYG editor in React JS
Have customized only the required toolbar to present in my editor. Need to change the default text of dropdowns present in the WYSIWYG editor
Tried to place the default Value and tried to concat the ...
0
votes
0
answers
23
views
i want to upload image in draft js editor. image completely uploaded in server but draft js can not store url in img block
I want to upload Image in draft js Editor. when i upload image in server then it successfully uploaded in server and get back imageurl. i want to save this url in <img src="" /> src ...
0
votes
0
answers
59
views
Draftjs toolbar loses formatting state when Editor is focused
I'm using draft-js and react-draft-wysiwyg to build a rich text editor but I'm having an issue.
Before interacting with the Editor, if you enable bold/italic before typing and focus the Editor, the ...
1
vote
0
answers
21
views
Draft.js editor still shows updates even when the onChange function is not working
I am currently working with Draft.js and I have encountered an unexpected behavior. Despite the onChange function not working, the Draft.js editor continues to display updates in its content. I have ...
1
vote
1
answer
516
views
LexicalJS text editor : how can I allow users to add text pressing buttons
I'm trying to figure out Lexical but the docs are not great at all (despite the project looking very nice). I'm trying to add content into the editor automatically by getting my users to press some ...
0
votes
0
answers
56
views
In draft.js editor I customized the code to set the Text Style to BOLD after typing "* "
if(text.length > 1)
subString = text.substring(text.length-2, text.length);
if(subString == "* ")
{
toggleInlineStyle("BOLD");
text ...
0
votes
0
answers
19
views
Header text format after typing # in draft js
When I type in #, I want the following text after # in **HEADER **format in draft Js and React JS, Any idea how to do that?
I am getting all the results in button styles format, while what I need is ...
0
votes
0
answers
25
views
Draftjs - how to select a word that was mouse clicked
I would like to be able to find the start and end offset of a word that was mouse clicked inside the draftjs editor area. I know how to get current selection etc. but cannot figure out how to find the ...
0
votes
1
answer
117
views
How can I insert content at the beginning of my EditorState in Draft.js?
So I'm trying to write a method to insert a given string to the beginning of the EditorState.
Basically the string should always be at the beginning, the font style should be italic, there should be a ...
0
votes
0
answers
61
views
How to change font size of selected text in draft.js
I am using draft-js-plugins. This library does not have to change the font or font size. I need that when a text is selected it changes its font and size to the one selected. As in google docs.
To ...
0
votes
0
answers
33
views
Why can't I change font family?
I am using react draft wysiwyg to implement a text editor into my application. I have removed font family selection from the toolbar and want to style the editor content using the same font family as ...
2
votes
1
answer
742
views
react-draft-wysiwyg The converted base64 for image is overflowing from the upload image field
I have a working react-draft-wysiwyg editor application. I am able to add images to editor using this. There is one issue i am facing , please check this below :
Here's the code so far what i've ...
0
votes
0
answers
27
views
Is it possible to convert draft-js ContentState to an openxml document?
I'm looking at the React component draft-js, a rich content editor which creates a blob of text called "ContentState". I have a React 18 web application created using create-react-app.
Is it ...
0
votes
1
answer
967
views
How to get the rendering in the correct format using Lexical Editor
I'm trying to write a blog for myself for the first time, and I've been using Lexical(facebook/lexical: https://github.com/facebook/lexical) to build a rich text editor in the panel for the past two ...
0
votes
0
answers
64
views
how to add react clickable button element as text input along with free text in draftjs?
im aiming for a rich text input text component that enable user to type free text but also can insert tag/button-like element to the text box whenever user select something from select dialog similar ...
0
votes
1
answer
80
views
how to re-populate draft js with a given text
so the following function appends the given text to the existing text in the editor, but what I want is to totally replace whatever exists.
const sendTextToEditor = (editorState, text) => {
...
0
votes
0
answers
84
views
Add dynamic default value in draft js
I wand to add dynamic value as default value in my draft-js form. Here is what I am doing:
setEditorState(
EditorState.createWithContent(
ContentState.createFromBlockArray(...
0
votes
2
answers
406
views
React - Drag'n'Drop Image upload into DraftJS Wysiwyg
I have implemented DraftJS Wysiwyg HTML Editor into my form, including the Drag n Drop plugin and it works good. See below for current implementation.
What I want to achieve is that I want to trigger ...
0
votes
0
answers
191
views
How to set max-limit character when markup is applied - Draft js - react-draft-wysiwyg
This answer is only working if the editor has only text inside.
max-length check is not working if markup is applied to the text like bold or italics.
Can anyone please help me in this case.
...
1
vote
0
answers
41
views
React-draft-wysiwyg contents not editable [duplicate]
I'm new here. I'm currently building an editor using React-draft-wysiwyg editor. I was able to send my data to the backend and call it back. However, when I bring it back onto the Editor, I can't make ...
0
votes
1
answer
217
views
Unable to edit text in Draft.js editor when setting it with data from Firebase
I created a blog app using Draft.js and I'm a bit stuck on the EditPost.js file. I am able to import the data from an existing post into the editor but unable to edit the text at all. The cursor just ...
0
votes
0
answers
28
views
Rendring every word as a span in DraftJS
I want to use DraftJS for a project but I want every word to be wrapped in a span tag and have some attributes like this
<span>
<span class="example" style="color:red;"...
1
vote
0
answers
111
views
How to do string manipulation Draft.js editor without losing the changes?
What I'm trying to do is edit some text on Reddit.com using browser console. I'm creating an extension that appends some text to the comment. Reddit uses Draft.js as its text editor. When I try to ...
1
vote
0
answers
36
views
How do I highlight words starting with a dollar sign in Draft.js
I'm trying to change the font colour for words starting with a dollar sign ($). I believe this should be possible in Draft.js as both stocktwits and twitter appear to use this library and changing of ...
0
votes
0
answers
67
views
Draft JS Mention Suggestion dropdown doesn't show up
The openMentionSuggestions value never changes to true and dropdown never shows, what's the problem?
0
votes
1
answer
577
views
Hide some tools from React Draft Wysiwyg text editor toolbar
Is there any way to hide some unnecessary tools from the React Draft Wysiwyg toolbar and change the toolbar order?
Editor:
<Editor
editorState={editorState}
onEditorStateChange={...
1
vote
1
answer
79
views
'Missing draft message' in Javascript
I am working on this issue from last 3 days. I dived through the stack overflow, but of no use. There are the questions about "Missing draft message", but I am still getting this message. I ...
0
votes
0
answers
450
views
How to convert RTF ANSI to HTML using Javascript or Any React text editor which support RTF format
I have to render RTF ANSI format data in the React Draft Wysiwyg / any other react editor.
we are getting API response as RTF ANSI format, which I have render in the rich text editor after any changes ...
0
votes
0
answers
156
views
How to display Link from a comment in DraftJs editor?
I am pretty new to draft Js.
I have tried using many ways to display link in draft js editor from a string where the string may be like:
Here is the story [HyperLink](https://exampleHyperLink.com) ...
0
votes
0
answers
106
views
draft-js convert to html to display on page
I'm looking for some help on how to convert a string of html like below to draftjs and convert back to html to display on a page as html without a rich text editor or WYSIWYG:
const htmlString = `<...
0
votes
0
answers
184
views
Can’t insert text after inserting image in edit mode draft.js
I first upload the image to s3 through my draft.js editor.
The image is saved and everything working well. But when I open draft.js to edit the content, I can’t add some text.
It seems that the part ...
0
votes
0
answers
95
views
draft-js-link-detection-plugin save to html with link?
So, what I'm trying to do is use this draftjs plugin to save text already formatted as HTML so I can insert it as HTML in my div to have clickable links, I already saw these examples and guides and ...
0
votes
0
answers
386
views
react-draft-wysiwyg mention suggestions are not getting clicked at once in mobile view
I used react-draft-wysiwyg editor. It is working fine in desktop mode, but in mobile view it has a small issue. When I click on a mention suggestion, it doesn't get clicked at once. Also, if I first ...
3
votes
0
answers
71
views
ReferenceError: Window is not defined while importing htmlToDraft from html-to-draftjs on Node.js
I wrote a separate function to convert html to draftjs, there I used htmlToDraft function from
html-to-draftjs.
The Function:
const htmlToDraftBlocks = (html) => {
const blocksFromHTML = ...
1
vote
0
answers
584
views
DraftJs : Custom toolbar button to add a specific html element to editor
I'm tring to create a customized Rich text editor.
How can I add a custom toolbar button with a custom function behind it to the draftjs + react-draft-wysiwyg editor?
When user click on the custom ...
0
votes
0
answers
79
views
How to insert RTF data in React Rich text editor like draft or tinymce
I have RTF string like below I want this to render/insert in text editor, please provide any possible option
'{\rtf1ansi{\fonttbl\f0\fswiss Helvetica;}\f0pard This is some {\b bold} text.par }'
...
0
votes
0
answers
81
views
Draft.js clears empty elements in react
I use draft js Editor. There is no problen when typing in Editor. I can create empty lines a lot. This is my state:
<p>first line</p>
<p></p>
<p></p>
<p>&...