原生态javascript编写富文本的一点参考文

最新推荐文章于 2023-03-21 17:06:35 发布

cdcdhj

最新推荐文章于 2023-03-21 17:06:35 发布

阅读量82

点赞数 1

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.csdn.net/cdcdhj/article/details/117036996

版权

javascript学习日记专栏收录该内容

136 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}
			#app{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				width: calc(100%-100px);
				height: calc(100%-100px);
				padding: 50px;
			}
			.operator-menu{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				min-height: 50px;
				background-color: beige;
				padding: 0 10px;
			}
			.edit-area{
				width: 100%;
				min-height: 600px;
				background-color: blanchedalmond;
				padding: 10px;
			}
			.operator-menu-item{
				padding: 5px 10px;
				background-color: cadetblue;
				border-radius:10px;
				cursor: pointer;
				margin: 0 5px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="operator-menu">
				<div class="operator-menu-item" data-fun='fontBold'>加粗</div>
				<div class="operator-menu-item" data-fun='textIndent'>缩进</div>
				<div class="operator-menu-item" data-fun='inserthorizontalrule'>插入</div>
				<div class="operator-menu-item" data-fun='linkUrl'>连接</div>
				<div class="operator-menu-item" onclick="print()">显示</div>
			</div>
			<div class="edit-area" id="edit" contenteditable='true'></div>
		</div>
		<script language="javascript">
			var operationItems=document.querySelector('.operator-menu');
			var edit=document.querySelector('.edit-area');
			document.execCommand("defaultParagraphSeparator", false, "p");
			operationItems.addEventListener('mousedown',function(e){
				var target=e.target;
				var funName=target.getAttribute('data-fun');
				if(!window[funName]) return '';
				window[funName]();
				e.preventDefault();
			});
			function fontBold(){
				document.execCommand('bold');
			}
			function textIndent(){
				document.execCommand('indent');
			}
			function inserthorizontalrule(){
				document.execCommand('inserthorizontalrule');
			}
			function linkUrl(){
				
				document.execCommand('createlink',false,window.prompt('输入连接地址'));
			}
			function print(){
				console.log(edit.innerHTML);
			}
			edit.addEventListener('paste',function(e){
				e.preventDefault();
				var txt='';
				var range=null;
				txt=e.clipboardData.getData('text/plain');
				range=window.getSelection().getRangeAt(0);
				range.deleteContents();
				var pasteTxt=document.createTextNode(txt);
				range.insertNode(pasteTxt);
				range.collapse(false);
			})
		</script>
	</body>
</html>

参考：http://eux.baidu.com/blog/fe/%E5%88%A9%E7%94%A8-javascript-%E5%AE%9E%E7%8E%B0%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
https://www.cnblogs.com/xiaohuochai/p/5884206.html

cdcdhj

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生态javascript编写富文本的一点参考文

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ width: 100%; height: 100%; padding: 0; margin: 0; } #app{ display: flex;
复制链接

扫一扫

专栏目录