abstract:
<input type="submit" name="btnBolrd" 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');" />
<input type="submit" name="btnColor" id="btnC" value="red" onClick="RTEDo('color');" />
<input type="submit" name="btnLink" id="btnLink" value="Link" onClick="RTEDo('link');" />
<br />
<iframe id="rte">
</iframe>
</body>
</html>
I have a textarea that has a Bold, Italic and Underline buttons that change the appearance of what is in the textarea.
If I highlight a word in the textarea and hit the Bold, Italic and Underline buttons it changes the appearance of the word.
Everything works great and now I want to add a color button and Link button. The color button should change the word color and the link button should make the word into a link.
Both buttons dont do anything.
Please advise what I am doing wrong and how to make them work?
Code:- <style>
- #btnB{
- font-weight: bolder;
- }
- #btnI{
- font-style: italic;
- }
- #btnU{
- text-decoration: underline;
- }
- #btnC{
- font-color: red;
- }
- #btnLink{
- A:active;
- }
- </style>
- <html>
- <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="btnBolrd" 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');" />
- <input type="submit" name="btnColor" id="btnC" value="red" onClick="RTEDo('color');" />
- <input type="submit" name="btnLink" id="btnLink" value="Link" onClick="RTEDo('link');" />
- <br />
- <iframe id="rte">
- </iframe>
- </body>
- </html>
|
