1、内容摘要,HTML在线编辑器概念 常见的HTML编辑器 Fckeditor在线编辑器的使用 实例展示,Html在线编辑器,HTML在线编辑器（HTML online editor） 在Web程序应用中，最常见的一种是信息和言论的发布和交流。 在信息发布的同时，往往需要对发布的数据进行格式的转换，才能使信息以用户需要的格式显示在Web页面上。 为了实现Web应用中在线信息发布的正确显示和用户对信息发布的格式、类型和功能上的需求，HTML在线编辑器的概念就应运而生了。,Html在线编辑器,HTML在线编辑器就是用于在线编辑的工具，编辑的内容是基于HTML的文档。 它可用于在线编辑基于HTML的文档
2、，所以，它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方，是Web应用的常用模块之一。,Html在线编辑器特点,一个完整意义上的HTML在线编辑器，为了能够真正满足用户的需求，具备以下特点： 1、所见即所得 通过编辑器，编辑的文字和图片等HTML标记输出到页面的效果和编辑时显示的效果一致，无需经过其他步骤的转换和编码，能让用户方便地对编辑的内容进行修改和排版；,Html在线编辑器特点,2、自动转换HTML代码 在编辑状态编辑的文字、图片等内容都在后台状态下自动转换为可被浏览器识别的HTML标记语言；而且用户可以在代码状态下对代码标记进行修改和排版。 3、简
3、单易用 编辑器的编辑使用方法应该和尽量和FrontPage、Dreamweaver等主流网页制作软件或代码编辑器类似，风格保持一致，以达到无需任何HTML语法知识，机械式的操作也能让没有网页制作经验的用户快速掌握的目的。,Html在线编辑器特点,4、方便快捷 使用所见即所得的编辑器能快捷、方便地编辑出效果一流的图文内容，与纯手工编写代码进行编辑的方式比较，可以节省大量的时间和精力 5、兼容、吻合 利用编辑器提供的功能，可以方便地把系统已上传的图片动画影音文件加载到网页内容中，也可以通过插入信息组件与其他网页内容进行整合,常见在线编辑器,常见在线编辑器,常见在线编辑器,1、FreeTextBox
4、 一个有很多年历史的富文本编辑器了，使用简单，而且一般的使用是免费的，但是不开源，上传图片上传附件等功能没有，扩展性差。,常见在线编辑器,2、CuteEditor 最强大的富文本编辑器，巨牛无比，但是是收费的，个人使用的话用下破解版倒无所谓，要想在企业中使用那就得买了，所以虽然强大，但是想节约的话就不考虑这个了。,常见在线编辑器,3、FCKEditor（升级版CKEditor） 强大的开源富文本编辑器，各个语言中都可以使用。支持上传图片、Flash等，功能强扩展性强。,常见在线编辑器,常见在线编辑器,4、TinyMCE 也是一个开源的富文本编辑器，不过名气没有FCKEditor大，功能还是不,
5、常见在线编辑器,5、KindEditor 一个国人开发的富文本编辑器，貌似还不错，没有深入研究,常见在线编辑器,6、eWebEditor eWebEditor是基于浏览器的、所见即所得的在线HTML编辑器。她能够在网页上实现许多桌面编辑软件（如：Word）所具有的强大可视编辑功能。WEB开发人员可以用她把传统的多行文本输入框替换为可视化的富文本输入框，使最终用户可以可视化的发布HTML格式的网页内容。,常见在线编辑器,7、新浪博客编辑器（SinaEditor）,常见在线编辑器,FckEditor的配置及使用,Fckeditor的配置和使用,假设网站的虚目录,Fckeditor的配置和使用,调用
6、FCKeditor 的两种方法 1、通过创建实例来调用 在 index.php 文件中，调用它的代码，把下面的代码加在需要编辑器的地方：,Fckeditor的配置和使用, BasePath=./FCKeditor/; /工具按钮设置 FCkeditor-ToolbarSet=Default; /设置它的宽度 FCKeditor-Width=100%; /设置它的高度 FCKeditor-Height=300px; /生成 FCkeditor-Create(); ? ,Fckeditor的配置和使用,2、通过 IFRAME 调用 ,Fckeditor的使用,1、PHP中获取值 在PHP中获取请求
7、页面的Fckeditor和得到其他文本框的值一样 $_POSTmyFCKeditor 2、Js中获取值 你会发现弹谈出的窗口没内容。,Fckeditor的使用, function getContentValue() var oEditor = FCKeditorAPI.GetInstance(myFCKeditor); var acontent = oEditor.GetXHTML(); return acontent; ,Fckeditor的配置,1、工具按钮设置 EditSource 显示HTML源代码 StrikeThrough 删除线 Save 保存 NewPage 新建空白页面 Su
8、perscript 上标 Subscript 下标 Preview 预览 JustifyLeft 左对齐 Cut 剪切 Copy 复制 Paste 粘贴 .,Fckeditor的配置,2、语言的配置 查找FCKConfig.DefaultLanguage将它设置为zh-cn. 3、脚本语言的设置 查找var _FileBrowserLanguage和var _QuickUploadLanguage将他们设置为php, 默认是asp,如果这里不设置的话，图片将不能上传，这点很重要。当时我在用FCKeditor由于没配置这个，不能上传图片,Fckeditor的配置,4、图片上传的配置 打开文件FC
9、Keditor/editor/filemanager/browser/default/connectors/php/config.php： 查找ConfigEnabled，将它设置为true；查找ConfigUserFilesPath，将它设置图片的目录，这个目录是相对于主目录的。 例如：我写了一个blog，就可以设置为/blog/upload/ 打开文件FCKeditor/editor/filemanager/upload/php/config.php： 查找ConfigEnabled，将它设置为true；查找ConfigUseFileType，将它设置上传文件的目录，最好与上面的图片目录相同。,常见在线编辑器,作业： FckEditor的配置及使用 eWebEditor的配置及使用,有问有答,
