Simple WYSIWYG Text Editor

By Denis Sellu on Aug 10th, 2010 3:30 am

This is a very simple WYSIWYG Text editor that only has three options Bold, Italic, and Underline. just copy and paste on the page you want it on. it is really easy to add more features.

ENJOY

<style>
#btnB{
  font-weight: bolder;
}
#btnI{
  font-style: italic;
}
#btnU{
  text-decoration: underline;
}
</style>

<script type="text/javascript">  
var obj;
function Init(){
  obj = document.getElementById("rte");
  obj.contentWindow.document.designMode = "On";
}
function RTEDo(name){
  obj.contentWindow.document.execCommand(name, false, null);
}
</script>

<body onLoad="Init();">
<input type="submit" name="btnBold" value="B" id="btnB" onClick="RTEDo('bold');" />
<input type="submit" name="btnItalic" id="btnI" value="I" onClick="RTEDo('italic');" />
<input type="submit" name="btnUnderline" id="btnU" value="U" onClick="RTEDo('underline');" />
<br />
<iframe id="rte">
</iframe>
</body>

1 Year Ago

Why use iframe tag? Also, this is not really useful because when someone thing about WYSIWYG editor, a portion of text style could be changed. This code snippet is too simple and not really useful for me. You may try again but work with range selection (cross-browser if you want to learn even more). I have already done it for my work, so it is a good way to learn JavaScript too.

Taywin

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

1 Year Ago

does it work on all browsers?

Acute

Junior Poster

129 posts since Mar 2009

Reputation Points: 8

Solved Threads: 3

1 Year Ago

Why use iframe tag? Also, this is not really useful because when someone thing about WYSIWYG editor, a portion of text style could be changed. This code snippet is too simple and not really useful for me. You may try again but work with range selection (cross-browser if you want to learn even more). I have already done it for my work, so it is a good way to learn JavaScript too.

yes i know its simple. Thats why i called it SIMPLE WYSIWYG TEXT EDITOR, and yes it works on all browsers

ApocDen

Junior Poster

126 posts since Jul 2010

Reputation Points: 11

Solved Threads: 13

1 Year Ago

SIMPLE WYSIWYG TEXT EDITOR

I'm sorry, but this is not simple WYSIWYG text editor, but it is simple changing text style. Maybe your definition of 'editor' is different compared to mine (and could be many others as well).

By the way, the snippet should work in all browser, but with these little code and functionality, it is pretty much useless...

Taywin

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

This article has been dead for over three months

You