PHP在线编辑器.ppt

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