菜鸟教程html在线编辑器(菜鸟编程在线编辑器)

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

能够在网页上实现许多桌面编辑软件（如：Word）所具有的强大可视编辑功能；她是一个真正的绿色软件，不需要在计算机上安装任何的客户端软件；她的易用使得WEB开发人员只要一行代码即可完成调用。

使用说明

界面概述： 所见即所得的在线编辑器界面主要分为以下三大部分：

菜单栏 编辑器顶部为菜单栏，主要放置各种编辑功能的选项及按钮图标，使用者只需点击图标或选择相关选项即可实时对编辑栏编辑的内容进行添加或修改、修饰。

编辑栏 编辑器中部空白处为编辑栏，主要是供使用者输入及编辑内容所用，同时所编辑的内容全部都是所见即所得，但有部分内容，如活动的图像、文字、电影等在编辑状态下只会呈现静止状态，需使用者转换到预览状态方可真实再现。

状态栏 编辑器底部为状态栏，主要放置转换编辑器状态的按钮图标，状态共分为：代码状态、编辑状态（默认）、文本状态、预览状态。具体每种状态的作用请详见帮助中心目录的“状态栏使用说明”。

菜单栏使用说明：

编辑器菜单栏图标功能使用说明如下：

：设置字体样式为粗体。

：设置字体样式为斜体。

：设置字体样式为带下划线。

：设置字体样式为带中划线。

：设置字体样式为上标。

：设置字体样式为下标。

：设置字体变大。

：设置字体样变小。

：设置内容向左对齐。

：设置内容向右对齐。

：设置内容向中对齐。

：设置内容两端对齐。

：设置内容以编号列表形式排列。

：设置内容以列表项形式排列。

：减少内容的缩进量。

：增加内容的缩进量。

：设置字体的颜色。

：设置字体背景颜色。

：设置对象背景颜色。

：剪切指定内容。

：复制指定内容。

：粘贴剪贴板中的内容。

：以纯文件形式粘贴剪贴板中的内容。

：粘贴从Word中复制的内容，并去除冗余格式。

：删除指定内容。

：删除指定内容的格式。

：撒消上次操作。

：恢复上次操作。

：选定所有内容。

：取消选定的内容。

：表单菜单。

：插入文本输入框。

：插入文字区。

：插入单选按钮。

：插入复选框。

：插入下拉框。

：插入按钮。

：插入或修改字幕，即滚动文字。

：插入水平尺。

：插入换行符。

：插入段落。

：插入或修改超级链接。

：删除超级链接或标签。

：图形热点链接。

：标签管理。

：表格菜单。

：插入表格...。

：表格属性...。

：单元格属性...。

：拆分单元格...。

：表格行属性...。

：插入行（在上方）。

：插入行（在下方）。

：合并行（向下方）。

：拆分行。

插入列（在左侧）。

：插入列（在右侧）。

：合并列（向右侧）。

：拆分列。

：在指定位置插入或修改栏目框。

：在指定位置插入或修改网页帧。

：在指定位置插入或修改图片。

：在指定位置插入Flash动画。

：在指定位置插入自动播放的媒体文件。

：在指定位置插入其它文件。

：远程自动文件获取。

：在指定位置插入EXCEL表格。

：在指定位置插入特殊字符。

：指定位置的背景图片管理。

：在指定位置插入表情图标。

：在指定位置插入当前日期。

：在指定位置插入当前时间。

：转换指定内容为代码样式。

：转换指定内容为引用样式。

：显示或隐藏指导方针。

：查找替换功能。

：新建文档功能。

：相对或绝对位置设置功能。

：上移一层。

：下移一层。

：缩放菜单。

：增高编辑区。

：减小编辑区。

：转为代码状态。

：转为编辑状态。

：转为文本状态。

：转为预览状态。

：打印全页。

：保存内容到相关联的表单。

：打开全屏编辑。

：关闭全屏编辑并返回。

：弹窗保存并返回。

：查看在线使用帮助。

：关于编辑器的版权信息。

：直接访问eWebEditor站点。

：工具菜单。

：文件视图菜单。

：编辑菜单。

：对象效果菜单。

：组件菜单。

编辑器菜单栏下拉选项功能使用说明如下：

