Simple WYSIWYG Text Editor

ApocDen 0 Tallied Votes 337 Views Share

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>
Taywin 312 Posting Virtuoso

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.

Acute -2 Junior Poster

does it work on all browsers?

ApocDen 0 Junior Poster

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

Taywin 312 Posting Virtuoso

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.