你是想拿去用还是想学习思想。一般而言,一个简单的编辑器基本上就是利用document.selection对象取得当前要编辑的文本内容,然后创造需要的DOM元素包裹它。例如你要插入一个图片,可以 <button onclick="insertImg()">插入图片</button> <div id="eidtor_view"></div> <textarea id="eidtor_edit"></div> function insertImg(){ var img = document.createElement("img"); img.style.width="100px"; img.style.height="100px"; img.setAttribute("src","default.jpg");//默认图片 document.getElementById("eidtor_edit")[0].innerText = img.outerHTML; //往编辑器里插字符 document.getElementById("eidtor")[0].appendChild(img);//往预览里面插入img元素 } 上面只是比较简单的例子,什么加粗,换行,还有加链接,都是利用document.selection对象取得当前光标选中的文字,放到各种生成的元素中。 这些都是dom-based类型的编辑器。还有一种是string-base的。就是直接拼接字符串。 大概的思想就是这些,毕竟一个好点的编辑器是比较复杂的工程。 文笔不好,只能大概说这么些,不足的请其他大牛给你补充。 顺便说下,segmentfault的markdown编辑器就是string-base的。编辑器器中的文本,被markdown.js或者后台的编译器(姑且这么叫下吧)根据markdown语法编译成html。
你是想拿去用还是想学习思想。一般而言,一个简单的编辑器基本上就是利用document.selection对象取得当前要编辑的文本内容,然后创造需要的DOM元素包裹它。例如你要插入一个图片,可以
上面只是比较简单的例子,什么加粗,换行,还有加链接,都是利用document.selection对象取得当前光标选中的文字,放到各种生成的元素中。
这些都是dom-based类型的编辑器。还有一种是string-base的。就是直接拼接字符串。
大概的思想就是这些,毕竟一个好点的编辑器是比较复杂的工程。
文笔不好,只能大概说这么些,不足的请其他大牛给你补充。
顺便说下,segmentfault的markdown编辑器就是string-base的。编辑器器中的文本,被markdown.js或者后台的编译器(姑且这么叫下吧)根据markdown语法编译成html。