javascript - 用js实现富文本的一个效果

Question

我想用js实现一个文本编辑的效果，比如<p>11111112222222223333333333</p>,我想鼠标选中2222222这段之后，再点击一个按钮，可以实现<p>11111112222222223333333333</p>或者<p>11111112222222223333333333</p>这样的效果。

Answer 1

用 document.execCommand
具体可以看mdn或这篇博客http://zhengrenzhe.gitcafe.io/2015/04/22/editor/

Answer 2

@droiz 的答案可以实现
document.execCommand可以实现大部分富文本框的功能
具体查看MDN https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
博客 http://blog.csdn.net/bit_x/article/details/5587574
但是这样的富文本框不能用textarea作为载体应该用p或者ifream
你可以参考这篇博客http://blog.csdn.net/koself/article/details/8613779

Answer 3

我觉得你找的是 这个 rangy.js 很多高级编辑器都使用了这个库。
编辑器的原理都差不多的，给文字套标签，用这个库加上editable的p很容易做一个自定义的编辑器。

Answer 4

推荐百度的UEditor，功能全，简单易用，而且可以自定义要使用的模块
http://ueditor.baidu.com/website/onlinedemo.html