HTML在线编辑器的调用方法和使用方法详解
HTML在线编辑器不需要懂得使用Dreamweaver，会用Word就会使用此编辑器，在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。
但是如何将html编辑器嵌入到web页中和怎么取得里面的数据呢？！
首先我们假定我们所要调用得HTML在线编辑器放在一个单独得页面中，文件名是gledit.htm。
HTML在线编辑器有两种基本调用方法：
一、使用object调用:
1、怎么在web页中嵌入html编辑器： 我们在需要嵌入的位置加入以下html代码：
<object id=doc_html data=gledit.htm width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
其中object标签里面的data后面接得数据就是我们所要调用的在线编辑器页的路径，id就是我们调用object的id，后面取编辑器中的数据时就要用到这个id。Width和height就是编辑器的高度和宽度了。
2、怎么取得html编辑器中的数据：所有需要提交的内容我们都是放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时我们可以设置一个隐藏的文本区域(
<textarea name=content style=display:none></textarea>或<INPUT TYPE=hidden name=content>)用以在提交的时候临时保存html在线编辑器的数据，因为在asp或者jsp，php中不能直接获取表单中的object的内容，所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
<script language=javascript>
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method=post action=add_news_save.asp onsubmit=CheckForm() name=form1>
<object id=doc_html name= doc_html style=LEFT: 0px; TOP: 0px data= gledit.htm width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
<input type=hidden name=content >
</form>
这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中：首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口，我们利用自己写的程序来实现上传本机图片到服务器上，然后我们需要记录图片的路径，然后通过html在线编辑器的值中加入显示图片的html标签。详细说明及代码如下：
在编辑器中我们在插入图片的按钮上加入事件
onclick=window.open('img_upload.asp','img_upload','width=481 height=190')>
在'img_upload.asp'中我们将提交的图片上传到服务器制定目录然后记录图片路径
<script language=javascript>
var src='<%=upload/&newname%>';
opener.form1. doc_html.value +=<img border=0 src=+src+>;
window.close();
</script>
这样就实现了简单的将上传的图片插入到编辑器中。
4、怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据：当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来显示修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容，例如:
<TEXTAREA style=display:none NAME=content ROWS=20 COLS=70><%= rs(Content)%></TEXTAREA>，要注意这里我们用隐藏的textarea而不能用隐藏的input，因为数据里面可能包含了回车换行，所以如果我们使用
<INPUT TYPE=hidden name=content value=<%=(rs(Content)%>>很可能因为<%=(rs(Content)%>有换行而出现HTML错误（value=后面接的数据必须保证是在一行，否则出错）。然后按照前面介绍的方法使用object调用HTML在线编辑器，方法和代码同上，现在我们要做的其实就是提交时候的逆过程，我们只要将隐藏文本区域的内容复制到HTML在线编辑器就可以了，在这里我们在body里面加上<body onload=document.form1. doc_html.value=document.form1.content.value>，这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了，提交过程和上面介绍的一样，在此就不赘述了。
二、使用iframe调用（有些和object调用重复的地方就简单描述一下）
1、 怎么在web页中嵌入：我们在需要嵌入的位置加入以下html代码：
<IFRAME SRC=gledit.htm id='content_html' style=LEFT: 0px; POSITION:
absolute; TOP: 0px;z-index:0 width=100% height=100%></IFRAME>其中src=后面接的数据就是我们所要调用的在线编辑器页的路径，id就是我们调用IFRAME的id，Width和height就是编辑器的高度和宽度了。
2、 怎么取得html编辑器中的数据：同样所有需要提交的内容我们都是放在一个表单里面，同时我们可以设置一个隐藏的文本区域
(<textarea name=content style=display:none></textarea>或<INPUT TYPE=hidden name=content>)用以在提交的时候临时保存html在线编辑器的数据，我们借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}
</SCRIPT>
<FORM METHOD=POST ACTION=Article_add_save.gl name=form1 onsubmit= subchk()>
<input type=hidden name=content >
<IFRAME SRC=gledit.htm id='content_html' style=LEFT: 0px;
POSITION: absolute; TOP: 0px;z-index:0 width=100% height=100%></IFRAME>
</FORM>
在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
2、怎么取得html编辑器中的数据：所有需要提交的内容我们都是放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时我们可以设置一个隐藏的文本区域(<textarea name=content style=display:none></textarea>或<INPUT TYPE=hidden name=content>)用以在提交的时候临时保存html在线编辑器的数据，因为在asp或者jsp，php中不能直接获取表单中的object的内容，所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
<script language=javascript>
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method=post action=add_news_save.asp
onsubmit=CheckForm() name=form1>
<object id=doc_html name= doc_html style=LEFT: 0px; TOP: 0px
data= gledit.htm width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
<input type=hidden name=content >
</form>
这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中：首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口，我们利用自己写的程序来实现上传本机图片到服务器上，然后我们需要记录图片的路径，然后通过在调用html在线编辑器的web页中写一个函数在光标的位置插入显示图片的html标签。详细说明及代码如下：
在编辑器中我们在插入图片的按钮上加入事件
onclick=window.open('img_upload.asp','img_upload','width=481 height=190')>
在调用编辑器的页面中我们定义好插入html代码到编辑器的函数
<script language=javascript>
function insertHtml(HtmlCode)
{
var win=window.content_html.idEditbox.document;
window.content_html.idEditbox.focus();//是编辑器获得焦点，放置代码插入在编辑器外地方
win.selection.createRange().pasteHTML(HtmlCode)//在光标的位置插入html代码
}
</script>
在处理上传图片的文件中，我们调用父窗口的函数插入html代码
<script language=javascript>
var src='<%= upload/&newname%>';
var htmlcodes;
htmlcodes = <img src='+src+' alt='<%=theForm(alt)%>'
align='<%=theForm(align)%>' border='<%=theForm(border)%>'
hspace='<%=theForm(hspace)%>' vspace='<%=theForm(vspace)%>'>;
opener.insertHtml(htmlcodes)
window.close();
</script>
这样就实现了简单的将上传的图片插入到编辑器中。
4、 怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据：当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容，例如
<TEXTAREA style=display:none NAME=content ROWS=20 COLS=70>
<%= rs(Content)%></TEXTAREA>，
在这里我们在调用编辑器的iframe里面加上
<IFRAME SRC=gledit.htm id='content_html' style=LEFT:
0px; POSITION: absolute; TOP: 0px;z-index:0 width=100%
height=100% onload=window.content_html.idEditbox.document.body.innerHTML
=document.form1.content.value></IFRAME>，这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了，提交过程和上
面介绍的一样，在此就不赘述了。
分享到：
相关推荐
HTML编辑器FCKeditor是一款广泛应用于网站开发的开源富文本编辑器，它允许开发者在网页上提供类似Word的文本编辑体验，使得用户可以方便地创建和编辑HTML内容。这款编辑器以其强大的功能、易用性和可扩展性而受到...
ASP.NET 文本编辑器 FCKeditor 使用方法详解 FCKeditor 是一个功能强大且流行的 ASP.NET 文本编辑器，提供了许多实用的功能，如格式化文本、插入图片、上传文件、创建表格等。下面将详细介绍如何使用 FCKeditor 在 ...
HTML编辑器FCKeditor是一款强大的所见即所得编辑器，广泛应用于网站内容管理，使得非技术人员也能方便地编辑和...通过理解并掌握其基本使用和配置方法，我们可以快速集成到自己的Web应用中，提供高质量的文本编辑体验。
接下来，我们将通过一个简单的示例来介绍如何使用DHTML和JavaScript实现基本的HTML在线编辑器： 1. **创建编辑区域**：使用`<iframe>`元素创建一个可以编辑的区域。`<iframe>`元素是DHTML的一部分，可以嵌入另一个...
FCKeditor 是一款流行的开源文本编辑器，主要用于Web开发，它提供了所见即所得（WYSIWYG）的编辑体验，使得用户在网页上编辑内容时就像使用桌面文字处理软件一样方便。这款编辑器支持插入图片、Flash动画等多媒体...
**FCK在线编辑器：网站后台文本编辑器详解** FCKeditor是一款开源的、功能强大的在线文本编辑器，主要用于网站后台管理系统中，提供类似于桌面文本编辑器的用户体验。这款编辑器使得用户在网页上编辑内容时，可以...
- **适合Ajax的调用方法**：针对动态内容，可以使用JavaScript创建编辑器并绑定到某个`div`元素。 4. **FCKeditor的常用设置** - FCKeditor的配置主要在`fckconfig.js`文件中进行。你可以自定义工具栏按钮，例如...
### fckeditor编辑器使用方法详解 fckeditor，现在更名为了CKEditor，是一款功能强大、易于集成的富文本编辑器，广泛应用于各种Web应用程序中，为用户提供了一个接近于桌面编辑软件的在线编辑体验。本文将从...
**在线编辑器——FreeTextBox详解** FreeTextBox 是一个功能丰富的在线文本编辑器，它专为Web应用程序设计，提供了一个用户友好的界面，使得用户在浏览器上可以进行类似于桌面文字处理软件的操作。这款编辑器以其...
**jQuery在线编辑器详解** jQuery在线编辑器是一种基于jQuery库的富文本编辑器插件，它为用户在网页上提供了一种便捷的方式来创建、编辑和格式化文本内容，类似于Word等桌面文字处理软件的功能。此类编辑器通常用于...
初始化编辑器是使用UEditor的关键步骤，需要指定一个空的div元素作为编辑器的容器，并调用UEditor的实例化方法，如` UE.getEditor('editorId') `，其中'editorId'是div的id。 **二、编辑器功能** 1. **文本格式化...
然后，创建FCKeditor实例，指定编辑器的基本属性，如宽度、高度和基路径，最后通过 `Create()` 方法生成编辑器。 以下是一个简单的PHP调用FCKeditor的例子： ```php include("fckeditor/fckeditor.php"); // 引入...
《jQuery仿ThinkPHP在线编辑器详解》 在Web开发领域，富文本编辑器是不可或缺的一部分，它能够提供用户友好的界面，使得非编程人员也能轻松编辑网页内容。本篇文章将深入探讨如何使用jQuery来构建一个仿ThinkPHP的...
《fckediter在线HTML编辑器使用详解》 在网页设计和内容管理中，HTML编辑器扮演着至关重要的角色，它使得非编程人员也能轻松编辑和格式化网页内容。其中，fckediter是一个广受欢迎的开源在线HTML编辑器，为用户提供...
《SinaEditor在线编辑器详解及其在Web开发中的应用》 SinaEditor是一款广泛应用于网站和基于B/S架构系统的在线编辑器，它为用户提供了一种便捷的文本编辑体验，允许用户在网页上直接进行富文本编辑，如添加图片、...
**UEditor 在线编辑器详解** UEditor 是百度推出的一款开源的富文本在线编辑器，它为用户提供了丰富的文本编辑功能，包括文字样式、图片上传、表格操作、代码高亮等，广泛应用于网站内容管理、博客写作、论坛发帖等...
**HTML在线编辑器xheditor详解** HTML在线编辑器xheditor是一款强大的富文本编辑器，主要用于网页上提供用户友好的文本输入体验。它支持多种功能，如文字格式化、图片上传、链接创建等，使得非技术人员也能轻松编辑...
【FCKeditor使用方法技术详解】... - 调用`$FCKeditor->Create()`方法在页面上创建编辑器。 以下是一个简单的PHP示例，展示如何在PHP页面中集成FCKeditor： ```php include("fckeditor/fckeditor.php"); ?> <html> ...