uuHEdt(uu Html Edit)

• Download javascript includesource(include FTab) - 103.86 KB
• Another article FTab(used by uuHEdt)
• Last version & demo page (external link)
• Online Help (external link)

Introduction

Here, I would like to show you how to create an Online Web-Based WYSIWYG HTML Editor for yourself. Normally, there are so many online HTML editors, but you may not need all the functions provided by them. They may be too big (file size or many functions) for you. If you want to create your own one, this article may meet your requirements.

How to Open the designMode?

Before editing of HTML, we should turn the body's designMode on as follows:

document.designMode = "On"

but we may want to edit multiarea of one page, so first put a div where you need to put HTML editor on.

<div id="editor" style="width:400px;height:200px;"></div>

Then we will put an iframe in the div, and turn the designMode of iframe's document to on.

var id = 'editor';
var oMain = document.getElementById(id);
var s = '<iframe id="'+id+'_ifrm" style="height:100%;width:100%;" marginWidth=0';
s += ' marginHeight=0 scrolling="auto" frameborder=0></iframe>';
oMain.innerHTML = s;
var m_ifrm = document.getElementById(id+'_ifrm');
var fd = m_ifrm.contentDocument || m_ifrm.contentWindow.document;
fd.designMode = "On";

Now you can edit the text as HTML, or paste HTML into it.

If you want to set some format to the text, the following will be needed:

document.execCommand(sCommand [, bUserInterface] [, vValue]);

Next is as a sample:
BackColor: document.execCommand("BackColor","false",sColor);
FontName: document.execCommand("FontName","false",sFontName);
FontSize: document.execCommand("FontSize","false",sSize|iSize);
ForeColor: document.execCommand("ForeColor","false",sColor);
Bold: document.execCommand("Bold","false",null);

About the Source File (Sample Code)

I think this article is brief, but the source file (scripts) may be not so. This source file is named uuHEdt, and is used in my product for a long time. It handles text formatting like bold, italics and underline, has table editing, a colour picker, the ability to insert images, set target window's size for inserting a link, the ability to insert special characters, allows you to edit HTML code, etc.

The uuHEdt is small, but runs on Internet Explorer, Opera, Firefox, Google Chrome and Safari, also the panel can be resized with div's size.
The code is open source and is released under the The Code Project Open License (CPOL).

This scripts allow you to place an editor that either creates and edits HTML code using a WYSIWYG web interface or simply just writes rich text with bold, underline, italics, font changes, etc., using a web interface. It is useful if you are creating an online application that requires the use of an online editor but don't want to spend a lot of time rolling your own. Also, it is free to customize it as you need.

Using the Source File

A simple code is shown here. For full features, see the demo page.

1. Add this in the head (notice the real path of sftab.js and uuhedt.js):
   JavaScript

   <script type="text/javascript" src="sftab.js"></script>
   <script type="text/javascript" src="uuhedt.js"></script>

   * if you want to resize floating window (like View HTML code or Preview), then instead of sftab.js, you can use ftab.js, like next (should put directory of ftab at the same directory of uuhedt):

   JavaScript

   <link rel="stylesheet" href="../ftab/ftab.css">
   <link rel="stylesheet" href="../ftab/ftab_green.css">
   <script type="text/javascript" src="../ftab/ftab.js"></script>
   <script type="text/javascript" src="uuhedt.js"></script>

2. Add div contents in body where you want to put uuhedt on:
   HTML

   <div id="editor" style="width:100%;height:220px;"></div>

3. After contents, add JavaScript to initialize Editor:
   JavaScript

   <script type="text/javascript">
   function initEdt(){
     var edt = UUHEdts.getEditor('editor');
     edt.setContent('some html for edit.<br><i>sample text.</i>');
   }
   window.onload = initEdt;
   </script>

Plugin (Add Your Module)

uuHEdt is released with plugin like smile face, URL manager, image manager, color pick and so on. But perhaps you need others, so you can add them as follows.
Here three buttons have been added:

1. Image button with uuHEdt's GIF as background
2. Text button
3. Image button use of single GIF file(18x18)

<script type="text/javascript">
function addUserButtons(){
//you can add this before any UUHEdts.getEditor(...),
//then all of editors will has this buttons.
var UUHEdtUserbtn1 = {
  name : 'UUHEdtUserbtn1',
  buttons : {
    'userbtn1' : {iconx : 0, icony : 7, name : 'userbtn1'},
    'userbtn2' : {label : 'User Button1', tips : 
	'tips for user userbtn2', name : 'userbtn2'},
    //the size of iconFile must be 18x18
    'userbtn3' : {iconFile : 'icon_save.gif', name : 'userbtn3'}
  },
  onButtonClick : function(editor, pluginname, btnid, btnobj) {
    var btn = this.buttons[btnid];
    var s = '<div title="'+btn.name+'" style="display:none;width:460px;"><div title="">'
          + 'User button:'+btnid+'.</div></div>';
    var status = '<input type="button" value="'+UUHEdts.lang('OK')+'" 
onclick="UUHEdts.onPopClick(event, this,\''+pluginname+'\',
	\''+btnid+'\',\'ok\',\''+editor.id+'\');">'
        + '<input type="button" value="'+UUHEdts.lang('Cancel')+'" 
onclick="UUHEdts.onPopClick(event, this,\''+pluginname+'\',
	\''+btnid+'\',\'cancel\',\''+editor.id+'\');">';
    editor.openWin(btnobj, btn.name, s, 465, 100, status, true);
  },
  onPopClick : function(e, editor, pluginname, btnid, subbtnid, btnobj) {
    alert('sample for:'+btnid +', '+subbtnid);
    editor.closeWin();
    editor.setFocus();  }
};
UUHEdts.addPlugin(UUHEdtUserbtn1.name, UUHEdtUserbtn1);

//if added this before any UUHEdts.getEditor(...),then not need next.
  var edt = UUHEdts.getEditor('editor');
  edt.setPanel();
}

function init(){
  var edt = UUHEdts.getEditor('editor');
  edt.setContent('<i>sample text.</i>');
  //after created editor,then add user buttons
  addUserButtons();
}
</script>

Add div contents in body where you want to put uuhedt on:

<div id="editor" style="width:100%;height:220px;"></div>

Then add the following code in tag of body:

<body onload="init();">

Support for User's Event

Here, you can do something if you like.

UUHEdts.userInitLang = function(id, pluginobj, btnobj) {
  //should return id'lang
}
UUHEdts.userSavingContent = function(html) {
  //must return processed html
  return html;
}
UUHEdts.userButtonClick = function(editorobj, pluginobj, btnobj, btnid, subid) {
}
UUHEdts.userSelectedChanged = function(editorobj, pluginobj, btnobj, btnid, selValue) {
}
UUHEdts.userPopClick = function(editorobj, pluginobj, btnobj, btnid, subid) {
}
UUHEdts.userCloseWin = function(editorobj) {
}
UUHEdts.userEditorDblClick : function(e, editorobj, element) {
}

Pick Color Can Work Separately

pickColor is released with uuHEdt, but you can use it separately. There is a sample at Online Help.

History

• First released on 2009/06/26
• Updated on 2009/09/26 - Added extend style
• Updated on 2010/05/01 - Added double click event
• Updated on 2010/10/01 - Pick color is separately, added custom function for upload image or files

For details, visit http://www.uuware.com/js_uuhedth_en.htm.