HTML在线编辑器的调用方法和使用方法
muedit 使用方法

muedit 使用方法
Muedit是一个功能强大的富文本编辑器,它提供了许多功能和
工具,使得编辑和格式化文本变得更加简单和高效。
要使用Muedit,你可以按照以下步骤进行:
1. 引入Muedit库,首先,你需要在你的项目中引入Muedit库
的相关文件。
你可以通过在HTML文件中添加链接到Muedit的CSS
和JS文件来实现这一点。
2. 创建编辑器实例,一旦引入了Muedit库,你就可以在你的
页面中创建一个Muedit编辑器实例。
你可以使用一个div元素作为
编辑器的容器,并在JavaScript中使用Muedit的构造函数来创建
一个编辑器实例。
3. 配置编辑器选项,Muedit提供了许多配置选项,你可以根
据自己的需求对编辑器进行定制。
你可以设置编辑器的语言、工具
栏按钮、字体、大小等。
4. 处理编辑器内容,一旦编辑器实例创建完成,你就可以通过JavaScript代码来处理编辑器中的内容。
你可以获取编辑器中的文
本、插入图片、设置文本样式等。
5. 保存编辑器内容,最后,当用户完成编辑并准备保存内容时,你可以使用Muedit提供的API来获取编辑器中的内容,并将其保存
到数据库或其他地方。
总的来说,使用Muedit可以帮助你轻松地实现富文本编辑功能。
通过引入库、创建实例、配置选项、处理内容和保存内容等步骤,
你可以充分利用Muedit的功能来满足你的编辑需求。
希望这些信息
能够帮助你更好地了解和使用Muedit编辑器。
html调用html的方法

