1.HTML 标签(web编辑)
contenteditable 是 HTML 中的一个属性,设置 HTML标签的 contenteditable=“true” 时,即可开启该元素的编辑模式。contenteditable 的作用相当神奇,可以让 div 或整个网页,以及 span 等等元素设置为可编辑。如果想要整个网页可编辑,可以在 body 标签内设置 contenteditable
2.功能特殊的函数:execCommand
execCommand 有三个参数:
Command Name – 命令名称;
ShowDefaultUI – 未实现,所以最好设置为 false;
ValueArgument – 命令的参数;
ValueArgument 可以设置为 null,当你要设置一行文本的标签的时候(h1,h2,p ...),你需要使用 formatBlock 命令,并把标签放到 ValueArgument 中
核心代码:
$(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;
}
})
});
完整代码如下:
下载:bootstrap.css,font-awesome.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Editable</title>
<link href="assets/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
#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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js">
</script>
<script type="text/javascript">
$(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>