纯JavaScript在网页上实现”简书“的文章编辑器

今天在“简书”上看到发文章的文本编辑器，觉得很神奇，很梦幻，于是想在网页上实现一下。先上一张自己实现的网页编辑器的效果：

原理：多个input文本域叠加使用

每次点击按钮的时候，都会在一行添加一个input type=text，样式值为点击相应按钮的值【也给键盘enter绑定一个值】。废话不多说，直接上代码：

<!DOCTYPE html>
<html>
<head><title>仿简书</title><meta charset='utf-8'><script src="jquery-1.11.1.min.js"></script><style >ul{text-align: center;}ul li{display: inline;}input[type=text]{border:0px;width: 100%;font-size: 20px;}input[mazhe=quote]{background-color: rgb(192,192,192);}div[mazhe=quote]{border-style: none none none solid;background-color: rgb(192,192,192);font-size: 2.5em;}</style>
</head>
<body><ul><li><button id='black'>黑体</button></li><li><button id='italic'>斜体</button></li><li><button id='quote'>引用</button></li><li><button id='line-through'>划掉</button></li>
</ul><div id='content'>  <input type='text' id="msg">
</div><script >window.onload = function(){$('#msg').focus();
}var number = 0;
//回车
$('#br').click(function(){string = '<br/>';$('#content').append(string);
});//斜体
$('#italic').click(function(){var str = '<input style="font-style:italic" type="text" id = "num_'+number+'">';$('#content').append(str);$('#num_'+number).focus();number ++;
});//黑体
$('#black').click(function(){var str = '<input style="font-weight:bold" type="text" id = "num_'+number+'">';$('#content').append(str);$('#num_'+number).focus();number ++;});//引用
$('#quote').click(function(){var str = '<div mazhe="quote"><input mazhe="quote"type="text" id = "num_'+number+'"></div>';$('#content').append(str);$('#num_'+number).focus();number ++;
});//划掉
$('#line-through').click(function(){var str = '<input style="text-decoration:line-through" type="text" id = "num_'+number+'">';$('#content').append(str);$('#num_'+number).focus();number ++;
});//键盘enter键
document.onkeydown = function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode ==13){var str = '<input type="text" id = "num_'+number+'">';$('#content').append(str);$('#num_'+number).focus();number ++;}
};
</script></body>
</html>

除了向这样很low的方法应该还有其他的方式，但是除了input我不知道html5还提供了什么可用的api,希望大家不吝赐教

纯JavaScript在网页上实现”简书“的文章编辑器相关推荐

简书=鸡汤？爬取今日看点数据：1916篇简书热门文章可视化
一.前言最近写得两篇关于简书的数据可视化文章:<简书推荐作者风云榜(爬取简书app数据)>.<我的简书一月记:数据可视化>反响都还不错,因而将继续针对简书进行数据分析和可视化 ...
Node爬取简书首页文章
Node爬取简书首页文章博主刚学node,打算写个爬虫练练手,这次的爬虫目标是简书的首页文章流程分析使用superagent发送http请求到服务端,获取HTML文本用cheerio解析获得的 ...
python生成文章标题_利用简书首页文章标题数据生成词云
原标题:利用简书首页文章标题数据生成词云感谢关注天善智能,走好数据之路↑↑↑ 欢迎关注天善智能,我们是专注于商业智能BI,人工智能AI,大数据分析与挖掘领域的垂直社区,学习,问答.求职一站式搞定! ...
简书个人文章备份，图片批量导出小工具
此小工具弥补简书的 "打包下载文章" 功能上的不足,它能批量的将简书发布的个人文章上用到的所有图片批量爬取并导出到你的个人电脑,支持 Windows 和 Mac. 导出的文 ...
python 简书_python爬取简书网文章的方法
python爬取简书网文章的方法发布时间:2020-06-30 14:37:08 来源:亿速云阅读:100 作者:清晨这篇文章主要介绍python爬取简书网文章的方法,文中示例代码介绍的非常详细 ...
基于python爬虫的论文标题_Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】...
本文实例讲述了Python3实现爬取简书首页文章标题和文章链接的方法.分享给大家供大家参考,具体如下: from urllib import request from bs4 import Beaut ...
怎么去掉网页上复制到word的文章中各种符号例如向下箭头（↓）？
我们从网页上复制一些文章到Word中时,常常会带有好多向下箭头的符号" ↓ " ,它是什么符号呢? 它是换行符,又称手动换行符.它是软回车符号(Word中软回车是同时按住shift ...
java浮动广告_用JavaScript实现网页上的浮动广告
要做出浮动式广告的效果并不困难,如果你有JS基础的可以自己写一个,如果连写都懒得写的话,到网上下载一个特效工具,按提示粘贴一下代码就OK.不过,想要真正了解它是怎样做出来的,则需要掌握一些JS知识了. ...
运用JavaScript实现网页上图片与文字的放大与缩小
2019独角兽企业重金招聘Python工程师标准>>> 部分具体代码如下: <script type="text/javascript"> var ...

纯JavaScript在网页上实现”简书“的文章编辑器

纯JavaScript在网页上实现”简书“的文章编辑器相关推荐

最新文章

热门文章