如何制作富文本框

第一看到导师使用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。。。
各位大牛有想到解决办法,求评论
原文地址:https://www.cnblogs.com/Begin-Vic/p/6681398.html