这题如果没搞错的话是人人网js面试题
实现一个所见即所得编辑器
需提供以下功能:1. 字体加粗;
2. 文本左对齐、右对齐、居中;
3. 设置字体;
4. 设置字号;
5. 设置字体颜色;
6. 插入超链接;
7. 插入图片;
我实现后的效果:
html:
<!doctype>
<html>
<head>
<meta charset='utf8'>
<link href='index.css' rel='stylesheet'>
<script src='index.js' type='text/javascript'></script>
</head>
<body>
<ul>
<li>
<label>加粗</label>
<select name='weight' id='weighten'>
<option value='normal'>normal</option>
<option value='bold'>bold</option>
<option value='bolder'>bolder</option>
</select>
</li>
<li>
<label>文本对齐:</label>
<input type='radio' id='leftAlign' name='alignType' value='left'><label for='leftAlign'>左对齐</label>
<input type='radio' id='middleAlign' name='alignType' value='center'><label for='middleAlign'>居中</label>
<input type='radio' id='rightAlign' name='alignType' value='right'><label for='rightAlign'>右对齐</label>
</li>
<li>
<label>字体</label>
<select name='fontType' id='fontType'>
<option value='宋体'>宋体</option>
<option value='黑体'>黑体</option>
<option value='Arial'>Arial</option>
<option value='Arial'>Verdana</option>
<option value='Arial'>Courier</option>
</select>
</li>
<li>
<label>字号</label>
<select name='font' id='fontSize'>
<option value='4'>4</option>
<option value='8' selected='selected'>8</option>
<option value='16'>16</option>
<option value='32'>32</option>
</select>
</li>
<br/>
<li><label>颜色</label>
<select name='color' id='color'>
<option value='black'>black</option>
<option value='red'>red</option>
<option value='blue'>blue</option>
<option value='green'>green</option>
<option value='orange'>orange</option>
</select>
</li>
<li>
<button type='button' id='insertLink'>插入超链接</button>
</li>
<li>
<button type='button' id='insertImg'>插入图片</button>
</li>
</ul>
<div contenteditable id='text'>
</div>
</body>
</html>
css:
body {
width: 70%;
margin: 5% auto;
}
li {
display: inline;
list-style: none;
margin-left: 10px;
}
#text {
width: 90%;
height: 80%;
border: 1px solid black;
}
js:
window.onload = function() {
var weighten = document.getElementById('weighten'),
alignType = document.getElementsByName('alignType'),
fontType = document.getElementById('fontType'),
fontSize = document.getElementById('fontSize'),
col = document.getElementById('color'),
insertLink = document.getElementById('insertLink'),
insertImg = document.getElementById('insertImg');
weighten.addEventListener('change',changeWeight);
for (var i = alignType.length-1; i >= 0; i--) {
alignType[i].addEventListener('click', changeAlign);
}
fontType.addEventListener('change', changeFontType);
fontSize.addEventListener('change', changeFontSize);
col.addEventListener('change', changeColor);
insertLink.addEventListener('click', insertLinkHandler);
insertImg.addEventListener('click', insertImgHandler);
}
function changeWeight(event) {
var text = document.getElementById('text');
var selIndex = event.target.options.selectedIndex;
text.style.fontWeight = event.target.options[selIndex].value;
}
function changeAlign(event) {
var text = document.getElementById('text');
text.style.textAlign = event.target.value;
}
function changeFontType(event) {
var text = document.getElementById('text');
var selIndex = event.target.options.selectedIndex;
text.style.fontFamily = event.target.options[selIndex].value;
}
function changeFontSize(event) {
var text = document.getElementById('text');
var selIndex = event.target.options.selectedIndex;
text.style.fontSize = event.target.options[selIndex].value + 'px';
}
function changeColor(event) {
var text = document.getElementById('text');
var selIndex = event.target.options.selectedIndex;
text.style.color = event.target.options[selIndex].value;
}
function insertLinkHandler(event) {
var text = document.getElementById('text');
var link = prompt('please input your URL', 'http://');
if (!!link) {
var linkName = prompt('please input a name for your link') || link;
text.innerHTML += "<a href=" + link + ">" + linkName + "</a>";
}
}
function insertImgHandler(event) {
var text = document.getElementById('text');
var link = prompt('please input your image link', 'http://');
if (!!link) {
text.innerHTML += "<img src=" + link + " alt='image'>";
}
}