html调用html的方法摘要:一、HTML与HTML的关系二、HTML调用HTML的方法1.内联方式2.导入方式3.链接方式三、HTML调用HTML的实践案例四、总结与建议正文:HTML,即超文本标记语言,是一种用于创建网页的标准标记语言。
而HTML,通常指的是HTML文档本身。
在网页开发过程中,有时需要在一个HTML文档中调用另一个HTML文档,以实现特定的功能或展示内容。
接下来,我们将介绍HTML调用HTML的方法及其应用。
一、HTML与HTML的关系HTML是超文本标记语言,用于创建网页结构和内容。
而HTML则是超文本文件本身。
在网页开发中,HTML文档可以通过各种方式相互调用,实现内容的组合和功能的扩展。
二、HTML调用HTML的方法1.内联方式:在当前HTML文档中,通过`<link>`标签直接嵌入另一个HTML文档。
例如:<!DOCTYPE html><html><head><link rel="import" href="other_html_file.html"></head><body><!-- 其它内容--></body></html>```2.导入方式:在当前HTML文档的`<head>`部分,使用`<import>`标签导入另一个HTML文档。
例如:```html<!DOCTYPE html><html><head><import src="other_html_file.html" /></head><body><!-- 其它内容--></body>```3.链接方式:在当前HTML文档中,通过`<a>`标签链接到另一个HTML 文档。
网络编辑器使用方法指南

网络编辑器使用方法指南一、什么是网络编辑器网络编辑器是一种在线工具,可以帮助用户在浏览器中编辑和排版文本、网页或其他类型的内容。
它通常提供了丰富的编辑功能和布局选项,让用户可以快速、方便地创建和修改内容。
二、网络编辑器的常见功能1. 文字编辑:网络编辑器提供了基本的文字编辑功能,包括字体、字号、颜色、对齐方式等选项。
用户可以根据需要对文本进行格式化处理,使其更具吸引力和可读性。
2. 插入图片和视频:通过网络编辑器,用户可以直接在编辑器中插入图片和视频,无需使用其他软件进行预处理。
编辑器通常支持主流的图片和视频格式,并提供了调整大小、对齐、边距等选项,方便用户适应不同的排版需求。
3. 表格编辑:网络编辑器可以帮助用户创建和编辑表格,提供了行列调整、合并单元格、调整边框样式等功能。
用户可以根据需要轻松制作复杂的数据表格。
4. 超链接和书签:编辑器支持在文本中插入超链接和书签,方便用户提供更多的信息来源或者快速跳转的链接。
5. 版面设计:网络编辑器通常提供了丰富的版面设计选项,包括页面大小、边距、页眉页脚等设置。
用户可以根据需要自定义页面的外观和风格。
6. 导出和保存:编辑完成后,用户可以将文件导出为常见的文件格式,如HTML、PDF等,也可以保存在云端存储空间,方便以后继续编辑和共享。
三、如何使用网络编辑器1. 选择网络编辑器:根据个人需求和偏好,选择一个适合的网络编辑器。
目前市面上有许多网络编辑器可供选择,如Google Docs、Microsoft Office Online等。
根据功能、易用性、兼容性等因素进行比较,选择最适合自己的编辑器。
2. 创建新文件或导入已有文件:打开编辑器后,可以选择创建新文件或导入已有文件。
对于新用户,建议从一个空白文件开始,以便能够全面了解和使用编辑器提供的各种功能。
3. 进行编辑和排版:根据需求,使用编辑器提供的各种功能进行文字编辑、插入图片和视频、创建表格等操作。
eWebeditor编辑器使用方法

eWebeditor编辑器使⽤⽅法在我们管理⽹站时,很容易出现编辑器问题,有些事由于⽹络问题,如⽹速过慢也会导致⽆法上传图⽚,或者是编辑内容,另⼀些就可能是编辑器本⾝的问题,如编辑器和当前浏览器不匹配,这种情况就需要我们重新来装载编辑器,过程⾮常简单,简⾔之,上传和调⽤!<iframe id="eWebEditor1" src="../edit/ewebeditor.php?id=content" frameborder="0" scrolling="No" width="550" height="350"></iframe><input name="content" type="hidden" id="content" />每个iframe是⼀个eWebeditor编辑器,src是eWebeditor编辑器所在的相对⽬录。
?id=content和下⾯的<input name="content" type="hidden" id="content" />要对应。
安装是⾮常容易的,⾸先你要做的就是把eWebEditor⽂件上传到你的⽹站,请按以下步骤进⾏:eWebEditor带有后台管理功能,你可以⽅便对样式,上传⽂件等进⾏管理。
设置请注意:eWebEditor的调⽤是⾮常简单,基本上只是在原来的使⽤中加⼊⼀⾏代码。
标准调⽤:<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500"HEIGHT="350"></iframe> 参数说明:/ewebeditor.asp应改为你实际安装的路径参数id:相关联的表单项名,也就是提交保存页要引⽤的表单项名,多个调⽤时,请保证id不同,可参见后⾯例⼦参数style:使⽤的样式名,可以是标准的样式名或⾃定义的样式名,如果使⽤标准standard可留空width,height:根据实际需要设置,eWebEditor将⾃动调整与其适应在后台管理中,可以得到每个样式的最佳调⽤代码所有⼊⼝参数:(即:eWebEditor.asp?后⾯的参数)id:相关联的保存编辑内容的表单项名,也就是提交保存页要引⽤的表单项名style:使⽤的样式名,可以是标准的样式名或⾃定义的样式名,如果使⽤标准standard可留空originalfilename:相关联的保存上传原⽂件名列表的表单项名,必须是input类型,可以带onchange事件[例⼦]savefilename:相关联的保存上传保存⽂件名列表的表单项名,必须是input类型,可以带onchange事件[例⼦]savepathfilename:相关联的保存上传保存⽂件名(带路径)列表的表单项名,必须是input类型,可以带onchange事件[例⼦]例⼦:新增表单你原来可能是:<textarea name="content1" rows=10 cols=50></textarea>现在是:<input type="hidden" name="content1" value=""><iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500"HEIGHT="350"></iframe> 或者 <textarea name="content1" style="display:none"></textarea><iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500"HEIGHT="350"></iframe>例⼦:修改表单你原来可能是:<textarea name="content1" rows=10 cols=50><%=Server.HTMLEncode(oRs("D_Content"))%></textarea>现在是:<input type="hidden" name="content1" value="<%=Server.HTMLEncode(oRs("D_Content"))%>"><iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500"HEIGHT="350"></iframe> 或者 <textarea name="content1" style="display:none"><%=Server.HTMLEncode(oRs("D_Content"))%></textarea><iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500"HEIGHT="350"></iframe>注意事项:eWebEditor允许在同⼀表单⾥有多个,但请保证id在整个⽹页中是唯⼀的。
xeditor使用方法

xheditor使用方法为了同时支持Firefox和IE,我们常常用document.getElementById(id)方法来取得HTML对象。
但是getElementById方法只能取得单个对象,而对于CheckBox 数组则无能为力。
1. 下载xhEditor最新版本。
下载地址:/download2. 解压zip文件,将其中的xheditor.js以及xheditor_emot和xheditor_skin 两个文件夹上传到网站相应目录3. 在相应html文件的head标签结束之前添加<script type="text/javascript"src="/js/xheditor.js"></script>4. 调用方法有两种:方法1:在textarea上添加属性: class="xheditor"(设置为xheditor-mini 和xheditor-simple,分别默认加载迷你和简单工具栏)方法2:在您的页面初始JS代码里加上: $('#elm1').xheditor(true);例如:$({$('#elm1').xheditor(true);});相应的隐藏编辑的代码为:$('#elm1').xheditor(false);初始化参数说明初始化示例代码:$('#elm1').xheditor(true,{tools:'full',skin:'default',showBlocktag:tr ue,readonly:false,internalScript:false,internalStyle:false,width:300, height:200,loadCSS:'/test.css',fullscreen:true,sourceM ode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif, png",keepValue:true,plugins:{}});tools:自定义工具按钮参数值:full(完全),simple(简单),mini(迷你)或者自定义字符串,例如:'GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Source,Preview ,Fullscreen,About,GEnd' 完整按钮表:GStart:组开始GEnd:组结束Separator:分隔符Cut:剪切Copy:复制Paste:粘贴Pastetext:文本粘贴Blocktag:段落标签Fontface:字体FontSize:字体大小Bold:粗体Italic:斜体Underline:下划线 Strikethrough:中划线FontColor:字体颜色BackColor:字体背景色Removeformat:删除文字格式Align:对齐List:列表Outdent:减少缩进Indent:增加缩进Link:超链接Unlink:删除链接Img:图片Flash:Flash动画 Media:Windows media player视频Emot:表情Table:表格Source:切换源代码模式Preview:切换预览模式Fullscreen:切换全屏模式 About:关于xhEditorskin:皮肤风格选择参数值:default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色)showBlocktag:显示段落标签参数值:true(显示段落标签),false(不显示)internalScript:内部JS代码保留状态参数值:true(保留内部JS代码),false(清理内部JS代码)inlineScript:内联JS代码保留状态参数值:true(保留内联JS代码),false(清理内联JS代码)internalStyle:内部样式保留状态参数值:true(保留内部样式),false(清理内部样式)inlineStyle:内联样式保留状态参数值:true(保留内联样式),false(清理内联样式)width:编辑器宽度参数值:不带单位的数字,例:300height:编辑器高度参数值:不带单位的数字,例:100loadCSS:加载样式参数值:样式表网址,例如:'/css/global.css' fullscreen:默认全屏显示参数值:true(全屏大小),false(标准大小)readonly:默认只读模式参数值:true(只读模式),false(可编辑模式)sourceMode:默认源代码模式参数值:true(源代码模式),false(编辑模式)forcePtag:强制P标签参数值:true(强制使用P标签),false(不强制)keepValue:自动保存src和href属性值参数值:true(保存),false(不保存)说明:在IE等浏览器下使用编辑器,插入的图片和链接地址都会被浏览器自动转为绝对地址,比如输入:a.gif,自动会转为:/a.gifmodalWidth:showModal弹出窗口的默认宽度参数值:数值,默认为350说明:弹出窗口的默认宽度modalHeight:showModal弹出窗口的默认高度参数值:数值,默认为220说明:弹出窗口的默认高度modalTitle:showModal弹出窗口是否显示上方的标题栏参数值:true(显示),false(不显示)说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏upLinkUrl:超链接文件上传接收URL参数值:接收用户上传的服务器端程序URL,默认留空为禁用超链接上传功能,具体使用方法请参考demo8演示文件upLinkExt:超链接上传前限制本地文件扩展名参数值:超链接上传前限制的文件扩展名列表,默认为:zip,rar,txt,建议与服务端扩展名检查列表一致upImgUrl:图片文件上传接收URL参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件upImgExt:图片上传前限制本地文件扩展名参数值:图片上传前限制的文件扩展名列表,默认为:jpg,jpeg,gif,png,建议与服务端扩展名检查列表一致upFlashUrl:动画文件上传接收URL参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件upFlashExt:动画上传前限制本地文件扩展名参数值:动画上传前限制的文件扩展名列表,默认为:swf,建议与服务端扩展名检查列表一致upMediaUrl:视频文件上传接收URL参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件upMediaExt:视频上传前限制本地文件扩展名参数值:视频上传前限制的文件扩展名列表,默认为:avi,建议与服务端扩展名检查列表一致上传接口使用注意事项:demos 目录中的upload.php仅为演示代码,若您使用的是其它的服务器脚本语言,请自行对初始化参数中的upLinkUrl、upImgUrl、 upFlashUrl和upMediaUrl 进行修改,并开发相应服务器上传接收程序。
VSCode编辑器使用技巧:快捷输入HTML代码(转)

VSCode编辑器使⽤技巧:快捷输⼊HTML代码(转)VSCode中有⼀些快捷编辑HTML的⽅法,能⼤⼤提⾼⼯作效率,在这记录⼀些。
1.输⼊html:5,然后按tab键或enter键,效果如下:1 <!-- 输⼊html或者html:5⽣成页⾯模板 -->2 <!DOCTYPE html>3 <html lang="en">4 <head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <meta http-equiv="X-UA-Compatible" content="ie=edge">8 <title>Document</title>9 </head>10 <body>1112 </body>13 </html>2.输⼊link:css引⼊css样式⽂件,输⼊script:src引⼊js1 <!-- 输⼊link:css引⼊样式 -->2 <link rel="stylesheet" href="">3 <!-- 输⼊script:src引⼊js -->4 <script src=""></script>3.输⼊标签名⾃动补齐1 <!-- 输⼊标签名 h1 按tab键或Enter键⾃动补齐 -->2 <h1>HTML快捷输⼊练习</h1>3 <!-- {}可输⼊标签内的⽂本如输⼊:h2{填充⽂本} -->4 <h2>填充⽂本</h2>4.随机⽂本的输⼊1 <!-- Lorem⾃动输⼊⼀段随机⽂本(默认30个单词),Lorem10 输⼊10个单词,Lorem*5 输⼊5遍随机⽂本 -->2 Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tem3 <!-- Lorem10 的结果-->4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.5 <!-- Lorem10*10 的结果-->6 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis.7 Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae.8 Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.5.使⽤"#“输⼊id,”.“输⼊class,”[]"输⼊属性1 <!-- div#main.content 输⼊id、class -->2 <div id="main" class="content"></div>3 <div id="foot" class="foot" data="结束"></div>4 <!-- div[alt=到底了]{结束} 添加属性及包裹⽂本 -->5 <div alt="到底了">结束</div>6.使⽤">“输⼊嵌套标签,”+" 输⼊并列的兄弟标签,"^"上级元素1 <!-- div>div#imgs{put some imgs here} 标签的嵌套-->2 <div>3 <div id="imgs">put some imgs here</div>4 </div>56 <!-- div#left{I am left}+div#right{I am right} 并列标签 -->7 <div id="left">I am left</div>8 <div id="right">I am right</div>910 <!-- 看⽹上资料说^上级元素,没懂是什么意思,试了⼏个体会⼀下 -->11 <!-- div#div1>p^div#div2 把div1提出成⼀⾏和div2同级 -->12 <div id="div1">13 <p></p>14 </div>15 <div id="div2"></div>16 <!-- div>div#div1>p^div#div2 -->17 <div>18 <div id="div1">19 <p></p>20 </div>21 <div id="div2"></div>22 </div>2324 <!-- div>p>img^div>ul>li -->25 <div>26 <p><img src="" alt=""></p>27 <div>28 <ul>29 <li></li>30 </ul>31 </div>32 </div>33 <!-- div>div>div^div -->34 <div>35 <div>36 <div></div>37 </div>38 <div></div>39 </div>40 <!-- div>div^div -->41 <div>42 <div></div>43 </div>44 <div></div>7.使⽤"()“对标签分组及使⽤”*"⽣成多个相同的标签1 <!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使⽤括号分组标签 *⽣成多个标签-->2 <div id="list1">3 <ul>4 <li></li>5 <li></li>6 </ul>7 </div>8 <div id="list1">9 <ul>10 <li></li>11 <li></li>12 </ul>13 </div>8.⾃增符号$1 <!-- $ ⾃增符号 -->2 <!-- ul>li*3>img[src=./imgs/$.jpg][alt={img $}] -->3 <ul>4 <li><img src="./imgs/1.jpg" alt="img 1"></li>5 <li><img src="./imgs/2.jpg" alt="img 2"></li>6 <li><img src="./imgs/3.jpg" alt="img 3"></li>7 </ul>89 <!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] -->10 <ul>11 <li><img src="./imgs/001.jpg" alt="img 001"></li>12 <li><img src="./imgs/002.jpg" alt="img 002"></li>13 <li><img src="./imgs/003.jpg" alt="img 003"></li>14 </ul>1516 <!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt={img $$@4}] -->17 <ul>18 <li><img src="./imgs/04.jpg" alt="img 04"></li>19 <li><img src="./imgs/05.jpg" alt="img 05"></li>20 <li><img src="./imgs/06.jpg" alt="img 06"></li>21 </ul>9.{}是标签中的内容。
html中引用ueditor富文本

html中引用ueditor富文本一、简介Ueditor是一款功能强大的富文本编辑器,它提供了丰富的编辑功能和样式,可以帮助用户创建出高质量的网页内容。
在HTML中引用Ueditor富文本,可以让用户在网页上直接编辑内容,而无需使用其他工具。
二、安装与引用要引用Ueditor富文本,需要先在HTML页面中安装并引入Ueditor的脚本文件和样式文件。
以下是一个基本的引用示例:```html<!DOCTYPEhtml><html><head><title>引用Ueditor富文本</title><linkrel="stylesheet"href="ueditor.css"type="text/css"/> </head><body><divid="content"style="margin:50px;"><!--在此处放置编辑区域--></div><scriptsrc="ueditor.all.min.js"></script><script>//初始化编辑器varue=UE.getEditor('content');</script></body></html>```在上述示例中,我们引入了Ueditor的CSS样式文件和JavaScript脚本文件。
然后,在HTML页面中定义了一个名为“content”的div元素,作为编辑区域的容器。
最后,通过JavaScript代码初始化编辑器,将其附加到该div元素上。
三、编辑功能Ueditor富文本提供了丰富的编辑功能,包括:*文本格式:支持不同的文本格式,如粗体、斜体、下划线等。
quill 使用方法

