uuHEdt ( uu Html编辑)

分享于 

9分钟阅读

Web开发

  繁體

介绍

在这里,我想向你展示如何创建一个基于web的所见即所得HTML编辑器。 通常,有这么多在线HTML编辑器,但是你可能不需要它们提供的所有功能。 他们可能太大了。 如果你想创建自己的项目,本文可能会满足你的需求。

如何打开 designMode?

在编辑HTML之前,我们应该按如下方式打开 bodydesignMode:

document.designMode = "On"

但是我们可能需要编辑一个页面,所以首先放一个 div,你需要将HTML编辑器 on 放在这里。

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

然后将 iframe 放入 div 中,并将 iframe 文档的designMode 转换为 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";

现在你可以编辑文本为 HTML,或者将HTML粘贴到它。

如果要为文本设置某种格式,则需要以下选项:

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);

关于源文件( 示例代码)

我认为这篇文章很简单,但是源文件( 脚本) 可能不是那么简单。 这个源文件名为 uuHEdt,在我的产品中使用了很长时间。 它处理文本格式和下划线,有 table 编辑,彩色选择器,插入图像的能力,插入特殊字符。

虽然 uuHEdt 很小,但在 IE。Opera。Firefox。Google Chrome 和Safari上运行,也可以通过 div 大小调整面板大小。
代码是开放源码的,并在代码项目打开许可证( CPOL ) 下发布。

使用 This 等等,可以放置一个编辑器,使用所见即所得的网页界面创建和编辑HTML代码,只需用粗体。下划线。斜体。字体更改。或者使用web界面来编写。 如果在线应用程序需要使用在线编辑器,但不想花很多时间在网上运行,这很有用。 此外,可以随意定制它。

使用源文件

这里显示了一个简单的代码。 有关完整功能,请参见演示页面。

  • 将这个添加到 head ( 注意 sftab.js 和 uuhedt.js的真正路径。) 中:
<script type="text/javascript" src="sftab.js"></script>
<script type="text/javascript" src="uuhedt.js"></script>

如果你想调整浮动窗口的大小,而不是 sftab.js,你可以使用 ftab.js,像下一个( 应将 ftab 目录放置在 uuHEdt的同一目录下):

<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>
  • 在要放置 uuHEdt的正文中添加 div 内容:
<divid="editor"style="width:100%;height:220px;"></div>
  • 在内容之后,添加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>

插件( 添加你的模块)

uuHEdt 是用笑脸。URL管理器。图像管理器。颜色拾取等插件发布的。 但是你可能需要其他的,因此可以按如下方式添加。
这里添加了三个按钮:

  • 带有 uuHEdt GIF的图像按钮,为 background
  • 文字按钮
  • 图像按钮使用单GIF文件( 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>

在要放置 uuHEdt的正文中添加 div 内容:

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

然后在 body的标记中添加以下代码:

<bodyonload="init();">

对用户事件的支持

在这里,如果你愿意,你可以。

UUHEdts.userInitLang = function(id, pluginobj, btnobj) {
 //should return id'lang}
UUHEdts.userSavingContent = function(html) {
 //must return processed htmlreturn 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) {
}

拾取颜色可以单独工作

pickColor 使用 uuHEdt 发布,但你可以单独使用它。 在线帮助中有一个示例。

历史记录

  • 首次发布于 2009/06/26
  • 2009/09/26更新Added增加了扩展风格
  • 2010/05/01 update更新Added添加了双击事件
  • 在 2010/10/01 Pick更新,分别为上传图像或者文件添加了自定义功能

有关详细信息,请访问 http://www.uuware.com/js_uuhedth_en.htm。


EDI  
相关文章