段落格式：设置文字内容的段落格式，使内容更加条理及便于阅读。

特殊字体格式：设置文字内容的特殊格式，包括删除线、飞行文字、移动文字等。

选择字体：设置文字内容的字体格式，可用自定义字体功能设置列表中没出列出的字体格式。注：需浏览者操作系统安装有相应字体文件才可正常显示自定义的字体。

字号：设置文字内容的大小。共分7种尺寸。

缩放：放大或缩小编辑区内的内容。

注意事项：

部分提供修改功能的按键或选项，只需选择原来插入的对象，再按同一按键或选项，即可进行修改。

部分提供设置功能的按键或选项，都可以通过再按一次按键或选项来取消前一次的设置。

编辑栏使用说明：

编辑器编辑栏主要放置供使用者编辑内容的编辑框，若内容超出框架宽度或长度的话，会自动出现滚动条。另外还可通过状态栏的状态转换可转换编辑框的不同编辑状态。

状态栏使用说明：

编辑器状态栏放置有编辑器状态转换栏，共有四种状态可供转换，详细如下：

编辑状态(默认)，在此状态下所有编辑的内容皆为所见即所得的方式。

代码状态，在此状态下所有编辑的内容皆以HTML标记源代码方式显示或编辑。

文本状态，在此状态下所有编辑的内容皆以纯文本方式显示或编辑。

预览状态，在此状态下所有内容皆以不可编辑的页面输出方式显示，可利用此状态预览编辑内容输出后的效果。

使用技巧：

乾坤小挪移 如果在网络上看到哪篇文章或新闻甚至页面觉得不错的话，可以用鼠标将相应页面内容全部选择起来后，直接拖动或复制到编辑器的编辑框即可，而且原页面上的图片、文字、CSS样式、动态效果等都能原封不动地转移到编辑框，不用修改或添加任何代码。

巧用插入自动播放媒体功能 插入自动播放媒体功能可以自动识别各种媒体格式并用相应的播放器在页面自动播放，而且这个功能还能识别图像文件，压缩文件等。大家可以充分利用此功能编辑出更多色声俱全的内容。

灵活运用预览状态 编辑内容中带有动态效果、即时播放媒体、GIF动画等活动内容时，编辑状态中只能显示静态的图像或播放器界面，这时只需要将状态转换为预览状态就可以马上看到这些内容的动态实时效果，如果想继续编辑的话，只需再转换到编辑状态即可。

如何登陆html在线编辑器？

被调用的是一个html文本编辑器 textarea name="Content" cols="80" rows="10" id="note" style="display:none"/textarea iframe id="Content" src="Editor.asp?id=Content" frameborder="0" scrolling="no" width="670" height="200" /iframe 这是调用语句，请问高手为什么我的文本内容一直传不到数据库里面啊 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.html','img_upload','width=481 height=190')"在'img_upload.asp.html'中我们将提交的图片上传到服务器制定目录然后记录图片路径 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在线编辑器，具体代码并未一一列出，整理过程中，如果大家对文章中的内容有任何问题和建议请和我联系。 我改的一个html在线编辑器（iframe调用的时候用到的）： 或者 object调用的时候大家可以用这个：

有哪些好用的代码编辑器值得推荐?

给大家推荐8款最受程序员喜爱的代码编辑器

1、Atom

Atom是Github打造的一款开源代码编辑器，支持 macOS、Windows和Linux操作系统，支持Node.js所写的插件，并内置由Github提供的Git版本控制系统，也可被当作 IDE 使用。

Atom的特色在于它极其丰富的可定制性，以及赏心悦目的界面。特别是自带的代码缩略图和代码折叠功能，不管是用Python还是做前端都非常好用。

2、EMACS

EMACS的强大之处在于已经超出了编辑器的范畴，搞成了大的平台，很多开发人员在上面直接都以他为入口完成各种功能需求了。

主要有如下特性：上网浏览网页看视频,收发邮件，调试程序，玩游戏，计算器，；、文件比较，记日记，目录管理

3、Notepad++

Notepad++被称为是JAVA程序员的最爱，几乎可以替代记事本的最佳编辑器，很多强大的功能集于一身。可以在Windows操作系统下编辑，有完整的中文化接口支持多国语言编写的功能(UTF8技术)，支持自定义语言。该程序还支持自动完成某些编程语言的API子集。

