draftjs

问题 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 = `<div class="heading"> This text needs to display along with the <span> html tags </span> surrounded </div>`; const handleInputChange = (e) => { console.log("event ", e.target.value); }; return ( <> <ContentEditor name="dynamicContent" value={dynamicData} onChange={(event) => handleInputChange(event)

问题 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 = `<div class="heading"> This text needs to display along with the <span> html tags </span> surrounded </div>`; const handleInputChange = (e) => { console.log("event ", e.target.value); }; return ( <> <ContentEditor name="dynamicContent" value={dynamicData} onChange={(event) => handleInputChange(event)

问题 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/extending_draftail.html#creating-new-entities I have the extension working as a proof of concept, in that it will take a selection and wrap it in a footnote entity. However, I need to be able to preserve existing link entities, so that they become children of the new footnote entities. I've tried

问题 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 a reliable way, or even the best way. 回答1: Not sure if this is what you mean, but you can get the index of the current block like this: const currentBlockKey = editorState.getSelection().getStartKey() const currentBlockIndex = editorState.getCurrentContent().getBlockMap() .keySeq().findIndex(k =

问题 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 show you most of my code for clarity, apologise if it may seem too much. This is how i set-up the project: this is the post model const postSchema = new mongoose.Schema( { title: { type: String, required: true, }, image: { type: String, required: true }, images: [String], paragraph: { type: String,

问题 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 show you most of my code for clarity, apologise if it may seem too much. This is how i set-up the project: this is the post model const postSchema = new mongoose.Schema( { title: { type: String, required: true, }, image: { type: String, required: true }, images: [String], paragraph: { type: String,

问题 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. https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/rich/rich.html - lengthy example. https://www.youtube.com/watch?v=0k9suXgCtTA - great video explaining how to add a button that will toggle boldness. 回答1: We need to pass two props to our <Editor/> : keyBindingFn : maps CTRL +

问题 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 array of objects. Now I need to recreate the editorState with that data. Example: I have a plain text like this: const content = '@marcello we need to add spell check' And a mentions array with objects like this: const mentions = [{ length: 8, offset: 0, user: 'user:59441f5c37b1e209c300547d', }] To

问题 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 javascript replace() function seems to be inappropriate. content = content.replace(/( ){2,}/gm," ") //horizontal spaces content = content.replace(/(<p><br><\/p>){2,}/gm,'\v') //Vertical spaces None of the above operations tried above seems to be working. Moreover html tags are not recognized in my regex

问题 How can I trim whitespace from both ends of contents generated with Draft.js 回答1: Maybe exist a more elegant solution, but when I faced with the same problem I solved it with this code: if(typeof String.prototype.trimLeft !== 'function') { String.prototype.trimLeft = function() { return this.replace(/^\s+/,""); } } if(typeof String.prototype.trimRight !== 'function') { String.prototype.trimRight = function() { return this.replace(/\s+$/,""); } } Here I add trimLeft and trimRight methods for