html在线编辑器怎么用

html-css05

html在线编辑器怎么用,第1张

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

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

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

导览列介绍

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

一个完整意义上的HTML在线编辑器，为了能够真正满足用户的需求，具备以下特点：

1、 所见即所得：通过编辑器，编辑的文字和图片等HTML标记输出到页面的效果和编辑时显示的效果一致，无需经过其他步骤的转换和编码，能让用户方便地对编辑的内容进行修改和排版；

2、 自动转换HTML代码：在编辑状态编辑的文字、图片等内容都在后台状态下自动转换为可被浏览器识别的HTML标记语言；而且用户可以在代码状态下对代码标记进行修改和排版。

3、 简单易用：编辑器的编辑使用方法应该和尽量和FrontPage、Dreamweaver等主流网页制作软件或代码编辑器类似，风格保持一致，以达到无需任何HTML语法知识，机械式的操作也能让没有网页制作经验的用户快速掌握的目的。

4、 方便快捷:使用所见即所得的编辑器能快捷、方便地编辑出效果一流的图文内容，与纯手工编写代码进行编辑的方式比较，可以节省大量的时间和精力。

5、 与系统现有内容兼容、吻合：利用编辑器提供的功能，可以方便地把系统已上传的图片动画影音文件加载到网页内容中，也可以通过插入信息组件与其他网页内容进行整合。

1、首先在需要嵌入得位置加入以下html代码。

2、其次所有需要提交的内容都放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时可以设置一个隐藏的文本区域(或)用以在提交的时候临时保存html在线编辑器的数据。

3、然后点击插入图片的按钮时弹出一个上传图片的窗口，利用自己写的程序来实现上传本机图片到服务器上，需要记录图片的路径，通过html在线编辑器的值中加入显示图片的html标签。

4、在添加的时候将HTML在线编辑器来修改数据提交到数据库后还需要能将数据库的内容用HTML在线编辑器来修改数据。