javascript – HTML5内容列表后的可编辑段落

前端之家收集整理的这篇文章主要介绍了javascript – HTML5内容列表后的可编辑段落前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用谷歌浏览器.

我需要一个非常小的HTML编辑器,我找到了Simple Edit.非常小的编辑器,只是为了我的需要.但是……这个和许多其他使用内容可编辑的编辑器有一个共同的问题.

问题

创建一个列表(在最后一个列表项上按两次输入)后,它会创建一个新的div.我预计将创建一个新的段落标记.

链接

>在这里尝试编辑:http://files.inlovewithcss.com/simple-edit/
>查看微小的源代码https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

防止div的正确方法是什么,而是在列表后添加段落标记

解决方法

Bryan Allo发布的答案没有考虑到你需要将光标放在div的末尾.否则,每次替换操作时,用户都必须按CTRL-End.

这是我提出的解决方案,也可以在http://jsfiddle.net/82dS6/中看到:

  1. function setEndOfContenteditable(contentEditableElement){
  2. // Taken from https://stackoverflow.com/a/3866442/1601088
  3. var range,selection;
  4. if(document.createRange){//Firefox,Chrome,Opera,Safari,IE 9+
  5. range = document.createRange();
  6. range.selectNodeContents(contentEditableElement);
  7. range.collapse(false);
  8. selection = window.getSelection();
  9. selection.removeAllRanges();
  10. selection.addRange(range);
  11. }
  12. else if(document.selection){//IE 8 and lower
  13. range = document.body.createTextRange();
  14. range.moveToElementText(contentEditableElement);
  15. range.collapse(false);
  16. range.select();
  17. }
  18. }
  19.  
  20. function replaceDivWithP(el){
  21.  
  22. $(el).find('div').each(function(){
  23. $(this).replaceWith($('<p>' + $(this).html() + '</p>'));
  24. });
  25. }
  26.  
  27. $(function(){
  28. $(".text").simpleEdit();
  29. });
  30.  
  31. $('.textarea').bind('keyup',function(){
  32. replaceDivWithP(this);
  33. setEndOfContenteditable(this);
  34. });
  35.  
  36.  

猜你在找的JavaScript相关文章