每天学一个jquery插件-富文本编辑1
Posted 阿飞超努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天学一个jquery插件-富文本编辑1相关的知识，希望对你有一定的参考价值。
每天学一个jquery插件-富文本编辑1
富文本编辑1-光标哪些事
发现每天编辑博客的界面也是一个不错的模仿对象，所以搞个长一点的篇章，来模仿一个富文本编辑器出来，今天说的是这个框和光标怎么实现，总结了三种实现方式，还算简单吧
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>光标那些事</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid lightgray;
width: 95%;
height: 60px;
border-radius:5px;
margin: 10px auto;
}
.text{
border: none;
outline: none;
display: block;
margin-left: 2px;
min-width: 20px;
}
</style>
</head>
<body>
<!-- 效果1 -->
<div contentEditable="true" class="box"></div>
<!-- 效果2 -->
<div class="box tbox">
<input type="text" class="text" />
</div>
</body>
</html>
<script>
$(function(){
$(".tbox").click(function(){
$(this).find(".text").focus();
})
})
</script>
思路解释
- 额，后面的是看到有些人的插件也是这么做的，所以也弄出来了，不过还是建议用第一种方式来做，后续才方便
- 未完，这是个水长篇的方向，诶嘿嘿
以上是关于每天学一个jquery插件-富文本编辑1的主要内容，如果未能解决你的问题，请参考以下文章