JavaScript 实现文本编辑器
JavaScript 实现文本编辑器
最近,我需要做一个非常基本的网页内容编辑功能。我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表,对齐等等。
用谷歌搜索找了很久,发现所有的插件都是功能太复杂,不是我想要的。所以,我决定我自己来实现需要的编辑功能。刚开始我觉得应该要花费很多的时间,因为我想象内容编辑功能应该是很复杂的。
但事实证明,它是如此简单,让我十分惊讶!借助 HTML5 特性,所有的工具都已经可用,所有你需要做的只是配合他们编写一些非常简单的 JavaScript 代码调用就可以了。
你需要两样东西,第一是:
1
|
contenteditable |
contenteditable 是 HTML 中的一个属性,设置 HTML标签的 contenteditable=“true” 时,即可开启该元素的编辑模式。contenteditable 的作用相当神奇,可以让 div 或整个网页,以及 span 等等元素设置为可编辑。
我们最常用的输入文本内容是 input 与 textarea,使用 contenteditable 属性后,可以在div、table、p、span、body等等很多元素中输入内容。如果想要整个网页可编辑,可以在 body 标签内设置 contenteditable。contenteditable 已在 HTML5 标准中得到有效的支持.
第二样东西是一个功能特殊的函数:
1
|
execCommand |
execCommand 让我们能够对 contenteditable 区域的内容做一些相当复杂的操作。如果你想了解更为详细的内容可以看这里:The Mozilla Docs。
从本质上讲, execCommand 有三个参数:
Command Name – 命令名称;
ShowDefaultUI – 未实现,所以最好设置为 false;
ValueArgument – 命令的参数;
多数情况下,ValueArgument 可以设置为 null,但有一种情况:当你要设置一行文本的标签的时候(h1,h2,p 等),你需要使用 formatBlock 命令,并把标签放到 ValueArgument 中。
现在,事情就很简单了,我们把 exexCommand 要执行的命令放到 data-role 属性中,然后编写简单的 JavaScript 都可以很容易地完成编辑器功能了。核心代码其实就10行:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$( function () { $( '#editControls a' ).click( function (e) { switch ($( this ).data( 'role' )) { case 'h1' : case 'h2' : case 'p' : document.execCommand( 'formatBlock' , false , '<' + $( this ).data( 'role' ) + '>' ); break ; default : document.execCommand($( this ).data( 'role' ), false , null ); break ; } }) }); |
完整代码如下:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Editable WYSIWYG</
title
>
<
link
href
=
"bootstrap.css"
rel
=
"stylesheet"
>
<
link
href
=
"font-awesome.css"
rel
=
"stylesheet"
>
<
style
>
#editor {
resize:vertical;
overflow:auto;
border:1px solid silver;
border-radius:5px;
min-height:100px;
box-shadow: inset 0 0 10px silver;
padding:1em;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"content"
>
<
div
class
=
"container-fluid"
>
<
div
id
=
'pad-wrapper'
>
<
div
id
=
"editparent"
>
<
div
id
=
'editControls'
class
=
'span12'
style
=
'text-align:center; padding:5px;'
>
<
div
class
=
'btn-group'
>
<
a
class
=
'btn'
data-role
=
'undo'
href
=
'#'
><
i
class
=
'icon-undo'
></
i
></
a
>
<
a
class
=
'btn'
data-role
=
'redo'
href
=
'#'
><
i
class
=
'icon-repeat'
></
i
></
a
>
</
div
>
<
div
class
=
'btn-group'
>
<
a
class
=
'btn'
data-role
=
'bold'
href
=
'#'
><
b
>Bold</
b
></
a
>
<
a
class
=
'btn'
data-role
=
'italic'
href
=
'#'
><
em
>Italic</
em
></
a
>
<
a
class
=
'btn'
data-role
=
'underline'
href
=
'#'
><
u
><
b
>U</
b
></
u
></
a
>
<
a
class
=
'btn'
data-role
=
'strikeThrough'
href
=
'#'
><
strike
>abc</
strike
></
a
>
</
div
>
<
div
class
=
'btn-group'
>
<
a
class
=
'btn'
data-role
=
'justifyLeft'
href
=
'#'
><
i
class
=
'icon-align-left'
></
i
></
a
>
<
a
class
=
'btn'
data-role
=
'justifyCenter'
href
=
'#'
><
i
class
=
'icon-align-center'
></
i
></
a
>
<
a
class
=
'btn'
data-role
=
'justifyRight'
href
=
'#'
><
i
class
=
'icon-align-right'
></
i
></
a
>
<
a
class
=
'btn'
data-role
=
'justifyFull'
href
=
'#'
><
i
class
=
'icon-align-justify'
></
i
></
a
>
</
div
>
<
div
class
=
'btn-group'
>
<
a
class
=
'btn'
data-role
=
'indent'
href
=
'#'
><
i
class
=
'icon-indent-right'
></
i
></
a
>
<
a
class
=
'btn'
data-role
=
'outdent'
href
=
'#'
><
i
class
=
'icon-indent-left'
></
i
></
a
>
</
div
>
<
div
class
=
'btn-group'
>
<
a
class
=
'btn'
data-role
=
'insertUnorderedList'
href
=
'#'
><
i
class
=
'icon-list-ul'
></
i
></
a
>
<
a
class
=
'btn'
data-role
=
'insertOrderedList'
href
=
'#'
><
i
class
=
'icon-list-ol'
></
i
></
a
>
</
div
>
<
div
class
=
'btn-group'
>
<
a
class
=
'btn'
data-role
=
'h1'
href
=
'#'
>h<
sup
>1</
sup
></
a
>
<
a
class
=
'btn'
data-role
=
'h2'
href
=
'#'
>h<
sup
>2</
sup
></
a
>
<
a
class
=
'btn'
data-role
=
'p'
href
=
'#'
>p</
a
>
</
div
>
<
div
class
=
'btn-group'
>
<
a
class
=
'btn'
data-role
=
'subscript'
href
=
'#'
><
i
class
=
'icon-subscript'
></
i
></
a
>
<
a
class
=
'btn'
data-role
=
'superscript'
href
=
'#'
><
i
class
=
'icon-superscript'
></
i
></
a
>
</
div
>
</
div
>
<
div
id
=
'editor'
class
=
'span12'
style
=
''
contenteditable>
<
h1
>This is a title!</
h1
>
<
p
>This is just some example text to start us off</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
"jquery.min.js"
></
script
>
<
script
src
=
"bootstrap.min.js"
></
script
>
<
script
>
$(function() {
$('#editControls a').click(function(e) {
switch($(this).data('role')) {
case 'h1':
case 'h2':
case 'p':
document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
break;
default:
document.execCommand($(this).data('role'), false, null);
break;
}
})
});
</
script
>
</
body
>
</
html
>
JavaScript 实现文本编辑器的更多相关文章
- 10个免费的javascript富文本编辑器(jQuery and non-jQuery)
祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...
- Javascript富文本编辑器
分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ck ...
- javascript 在线文本编辑器
javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...
- javascript 简易文本编辑器
转载请注明出处:http://www.cnblogs.com/enzozo/p/4357031.html 写在前面: 本文本编辑器具备功能:选择字体大小.颜色.加粗.斜体.下划线.点击 'Submit ...
- JavaScript 富文本编辑器
WEB项目中使用UEditor(富文本编辑器) UEditor - 完整示例 http://ueditor.baidu.com/website/onlinedemo.html UEditor注意事项: ...
- 小伙伴们惊呆了!10行 JavaScript 实现文本编辑器
最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表,对齐等等. 您可能感兴趣的相关文章 分 ...
- 10行 JavaScript 实现文本编辑器
背景 我们平时用到的浏览器编辑器功能都会比较多,实现的代码逻辑也会非常复杂,往往是作为一个单独插件被引入进来的.但是,现在我只需要一个很基本的内容输入内容编辑的功能,如:粗体.斜体.列表.对齐等.那要 ...
- Thinkphp 文本编辑器
文本编辑器:可以从网上下载---ueditor文件夹里面包含php和utf8-php两个文件夹 平时使用时主要用到获取内容和写入内容两个按钮 获取内容: <!DOCTYPE html PUBLI ...
- 富文本编辑器TinyMCE
最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/1 ...
随机推荐
- Android L下载
Android L千呼万唤最终出来了,那么我们先下载下来一睹为快,那么怎么去拿到最新的L的分支 那依照傻瓜步骤总结下(Linux Ubuntu) 1.获取repo文件 (1).curl https:/ ...
- 在Eclipse下导入vlc-android并编译
在Ubuntu14.04下载好了VLC的源代码后,VLC的Eclipseproject存放在"vlc-android"文件夹 root@dzt-VirtualBox:/home/d ...
- 我的MYSQL学习心得(十)
原文:我的MYSQL学习心得(十) 我的MYSQL学习心得(十) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL ...
- Kafka集群在空载情况下Cpu消耗比较高的问题
线上kafka与storm的空载情况下负载都比较高, kafka达到122%, storm平均负载达到, 20%, 当前是通过Ambari下管理kafka的, a. 先停止s5的kafka进程.b. ...
- MySQL安装指南
近期领导突然说要用MySQL,我立刻当天晚上就研究了一下. http://www.mysql.com/这是官网,还好能够訪问.好多年前已经被oracle收购.分为企业版和社区版: MySQL Ente ...
- Java开发工具IntelliJ IDEA使用教程:创建新的Andriod项目
IntelliJ IDEA社区版作为一个轻量级的Java开发IDE,本身是一个开箱即用的Android开发工具. 注意:在本次的教程中我们将以Android平台2.2为例进行IntelliJ IDEA ...
- 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的 ...
- 【转】 Android项目的mvc模式
MVC (Model-View-Controller):M是指逻辑模型,V是指视图模型,C则是控制器.一个逻辑模型M可以对于多种视图模型V,比如一批统计数据你可以分别用柱状图.饼图V来表示.一种视图模 ...
- sql材料分级统计及汇总案例参考
--第一步:根据系统编号.列.单价分组求和 select CLBH,DJ,sum(SL) as SL,sum(JE) as JE,Lie into #TempSZCMX from #ShouZhiCu ...
- Windows服务、批处理项目实战
一周一话题之三(Windows服务.批处理项目实战) -->目录导航 一. Windows服务 1. windows service介绍 2. 使用步骤 3. 项目实例--数据上传下载服务 ...