uuHEdt(uu Html Edit) Online Help

Feedback & Discuss

Online Help for uuHEdt

uuHEdt(uu Html Edit) is published on CodeProject. There you will find the discussion board.

base use of uuHEdt.

getContent from uuHEdt and setContent to uuHEdt.

getSelHtml from uuHEdt and pasteHTML to uuHEdt.

use of uuHEdt with FTab(Floating Tabs).

add custom button(addPlugin) to toolbar of uuHEdt.

change the interface of all buttons.

change current language.

add new language and set as default.

do special replace while SavingContent.

do special action while ButtonClick.

show you how to use of pickColor.

List base use of uuHEdt

base function for blogs or guestbooks.

List getContent from uuHEdt and setContent to uuHEdt

the base function to get HTMl or set HTML of uuHEdt.

List getSelHtml from uuHEdt and pasteHTML to uuHEdt

getSelHtml will get the selected HTML, and pasteHTML will paste your HTML to replace the selected HTML.

<html><head>
<title>uuHEdt(uu Html Edit)</title>
<script type="text/javascript" src="sftab.js"></script>
<script type="text/javascript" src="uuhedt.js"></script>
<script type="text/javascript">
function init(){
  var edt = UUHEdts.getEditor('editor');
  edt.setContent('<i>sample text.</i>');
}
function pHtml(){
  var o = document.getElementById('edit1');
  var edt = UUHEdts.getEditor('editor');
  edt.pasteHTML(o.value);
}
function gHtml(){
  var o = document.getElementById('edit1');
  var edt = UUHEdts.getEditor('editor');
  o.value = edt.getSelHtml();
}
</script>
</head>
<body onload="init();">
getSelHtml will get the selected HTML, and pasteHTML will paste your HTML to replace the selected HTML.<br>
  <div id="editor" style="width:100%;height:220px;"></div>
  <input TYPE="text" id="edit1" style="width:100%;" VALUE="some html for edit1.<br><i>sample text.</i>"><br>

</body>
</html>

List use of uuHEdt with FTab(Floating Tabs)

with FTab, then the dialogs of uuHEdt can be resized.

List add custom button(addPlugin) to toolbar of uuHEdt

add simple custom button.
use text label button.
use user's image file as background of button.

<html><head>
<title>uuHEdt(uu Html Edit)</title>
<link rel="stylesheet" href="ftab.css">
<link rel="stylesheet" href="ftab_green.css">
<script type="text/javascript" src="ftab.js"></script>
<script type="text/javascript" src="uuhedt.js"></script>
<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>
</head>
<body onload="init();">
  add simple custom button.<br>
  use text label button.<br>
  use user's image file as background of button.<br>
  <div id="editor" style="width:100%;height:220px;"></div>
</body>
</html>

List change the interface of all buttons

the background icon of buttons is loaded from one image file, if reset this file, then change the interface of all buttons.

List change current language

uuHEdt is released with only english, you can change the text without add another language.

List add new language and set as default

add new language is simply.

//set default lang to JA, must set this before any of new Editor or UUHEdts.getEditor().
UUHEdts.setDefLang('JA');
}

function init(){
  addLangs();

var edt = UUHEdts.getEditor('editor');
  edt.setContent('<i>sample text.</i>');
}
</script>
</head>
<body onload="init();">
  add new language is simply.<br>
  notice the tips of Help and About is changed.
  <div id="editor" style="width:100%;height:220px;"></div>
</body>
</html>

List do special replace while SavingContent

while getContent from uuHEdt, will call your functions for special replace.
here is the sample turm HTML to XHTML use of html2xhtml.js, notice the HTML output, all tag <br> is changed to <br />.
also if want turn to BBCode, then do next at UUHEdts.userSavingContent:
    html.replace(/\n/gi,"");
   html.replace(/<strong>(.*?)<\/strong>/gi,"[b]$1[/b]");
   html.replace(/<em>(.*?)<\/em>/gi,"[i]$1[/i]");
   html.replace(/<span.*?style="text-decoration:underline;">(.*?)<\/span>/gi,"[u]$1[/u]");
   html.replace(/<ul>(.*?)<\/ul>/gi,"[list]$1[/list]");
   html.replace(/<li>(.*?)<\/li>/gi,"[*]$1[/*]");
   html.replace(/<ol>(.*?)<\/ol>/gi,"[list=1]$1[/list]");
   html.replace(/<img.*?src="(.*?)".*?>/gi,"[img]$1[/img]");
   html.replace(/<a.*?href="(.*?)".*?>(.*?)<\/a>/gi,"[url=$1]$2[/url]");
   html.replace(/<br.*?>/gi,"\n");
   html.replace(/<.*?>.*?<\/.*?>/gi,"");

List do special action while ButtonClick

while user click any buttons of uuHEdt, will call your functions.

List show you how to use of pickColor

pickColor is released with uuHEdt, but you can use it separately.

p.innerHTML = html;
    var tb = 'tab:0;';
    if(p.childNodes && p.childNodes.length == 1){
      var o = p.firstChild;
      obj.o = o;
      o.id = 'UUHEdt_ContW'+ind;
      if(o.childNodes.length > 1){
        tb = 'tab:1;';
      }
    }
    if(typeof(status) == 'string') tb += 'status:1;';
    else tb += 'status:0;';
    if(resize) tb += 'resize:1;';
    else tb += 'resize:0;';
    var w = null;
    if(typeof(FTab) == 'function'){
      var w = FTab('UUHEdt_ContW'+ind,0,0,w,h,'modal:1;cookie:0;center:1;minmax:0;fixed:0;scroll:0;'+tb);
    }
    else if(typeof(SFTab) == 'function'){
      var w = SFTab('UUHEdt_ContW'+ind,0,0,w,h,'modal:1;cookie:0;center:1;minmax:0;fixed:0;scroll:0;'+tb);
    }
    else{
      alert('Need FTab(Floating Tabs) or SFTab(Simple Floating Tabs)!');
      return false;
    }
    obj.w = w;
    w.show();
    if(status) w.setStatus(status);
  }
  this.closeWin = closeWin;
  function closeWin()
  {
    if(this.wlst.length <= 0){
      return;
    }
    var obj = this.wlst.pop();
    obj.w.hide();
    //clear prev
    var p = document.getElementById('UUHEdt_Cont' + (this.wlst.length+1));
    if(p){
      p.innerHTML = '';
    }
  }
  oMain.objSelf = this;
  return this;
}

function pickColor(id){
  //set callback
  var ret = document.getElementById('editor2');
  ret.callback = function(c) {
    var p = document.getElementById('editor');
    p.style.color = c;
  }

//start pickColor
  var pickColorCont = new PickColorCont(id);
  UUHEdtColor.pickColor(pickColorCont, id);
}
</script>
</head>
<body onload="">
pickColor is released with uuHEdt, but you can use it separately.<br>
  <div id="editor">sample text</div>
  <input type="text" id="editor2" value="result">
  <input type="button" value="Pick Color" onclick="pickColor('editor2')">
</body>
</html>