While I agree wholeheartedly with Jason, the point of this question is to enable you to create such an application. I do not know why you would do something like that, and I don't think it's the point, so I will try to give you the hints you need.

1. Don't try to build a WYSIWYG editor, yet. Start by planning ahead with pen and paper. Create a design which you can use to develop the application.
2. Don't try to build a WYSIWYG editor, yet. You asking this question here means that you probably are a quiet new developer. Before going ahead and then getting stuck and demotivated, inform yourself about the proper way to write a web application. Learn about the separation of content and style. Learn about CSS architecture. Learn about how to use a search engine, get good results and interpret them the right way. Learn about JS and programming patterns. You don't have to remember everything or do other projects for practice. Just knowing what kind of stuff is out there is a lot more important, so that once you reach a certain point, you can use that knowledge to experiment with things in the right place on your big project.
3. Don't try to build a WYSIWYG editor, yet. Crack down the big problem of writing such an editor into many small problems. What is the MVP? You could start by creating a UI structure and a way to just drag and drop buttons onto the website canvas. What is the next step? Add a way to edit the caption, size and onclick handler. How will you go on from there? Add another element, which reuses all the code from the button (maybe an h1 element?)
4. You might not have noticed, yet, but you already are building a WYSIWYG editor! Just this time, it's not the big problem you are facing, but a lot of small ones you work on systematically. Your focus of question, by now, should have shifted from "How do I build a WYSIWYG editor" to "how can I create a new element with JS, move it around and stick it to the cursor". Realizing this step is a great milestone in your life as a developer!
5. Keep going. Let others use your editor and ask them for their opinions. Most of the time, you will be so happy about certain stuff working, that you forget that users will take that for granted and are not interested in how it works at all. So take any feedback you can get from other (ideally non-technical) people and incorporate that feedback. It will improve the UX, let you practice by redoing work and gets you ready for professional work, which requires you to look out for details and often spend many hours doing boring improvements :D

Well. While I didn't include any technical stuff, I really think that such a thing is not necessary here. You will find so many problems along the way, that whatever I wrote here would never help you get to the goal. It is important that you learn how to do it yourself. Well, you could say, instead of giving you instructions, I give you Google ("give a man a fish..." - you know what I mean).

One last thing: In order to improve and get things done, it is important to stay motivated. In order to stay motivated, have fun. If what you do is no fun, change something so that you have fun!

I'm not sure if there's a misunderstanding between the question and all responses? I think what he seeks is (2)

1. First creating a simple right text editor as here on Hashnode is not that hard and impossible. The problem is of course copy and paste, but instead of trying to understand every input format, try to see if it's recognizable, if not insert as plain text, and then add up known formats. It's not breaking semantics if it's made correct.
2. Second I read it as he needs a visual component builder, thats for sure doable, but still not an easy task. But here the concept is to drag divs into placeholders (remember Googles start page thing 10 years ago) and click on an edit icon to edit some values in it. It wouldn't break semantics in any way but you have to make it as form inputs for every feature as the title etc.

You don't because the concept itself is flawed -- since starting out with what it looks like instead of what things ARE pisses on the entire reason HTML even exists, concepts like semantics and separation of presentation from content, resulting in websites that are nothing more than a giant middle finger to users.

That's why not one single WYSIWYG in the history of web development has created a website that was worth a flying ****! They are the pinnacle of developer ignorance and incompetence, and at BEST are little more than nube predating scam-bait!

You take content of value or a reasonable facsimile of future content, mark it up SEMANTICALLY (a sick euphemism for "use HTML correctly") with ZERO concern for what it looks like, then bend that markup to your will with CSS using semantically neutral containers like DIV and SPAN where and only as needed.

THAT is design. Dicking around with what it looks like from the start is called graphic arts.