javascript 简易文本编辑器
2024-09-12 03:10:07
转载请注明出处:http://www.cnblogs.com/enzozo/p/4357031.html
写在前面:
本文本编辑器具备功能:选择字体大小、颜色、加粗、斜体、下划线。点击 'Submit' 后生成预览,再点击 'Edit' 后可继续编辑。
主要利用的是 document.execCommand()指令 和 div的contentEditable属性(值为true或空或inherit时,div中的内容可编辑,为false时不可编辑)。
正文开始:
index.html:
<!DOCTYPE html>
<html>
<head>
<title> 捉妖菌のEditor </title>
<link href="index.css" rel="stylesheet">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="toolbar">
<span>Size:</span>
<select id="size">
<option value="3">Tiny</option>
<option value="4">Small</option>
<option value="5">Normal</option>
<option value="6">Big</option>
<option value="7">Large</option>
</select>
<span>Color:</span>
<select id="color">
<option value="black" style="color:black">Black</option>
<option value="gray" style="color:gray">Gray</option>
<option value="brown" style="color:brown">Brown</option>
<option value="red" style="color:red">Red</option>
<option value="pink" style="color:pink">Pink</option>
<option value="yellow" style="color:yellow">Yellow</option>
<option value="orange" style="color:orange">Orange</option>
<option value="blue" style="color:blue">Blue</option>
<option value="Green" style="color:green">Green</option>
</select>
<span><strong>B</strong></span>
<input type="checkbox" id="bold">
<span><i>I</i></span>
<input type="checkbox" id="italic">
<span style="text-decoration:underline">U</span>
<input type="checkbox" id="underline">
</div>
<div>
<input type="button" value="Submit" id="submit">
<input type="button" value="Edit" id="edit">
</div>
<div id="editor" class="editable"></div>
</body>
</html>
index.css:
.editable, .display {
resize: vertical;
overflow: auto;
border: 1px solid silver;
border-radius: 5px;
min-height: 400px;
padding: 1em;
margin-top: 20px;
} body {
font-size: 13pt;
font-family: "Microsoft Yahei", Georgia, Serif;
} #submit, #edit {
position: absolute;
top: 22px;
right: 20px;
height: 30px;
} #edit {
display: none;
} #toolbar {
margin-top: 20px;
border: 1px solid silver;
padding: 5px;
background-color: #F2F2F2;
border-radius: 5px;
} .editable {
box-shadow: inset 0 0 10px silver;
} .display {
box-shadow: 0px;
}
注:因为div #editor有两种形式:编辑和预览。所以两种模式下,div需呈现出不同的样式,以免使用者产生不解。通过js更改#editor的className即可达到效果。
index.js:
$ = function(id) { return document.getElementById(id); };
$$ = function(tag) { return document.getElementsByTagName(tag); }; window.onload = function() {
$('editor').contentEditable = true;
$('size').onchange = function() {
var s = parseInt($('size').value);
$('editor').focus();
document.execCommand('FontSize', false, s);
}
$('color').onchange = function() {
$('editor').focus();
document.execCommand('ForeColor', false, $('color').value);
};
$('bold').onchange = function() {
$('editor').focus();
document.execCommand('Bold');
};
$('italic').onchange = function() {
$('editor').focus();
document.execCommand('Italic');
};
$('underline').onchange = function() {
$('editor').focus();
document.execCommand('Underline');
}; $('submit').onclick = function() {
$('editor').contentEditable = false;
$('toolbar').style.visibility = 'hidden';
$('edit').style.display = 'block';
$('submit').style.display = 'none';
$('editor').className = 'display';
}
$('edit').onclick = function() {
$('editor').contentEditable = true;
$('toolbar').style.visibility = 'visible';
$('edit').style.display = 'none';
$('editor').className = 'editable';
$('submit').style.display = 'block';
}
};
注:document.execCommand指令中,参数一为属性名,第二个参数为true(显示对话框)或false(不显示对话框),最后一个参数是针对第一个参数的值。
最后上一张测试图:
转载请注明出处:http://www.cnblogs.com/enzozo/p/4357031.html
最新文章
- js “+” 连接字符串&;数字相加 数字相加出现多位小数 函数调用单引号双引号嵌套和转义字符的使用
- CSS中的文本属性
- js library
- php验证复选框有效性的示例
- HBase0.98.1 通过协调器进行表的行数统计
- tortoisegit安装使用
- NSString copy or not (strong)?
- js 检验密码强度
- FZU1608(线段树)
- python3中的编码与解码用法
- pandas笔记
- 机器学习技法:10 Random Forest
- 心路历程(一)-自学java两个月心得
- .net core2.0+nginx+Ubuntu14.04【一个小白的初次尝试】
- Go 定长的数组
- 【python 2.7】输入任意字母数字,输出其对应的莫尔斯码并播放声音
- JavaScript事件的委派与事件的绑定
- Java入门系列-16-继承
- Friendly ARM linux交叉编译问题解决
- React中setState同步更新策略