4、Sublime Text

Sublime 是一种比Notepad++功能强大的多编辑器，现在很多前端开发人员都很喜欢，虽然代码不开源，里面需要拿到注册码才能使用，但是它几乎涵盖了notepad++的所有特性，界面美观功能全的编辑器。

主要有如下特性：

跨平台，几乎在各个操作系统上都能使用

查找和替换功能做得非常友善

不仅支持多种语言关键字的高亮提示，还能针对编程语言编译错误给提示

支持插件功能

能够支持多种布局方式

5、Brackets

Brackets是一款为Linux开发者设计的开源代码编辑器，使用Brackets写代码，你不会被任何事情所打断。比如在写HTML代码时，即便你没有保存代码也可以及时预览你的Web页面效果。你也可以使用Theseus来检查变量，Brackets默认提供一种主题，当然你也可以在扩展中心获取更多的主题。

6、Vim

Vim 是一款高度可定制的文本编辑器，可以用于包括编写代码在内的各种文本创建与编辑工作。

Vim 的特色在于，它可以仅仅通过键盘来在插入、执行命令、文本批量处理等模式之中切换。这就使得 Vim 可以不用进行菜单或者鼠标操作，并且最小化组合键的操作。对文字录入员或者程序员可以大大增强速度和效率。

7、Visual Studio Code

Visual Studio Code是目前最受欢迎的代码编辑器。Visual Studio Code是一个由微软公司发布的免费开源且跨平台的代码编辑器，刚一问世，它就以强大的功能、美观的界面、高度的可定制性，被誉为微软的良心之作。

Visual StudioCode 内置了代码调试、Git 版本控制、代码高亮、智能代码补完、代码片段管理、代码重构等丰富的功能。此外，VS Code 的用户个性配置选项也很丰富，能方便地修改主题颜色、键盘快捷方式等各种属性和参数，还在内置了扩展程序管理的功能。

8、Eclipse

Eclipse以一种友好的集成开发环境，为各种类型的用户，提供了一系列针对开发Web和Java应用的可用工具。虽然专注于Java，但是也支持其他各种编程语言，如C ++、JavaScript、PHP、C、Perl、Fortran、Ruby、Python，甚至是COBOL。它还包括了适用于各种语言、向导和内置应用程序以简化开发的源代码和图形编辑器，以及支持部署、运行和测试app的工具和API。

Eclipse提供的插件功能相当丰富，有助于更加简便地创建、集成和使用软件工具，节省时间和金钱。

用菜鸟教程打HTML怎么不能显示图片？

这种情况一般是图片路径不正确，可以用浏览开发者工具检查图片路径。

在线html编辑器一般需要先把本地图片上传到服务器再引用，或者直接引用网络图片。

求大佬回答，HTML怎么将一个无序列表放在网页的右上角显示，还不和左上角的无序列表冲突

HTML 教程-?(HTML5 标准)

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

HTML 实例

本教程包含了数百个 HTML 实例。

使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。

注意：对于中文网页需要使用?meta charset="utf-8"声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为?meta charset="gbk"。

实例

!DOCTYPE html html head meta charset="utf-8" title菜鸟教程(runoob.com)/title /head body h1我的第一个标题/h1 p我的第一个段落。/p /body /html

html在线编辑器怎么用

只要你输入任意字元在任意编辑器窗格里，你会立刻发现「网址列」发生了变化，如下图所示，编号1的地方就是你的Bin?ID，编号2的地方则是这个Bin的版本编号?(预设会从1开始)，编号3的地方则是目前的显示模式，edit则代表「编辑」模式。预设的情况下，你输入的HTML / CSS / JavaScript都会立刻反映到最右边的Output窗格。

注?:在JS Bin里面，每一个前端网页组合( HTML + CSS + JavaScript )都被称为一个Bin！

当然，只要你把这个Bin设定完成后，便可直接把你当下的JS Bin网址分享出去，非常方便！

导览列介绍

如下图是JS Bin进入后的主要版面，非常简洁，最上方就是个导览列而已，接下来会依图编号解说：