我使用谷歌浏览器.
我需要一个非常小的HTML编辑器,我找到了Simple Edit.非常小的编辑器,只是为了我的需要.但是……这个和许多其他使用内容可编辑的编辑器有一个共同的问题.
问题
创建一个列表(在最后一个列表项上按两次输入)后,它会创建一个新的div.我预计将创建一个新的段落标记.
>在这里尝试编辑:http://files.inlovewithcss.com/simple-edit/
>查看微小的源代码:https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js
题
解决方法
Bryan Allo发布的答案没有考虑到你需要将光标放在div的末尾.否则,每次替换操作时,用户都必须按CTRL-End.
这是我提出的解决方案,也可以在http://jsfiddle.net/82dS6/中看到:
- function setEndOfContenteditable(contentEditableElement){
- // Taken from https://stackoverflow.com/a/3866442/1601088
- var range,selection;
- if(document.createRange){//Firefox,Chrome,Opera,Safari,IE 9+
- range = document.createRange();
- range.selectNodeContents(contentEditableElement);
- range.collapse(false);
- selection = window.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
- }
- else if(document.selection){//IE 8 and lower
- range = document.body.createTextRange();
- range.moveToElementText(contentEditableElement);
- range.collapse(false);
- range.select();
- }
- }
- function replaceDivWithP(el){
- $(el).find('div').each(function(){
- $(this).replaceWith($('<p>' + $(this).html() + '</p>'));
- });
- }
- $(function(){
- $(".text").simpleEdit();
- });
- $('.textarea').bind('keyup',function(){
- replaceDivWithP(this);
- setEndOfContenteditable(this);
- });
-