制作HTML编辑器,网站文章编辑器,在线word编辑器
http://hi.baidu.com/i_ccboy/item/f40ac6fda4a38214fe35822e
你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤:
1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。
你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>
这样你就可以在这个iframe区域里写字了。
2,选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时,一般是先打字,再编辑样式。所以你需要一个选中要处理文本的方法。JS的 selection.createRange()可以选中文本,返回一个对象,你可以通过访问该对象的text属性得到被选中的文本。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" οnclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>
3,改变被选中文本的样式。selection.createRange()选中文本,返回一个对象,该对象有一个方法execCommand(),可以用来改变被选中文本的样式。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" οnclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>
execCommand()的常用用法:
字体--宋体、黑体、楷体等
execCommand("fontname","",字体)
字号--字号大小
execCommand("fontsize","",字号)
加重
execCommand("Bold")
斜体
execCommand("Italic")
下划线
execCommand("Underline")
删除线
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷贝
execCommand("Copy")
粘贴
execCommand("Paste")
取消操作--IE5.0以后可以无限取消
execCommand("Undo")
重复操作
execCommand("Redo")
把上面的每个用法用按钮来实现,你就已经完成了一个简单的可视文本编辑器。
------------------------------------------------------------------------------------------------
HTML在线编辑器实际上是什么
其实有好几种实现方式,目前用得最多、兼容性最好的还是iframe方式。
<iframe src="" frameborder="0"></iframe>
只有这个空iframe是不行的,还要用Javascript把它设成可编辑:
iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;
换而言之,HTML在线编辑器就是一个可编辑的iframe。
加粗、斜体、下划线、加链接等功能如何实现
浏览器已经提供了实现这些功能的接口execCommand:
iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);
这三个参数的意思分别是:
cmd:命令文本,有好多,IE的可以看这里,Firefox的可以看这里。
isDefaultShowUI:是否默认显示交互界面,比如加链接的时候,可以通过界面填入链接。不过这个参数存在兼容性问题,一般设为false将其禁用,并另外制作交互界面。
value:传入的值,某些命令可以省略。
execCommand的问题是,生成的代码可能不标准,比如在IE下,文字加粗用的是b标签而不是strong标签。
交互问题
用户不可能总是在编辑器中输入,比如加粗、插入图片等功能是通过按钮操作的。假设用户要加粗一段选中的文字,当他按了加粗按钮后,选区以及焦点也会跟着跑到那去,因此选区(选中的文字)丢失,操作也就无法完成;同理,插入图片时插入位置也会丢失。
也就是说,要保存最后出现在编辑器中的选区。我采取的方案是,当焦点在编辑器内的时候,用一个定时器(setInterval)定时获取当前选区。选区编程平时很少用,做起来也有很多兼容性问题,主要是参考微软的MSDN(TextRange ControlRange)和Mozilla的MDC(Range Selection)了。
回车问题
在IE下,按回车是换段落,生成<p>,但在Firefox下是换行,生成的是<br>。要解决这个问题,就要监听keydown事件,如果检测到按键是回车,就插入“<p></p>”。
获取标准的代码
如何获取编辑的内容呢?这个问题很简单,只要获取iframe页面body中的innerHTML就可以了:
var content = iframe.contentWindow.document.body.innerHTML;
然而,IE下的innerHTML非常不标准:标签名是大写的,属性没有引号包起来,单标签也没有结束符……即便是Firefox下获取的代码,也有少量瑕疵。这个时候就要用正则表达式对代码进行标准化处理。
总结
不多说了,做一遍HTML编辑器,你就会知道CKEditor是多么强大。
制作HTML编辑器,网站文章编辑器,在线word编辑器相关推荐
- 帝国cms把网站文章内容生成word文档下载插件
帝国cms把网站文章内容生成word文档下载插件 插件介绍 jQuery Word Export是一款可以将网页中的文字导出到微软Word文档中的jQuery插件.它通过FileSaver.js文件来 ...
- html嵌入在线word编辑器
几款在线文本编辑器的比较 最近几天一直在寻找一款在线的文本编辑器,并试用了其中一些,有些体会,现记录于下: 一个国外的网站,记录了一份几乎涵盖所有 WYSIWYG 在线编辑器比较表: http://w ...
- java html文本编辑器,基于Java WebHTML在线文本编辑器解决方案.doc
基于Java WebHTML在线文本编辑器解决方案 基于Java WebHTML在线文本编辑器解决方案 摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国 ...
- java web 编辑器_22个所见即所得在线 Web 编辑器
我们曾介绍过10个基于JavaScript的WYSIWYG(所见即所得)编辑器,这些WPHP 我们曾介绍过 10 个基于 JavaScript 的 WYSIWYG(所见即所得) 编辑器,这些 Web ...
- java在线编辑器_微软开源在线代码编辑器——Monaco Editor
介绍 Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代码提示,智能建议等功能.供开发人员远程更方便的编写代码.移动浏览器或移动Web框架不支持Mona ...
- 文章html格式排版工具,网站文章排版美化:推荐几款实用丰富的在线编辑器 | 闲一鱼博客...
便民服务在线编辑器 直通门 加载速度快,功能丰富全面,体验效果不错. KindEditor 直通门 KindEditor可以说是目前最为优秀.成熟的编辑器,加载速度非常快,文档全面,支持扩展开 ...
- bluePen – 使用在线 CSS 编辑器美化你的网站
BluePen 是一款非常强大的样式编辑工具,甚至可以轻松地安装在一个动态的网站中.一旦你已经安装了它,你就可以在任何时间,任何地方修改样式表,一切修改将实时更新到您的浏览器(但不是线上网站),在按下 ...
- (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定...
本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...
- 开源在线excel编辑器_5款免费在线PDF转换成word或者excel的分享
word在日常工作中,应用广泛,但是里面关于PDF的转换工具必需要会员才可以使用,但又不愿意只为了转换一次而花费钱去买会员,本文为你们提供了5款免费在线PDF转换成word或者excel的网. 1.I ...
最新文章
- python每个if条件后面都要使用冒号_每一个条件后面都要使用冒号。(2.0分)_学小易找答案...
- c++ primer plus 学习笔记
- python 二维 排序
- cnetos6.2搭建mysql_基于腾讯云的Centos6.2系统搭建Apache+Mysql+PHP开发环境
- python最小化打开exe_如何用python使GoAgent窗口打开后自动最小化以及关闭之前的py.exe窗口...
- php生成vcf,详解PHP如何实现生成vcf vcard文件
- 循序渐进Python3(十二) --2-- web框架之django简单实现oracle数据库操作
- ES termQuery和matchQuery区别浅析
- w10自动删除文件怎么关了_回收站删除的文件怎么恢复?
- libvirt中的message bus
- puppet经典应用
- VB连接SQL SERVER实例
- 重庆邮电大学c语言题库
- Python打字练习程序
- 买台式计算机看属性,电脑配置怎么看,教您怎么查看电脑配置
- Flink 1.13(八)CDC
- 雪碧图PHP,如何在小程序中使用雪碧图
- 苹果手机该如何拍摄证件照
- STM32 内部Flash读写 程序源码 [已验证]
- EF + EFCore 学习
热门文章
- 白泽知识讲堂 | printf漏洞介绍
- Windows+Deepin双系统的安装(win11+deepin20.7.1)
- 【计算方法】牛顿-拉弗森法(非线性方程的求解)
- ECS云服务器基础信息
- 微信小程序 实现合并对象 concat
- 来,你们想要的打卡功能
- 基于JAVA英语学习网站设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署
- Unbound classpath container: 'JRE System Library [JavaSE-1.7]' in project 'idweb')
- [2015-H]-聊天止于呵呵
- 《被讨厌的勇气》书摘心得之我们的不幸是谁的错?(4)