如何制作富文本框

Posted 2020-09-09 MR_Begin

第一看到导师使用div+textarea实现富文本框的时候，有下面两个疑问：

1.为什么不能直接使用textarea？

自己试了一下，发现textarea会将html标签看做字符串，就算是用append()和html()也不可以。这样就没办法通过span等html标签给文本内容附上样式。

2.那直接用div呢？

一个最重要的问题，div不可编辑。哈，当然可以通过设置 contenteditable=“true”;来解决。可是，你会发现一个问题。因为我做的富文本框要跟后台数据

进行校验，正确和错误都要设置不同的颜色。所以需要引入valuechange()方法。但是每次调用valuechange()方法就会发现光标怎么跑到文本前面去了。伙

伴们想要在div+contenteditable=“true”;动态加载图片的时候也会遇到这个问题。

可以把光标设置在文本最末端？

当然可以。使用range对象可以让光标一直处在最末端（el是div对象）

var el=$(‘#text‘)[0];//如何把jquery对象转为dom
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

But！如果想记录上一次光标插入的位置！看了很多大牛的博客，input等可输入文本都可以成功设置光标在指定位置。然而，div就是不！行！！！
但是，我就是有一种执念，觉得没有解决不了的问题，只有不过硬的技术！
下面是不是应该接着写解决办法了。
loading。。。
各位大牛有想到解决办法，求评论