search

How to build your own WYSIWYG

Editor
Sai gowtham May 2 '18 ・1 min read

#javascript #webdev #wysiwyg #css

Have you seen WYSIWYG editors Today I'm showing the simple
version of WYSIWYG editor.

If you're familiar with HTML and JavaScript then you're good to go.

So let's start our simple version

I'm not explaining everything but Important things

first, we need to add a contentEditable a ribute to our HTML

element

<div class="editor" contenteditable>

<h1>Simple Html editor</h1>
<p>Good to start</p>
</div>
30 14 62
 search
Now, div element is editable and our HTML document exposes
execCommand.

Let's see what is execCommand

document.execCommand(cmd,defaultUI,value);

execCommand needs three arguments

cmd : It means we have to tell which command needs to execute.
example:'bold' commandslist

defaultUI :it is boolean whether default user interface is shown or

not.

value : We need to add value argument to some commands.

example: In createLink cmd, we need to add a value it refers to href
a ribute in the link.

So lets make it use of execCommand in practice

Now I'm creating bu on HTML element and a ached an event

listener to it.

<button class="tool-items fa fa-bold"

onclick="document.execCommand('bold', false, '');">
</button>

Now we are only built bold command Check out full version below.
30 14 62
 search
Html editor
    saigowtham
A P E N B Y    
Edit Pen

     

Settings

Simple Html editor

Good to start

Log Out

GetHtml GetText Pri ntHtml

dev.to now has dark mode.

Select night theme in the "misc"

section
30
of your 14
settings ❤ 62
 search

Sai gowtham + FOLLOW

JavaScript developer, Writer & Serverless
@saigowthamr saigowthamr saigowthamr reactgo.com

Add to the discussion

PREVIEW SUBMIT

Sep 23 '18
Krati Agarwal

Nice post. Thanks for sharing.

3 REPLY

May 4 '18
Carlos Galarza

Good post!

1 REPLY

May 4 '18
Nicholas ―M―

I had no idea about execCommand. I'll play around with this later; thank you for sharing!

1 REPLY

Jan 28
João Eudes Lima

Good!

1 REPLY

code of conduct - report abuse

30 14 62
 Classic DEV Post from Oct 30 '18
search

Say something nice about another DEV member

Ben Halpern

You've probably learned something or benefited from someone's contributions to ...

73 116

Another Post You Might Like

10 Podcasts for Developers in 2019

Vaidotas Piekus

My top 10 list of dev podcasts in 2019

202 24

Another Post You Might Like

Angular Architecture Patterns and Best Practices (that

help to scale)
Bartosz Pietrucha

This article was originally posted on Angular Academy by @pietrucha. Building sc...
306 14

How Atlassian implemented Multi-tenant architecture

Paramanantham Harrison - Jul 31

What about Object.Method().Property in Typescript?

Bruce Axtens - Jul 31

30 14 62
 Would
search you build social images with code?
Zane Milakovic - Jul 31

😰 Optional chaining trap !

Antoine Caron - Jul 31

Home About Privacy Policy Terms of Use Contact Code of Conduct

DEV Community copyright 2016 - 2019  🔥

30 14 62