quill 使用方法Quill 使用方法Quill 是一款流行的富文本编辑器,它具有简单易用、功能丰富、灵活可扩展等特点,被广泛应用于Web开发中。
本文将介绍 Quill 的使用方法,帮助读者快速上手并熟练使用该编辑器。
一、安装 Quill1. 下载 Quill:可以从 Quill 官方网站或 GitHub 上下载最新版本的Quill。
2. 引入 Quill:将下载的 Quill 文件引入到你的项目中,可以通过直接引入文件或使用 npm 安装进行引入。
二、初始化 Quill 编辑器1. 在 HTML 文件中创建一个容器元素,用于放置 Quill 编辑器。
2. 在 JavaScript 文件中,选择容器元素并使用 Quill 构造函数进行初始化。
三、基本使用1. 编辑文本:在Quill 编辑器中输入文本即可进行编辑,支持常见的文本样式操作,如加粗、斜体、下划线等。
2. 插入图片:使用Quill 提供的插入图片功能,可以在编辑器中插入本地或网络上的图片。
3. 插入链接:通过Quill 的插入链接功能,可以在编辑器中插入外部链接,实现跳转功能。
4. 列表和缩进:使用Quill 的有序列表、无序列表和缩进功能,可以方便地对文本进行排版和格式设置。
5. 撤销和重做:Quill 支持撤销和重做功能,方便用户对编辑操作进行撤销或恢复。
四、自定义配置1. 主题设置:Quill 提供了多种主题可供选择,并支持自定义主题样式。
2. 工具栏设置:可以根据需求选择在工具栏中显示的按钮,以及按钮的顺序和分组。
3. 事件监听:可以通过监听Quill 编辑器的事件,实现自定义的交互和功能扩展。
五、插件扩展1. Quill 提供了丰富的插件,可以通过引入插件来扩展编辑器的功能,如代码块、表格、公式等。
2. 可以根据需求选择合适的插件,并按照插件文档的说明进行引入和配置。
六、数据处理1. 获取内容:使用Quill 的内置API,可以获取编辑器中的文本内容或 HTML 格式的内容。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
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在线编辑器的数据。