954,593 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?

Simple WYSIWYG Text Editor

0
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>

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
 

does it work on all browsers?

Acute
Junior Poster
129 posts since Mar 2009
Reputation Points: 8
Solved Threads: 3
 
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
 
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

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: