实现一个所见即所得编辑器

最新推荐文章于 2024-05-28 09:46:47 发布

Dijason

最新推荐文章于 2024-05-28 09:46:47 发布

阅读量1.3k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Dijason/article/details/8749163

版权

web 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

这题如果没搞错的话是人人网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'>";
  }
}

Dijason

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现一个所见即所得编辑器

这题如果没搞错的话是人人网js面试题实现一个所见即所得编辑器需提供以下功能： 1. 字体加粗； 2. 文本左对齐、右对齐、居中； 3. 设置字体； 4. 设置字号； 5. 设置字体颜色； 6. 插入超链接； 7. 插入图片；我实现后的效果：html：
复制链接

扫一扫

专栏目录