每天学一个jquery插件-富文本编辑1

每天学一个jquery插件-富文本编辑1

富文本编辑1-光标哪些事

发现每天编辑博客的界面也是一个不错的模仿对象,所以搞个长一点的篇章,来模仿一个富文本编辑器出来,今天说的是这个框和光标怎么实现,总结了三种实现方式,还算简单吧

效果如下
每天学一个jquery插件-富文本编辑1_第1张图片

代码部分


<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>
		
		<div contentEditable="true" class="box">div>
		
		<div class="box tbox">
			<input type="text" class="text" />
		div>
	body>
html>
<script>
	$(function(){
      
		$(".tbox").click(function(){
      
			$(this).find(".text").focus();
		})
	})
script>

思路解释

  • 额,后面的是看到有些人的插件也是这么做的,所以也弄出来了,不过还是建议用第一种方式来做,后续才方便
  • 未完,这是个水长篇的方向,诶嘿嘿

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)