CODEWITHSUNDEEP
javascripteditorwysiwyg
Jennifer Zhou
Jennifer Zhou

Reputation: 343

Program my own WYSIWYG medium-like editor

As a project, I want to try programming my own WYSIWYG editor (kind of similar to https://github.com/yabwe/medium-editor ) or at least be able to edit the already created medium-like editor to include my own functionalities. Can someone give me guidance on editing the yabwe medium-editor to include my own functionalities? Which classes would I edit to include/delete a function. If I wanted to program my own editor, how do I get the editor to pop up when I highlight some text. Thank you!

Upvotes: 0

Views: 365

Answers (1)

Rohith Murali
Rohith Murali

Reputation: 5669

What you need primarily is a div with contenteditable attribute. You can set data inside it using dangerouslysethtml prop in react or setinnerhtml in normal javascript. You will be able to type inside it, and use onChanged event to capture the changes inside the div and make the text styles inside this function

document.getElementById("inner").innerHTML = "Paragraph changed!";
#inner{background:yellow}
<!DOCTYPE html>
<html>
<body>

<div class="outer" contenteditable="true">This is a paragraph. <span id="inner"></span> Try to change this text.</div>

</body>
</html>

Upvotes: 1

Related Questions