简易博客编辑器:玩转document.execCommand命令
xhEditor是基于jQuery开发的跨平台轻量可视化XHTML编辑器,基于LGPL开源协议发布。今天就把它山寨一下。
上几张图,看看效果:
先做出菜单部分:发现是一张背景图片,所以用图片映射的方法,可以实现:
img src="xhImages/icon.png" usemap="#iconmap">
map id="iconmap" name="iconmap">
area shape="circle" coords="17,14,12" href="#" title="剪切(Ctrl+X)" id="cut"
></area>
area shape="circle" coords="40,14,12" href="#" title="复制(Ctrl+C)" id="copy"
></area>
area shape="circle" coords="63,14,12" href="#" title="粘贴(Ctrl+V)" id="paste" onmouseover="hiddenDiv();"></area>
area shape="circle" coords="86,14,12" id="special"></area>
div id="specialDiv">
p style="font-size:13px;padding-left:15px;">使用键盘快捷键(Ctrl+V)把内容粘贴到方框里,按 确定</p>
textarea cols="37" rows="5" id="textAreaww"></textarea>
input type="button" onclick="charu('comfirm');" value="确定"
>
input type="button" onclick="charu('cancel');" value="取消">
div>
16:
17:
area shape="circle" coords="112,14,12" href="javascript:parag('<p>')" title="段落标签"
area>
ul id="paraUl">
li><a href="javascript:parag('<p>')"><p>普通段落</p></a></li>
li><a href="javascript:parag('<h1>')"><h1>标题1<h1></a></li>
li><a href="javascript:parag('<h2>')"><h2>标题2</h2></a><li>
li><a href="javascript:parag('<h3>')"><h3>标题3</h3></a></li>
li><a href="javascript:parag('<h4>')"><h4>标题4</h4></a></li>
li><a href="javascript:parag('<h5>')"><h5>标题5</h5></a></li>
li><a href="javascript:parag('<h6>')"><h6>标题6</h6></a></li>
li><a href="javascript:parag('<pre>')"><pre>已编排格式</pre></a></li>
li><a href="javascript:parag('<address>')"><address>地址</addresss></a></li>
ul>
对于其他的area区域用类似的方式,有了静态效果,就可以用js实现简单的交互:隐藏和显示子菜单:
1: var cut = document.getElementById("cut");
3: {
4: alert("您的浏览器安全设置不允许使用剪切操作,请使用键盘快捷键(Ctrl+X)完成");
6: var copy = document.getElementById("copy");
8: {
9: alert("您的浏览器安全设置不允许使用复制操作,请使用键盘快捷键(Ctrl+C)完成");
11: var paste = document.getElementById("paste");
13: {
14: alert("您的浏览器安全设置不允许使用粘贴操作,请使用键盘快捷键(Ctrl+V)完成");
16:
17: var special = document.getElementById("special");
18: var specialDiv = document.getElementById("specialDiv");
20: {
21: specialDiv.style.display = "block";
22: paraUl.style.display = "none";
23: fontUl.style.display = "none";
24: sizeUl.style.display="none";
25: fontColorDiv.style.display="none";
26: bgColorDiv.style.display="none";
27: duiqiUl.style.display = "none";
28: liebiaoUl.style.display = "none";
29: setLDiv.style.display="none";
30: tuDiv.style.display="none";
31: bqDiv.style.display="none";
32: bgDiv.style.display="none";
33: codeDiv.style.display="none";
34: yyDiv.style.display="none";
35: }
对其他的area主要是用mouseover和mouseout事件,然后就是利用execCommand命令将功能应用到
元素。ps:各浏览器对execCommand命令的支持不同,代码在FF和Chrome的新版本中调试过,其他浏览
器未调试,出现不同的结果敬请谅解。
- /*
- *第二个参数最好不要设置为TRUE,否则可能会执行不了
- */
- //加粗
- function jiacu()
- {
- document.execCommand("Bold",false,null);
- }
- //斜体
- function xieti()
- {
- document.execCommand("Italic",false,null);
- }
- //下划线
- function xiahua()
- {
- document.execCommand("Underline",false,null);
- }
- //删除线
- function shanchu()
- {
- document.execCommand("StrikeThrough",false,null);
- }
- //设置字体
- function setFontName(param)
- {
- document.execCommand("FontName",false,param);
- document.getElementById("fontUl").style.display="none";
- }
- //设置字体大小
- function setFontSize(param)
- {
- document.execCommand("FontSize",false,param);
- document.getElementById("sizeUl").style.display="none";
- }
- //设置字体颜色
- function setFontColor(param)
- {
- document.execCommand("ForeColor",false,param)
- document.getElementById("fontColor1").style.display="none";
- }
- //设置背景颜色
- function setBackColor(param)
- {
- document.execCommand("BackColor",false,param)
- document.getElementById("bgColor1").style.display="none";
- }
- //删除文字格式
- function removeFormat()
- {
- document.execCommand("RemoveFormat",false,null);
- }
- //对齐方式
- function duiqiway(param)
- {
- document.execCommand(param,false,null);
- document.getElementById("duiqiUl").style.display="none";
- }
- //插入列表
- function insertList(param) //不能实现
- {
- document.execCommand(param,false,null);
- alert("暂时未实现");
- document.getElementById("liebiaoUl").style.display="none";
- }
- //改变缩进
- function changeIndent(param) //不能实现
- {
- document.execCommand(param,false,null);
- alert("暂时未实现");
- }
- //链接 //不能实现,取消链接的命令只用于用createLink命令创建的链接
- function setLink(param)
- {
- document.execCommand(param,false,"http://blog.csdn.net/u011043843"); //第三个参数为URL
- alert("暂时未实现");
- }
- //表情
- function insertBQ(param)
- {
- document.execCommand("InsertImage",false,param); //param为图片的url
- document.getElementById("bqDiv").style.display="none";
- }
- //段落
- function parag(param)
- {
- document.execCommand("formatBlock",false,param);
- document.getElementById("paraUl").style.display="none";
- }
对于execCommand的用法请自行补脑。推荐一个稍官方的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/document.execCommand
由于部分命令浏览器不支持,小编能力也有限,最终只实现了部分功能。不足之处,望读者谅解。
篇幅有限,只写出部分代码。如果你有需要,还请移步下载全部代码:
简易博客编辑器:玩转document.execCommand命令的更多相关文章
- django 简易博客开发 4 comments库使用及ajax支持
首先还是贴一下源代码地址 https://github.com/goodspeedcheng/sblog 上一篇文章我们介绍了静态文件使用以及如何使用from实现对blog的增删改,这篇将介绍如何给 ...
- Django搭建简易博客
Django简易博客,主要实现了以下功能 连接数据库 创建超级用户与后台管理 利用django-admin-bootstrap美化界面 template,view与动态URL 多说评论功能 Markd ...
- 简易博客[ html + css ] 练习
1. 前言 通过使用 html + css 编写一个简易的博客作为入门练习 2. 代码及实现 2.1 目录结构 2.2 代码部分 <!DOCTYPE html> <html lang ...
- Nodejs+MongoDB+Bootstrap+esj搭建的个人简易博客
github:https://github.com/yehuimmd/myNodeBloy Nodejs+MongoDB+jQuery+Bootstrap-esj搭建的个人简易博客 主要功能 前台 : ...
- 这是通过 Open Live Writer(是个博客编辑器) 发布的
Open Live Writer 是开源的win10上的博客编辑器
- django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务
上一篇博客介绍了comments库使用及ajax支持,现在blog已经具备了基本的功能,但是只能发表文字,不支持富文本编辑.今天我们利用markdown添加富文本支持. markdown语法说明: h ...
- django 简易博客开发 3 静态文件、from 应用与自定义
首先还是贴一下源代码地址 https://github.com/goodspeedcheng/sblog 上一篇博客我们介绍了 django 如何在views中使用templates以及一些常用的数 ...
- django 简易博客开发 2 模板和数据查询
首先还是贴一下项目地址 https://github.com/goodspeedcheng/sblog 因为代码全在上面 上一篇博客我们介绍了 django的安装配置,新建project,新建a ...
- django 简易博客开发 1 安装、创建、配置、admin使用
首先贴一下项目地址吧 https://github.com/goodspeedcheng/sblog 到现在位置项目实现的功能有: 1.后台管理使用Admin ,前端显示使用bootstrap 2. ...
随机推荐
- 我又回来了,这回是带着C++来的
一晃就是5年,之前在博客园开这个博客主要是跟着大牛学习C#,那个时候自己偏重于asp.net,后来开发了一段时间的Winform.近几年由于工作原因,偏重于测试仪器开发,属于工控行业,主要使用的是C+ ...
- DIY时钟类--广州百田笔试之一
2014.05.30 武汉华科大活 题目:(原题不记得,大概回忆)用户输入一个时间,输出下一个时间 这个小题看似不难,实际处理起来对date的处理稍微繁琐,每月有30,31,28,29(闰年的判断)天 ...
- nagios plugins之 check_http
nagios下的check_http ZT具体参数是一个比较重要的点,我带大家来看看.. //显示版本 #./check_http -V check_http v2053 (nagios-plugin ...
- hdu 4294 Multiple
思路: 首先给出一个结论,就是最多用两个数就可以表示任何数的倍数. 证明 :对于一个数字a,可以构造出的数字有 a,aa,aaa,aaaa,aaaaa,…… 每一个数对于n都有一个余数,余数最多有n个 ...
- hdu 1525 Euclid's Game 博弈论
思路:两个数a和b,总会出现的一个局面是b,a%b,这是必然的,如果a>=b&&a<2*b,那么只有一种情况,直接到b,a%b.否则有多种情况. 对于a/b==1这种局面, ...
- 探讨read的返回值的三种情况
http://blog.chinaunix.net/uid-23629988-id-3035613.html 今天探讨一个很看似简单的API “read”的返回值问题.read的返回值有哪几个值?每个 ...
- Android:Resources资源文件
Android Resoureces是res目录下的那些目录和文件,常用的有: res/drawable/ 存放图片资源,类型有: 相关使用: Android:res之shape制作圆角 Androi ...
- 如何解决MySQLAdministrator 启动报错
运行环境:MySQL 5.1.41 win32 ZIP 非安装版MySQL GUI Tools 5.0(版本1.2.17.0) 运行MySQLAdministrator时提示:服务器服务或配置文件不能 ...
- 不输入密码ssh直接登录阿里云Linux主机
服务器环境:阿里云云服务器,Linux版本 - CentOS 客户端环境:Mac OSX Terminal 注意: 如果有3个账号都要无密码登录, 则3个账号都要这么操作 在Terminal中用ssh ...
- git rebase无法处理的问题
在进行代码整理的时候,遇到了冲突 现在chucklu_master分支指向这个commit SHA-1: 88fa1ee9263402626d85b5a4362e1b620935953f * remo ...