踩坑踩惨了 记录一下 有其他想法的欢迎留下评论
contenteditable="true" 将div变成类似textarea的存在，在div中可以编辑，不仅可以输入文字还能放图片和span等html标签
- contenteditable 这个属性是会被子元素继承的
回车问题
div中按回车键，如果光标前面有html标签就会在该标签外面包上一层div再加上<br >,如果没有html标签则会显示<div></div><br >，会影响数据处理
办法
jq阻止回车键的换行功能，变为空格
$(document).on('keydown','#comment_replay',function(e){
//将回车键 换行换成空格
if(e.keyCode == 13 ) {
e.preventDefault();
insertHtmlAtCaret(' ')
}
})
空格 和<>&等特殊字符
如题，这些特殊字符在div中正常显示，但是控制器中打印出来就能发现都被转义了
办法
php的htmlspecialchars_decode的方法在转回来..
光标不显示问题
在某些标签后面，光标会被隐藏，简单百度下，貌似是标签高度和div高度导致光标看不到，没深究
办法
在jq往div中添加html标签时，前后加上空格，就能看到 但是把标签后面的空格删掉光标又会消失了....
复制粘贴问题
在浏览器复制地址栏里面的url，粘贴到div中，url不是纯文本会变成a标签
办法
document.getElementById('comment_replay').addEventListener('paste', function (e)
{
textFormat (e)
})
function textFormat (e) {
e.preventDefault()
var text
var clp = (e.originalEvent || e).clipboardData
if (clp === undefined || clp === null) {
text = window.clipboardData.getData('text') || ''
if (text !== '') {
if (window.getSelection) {
var newNode = document.createElement('span')
newNode.innerHTML = text
window.getSelection().getRangeAt(0).insertNode(newNode)
} else {
document.selection.createRange().pasteHTML(text)
}
}
} else {
text = clp.getData('text/plain') || ''
if (text !== '') {
document.execCommand('insertText', false, text)
}
}}
在光标前面添加标签
点击一个按钮，根据光标位置，在div中插入相应的html标签
方法
//在光标前插入数据 html：已经拼接好的html标签代码
function insertHtmlAtCaret(html)
{
//@好友和表情两个点击元素 ，必须要是按钮，否则光标的获取会出问题
//鼠标点击其他地方，光标也会选定过去（虽然肉眼不可见，但是打印选中元素能看出来），所以要判断目前的光标是否还在回复框内，如果不在默认选到div的最后面方便输入（光标前面如果是纯文字要判断选中的父级元素，如果是标签判断当前选中元素即可）。
//这里使用try{}catch（）{} ，是因为如果光标不选中div直接点击按钮添加会报错，为了避免报错就try.catch 无论报错与否只要光标不在div中默认选到div的最后面
try{
if(!$(window.getSelection().getRangeAt(0).endContainer).parent('div').is('#comment_replay')&&!$(window.getSelection().getRangeAt(0).endContainer).is('#comment_replay'))
{
let range = document.createRange();
range.selectNodeContents(document.getElementById('comment_replay'));
range.collapse(false);
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}catch(err){
let range = document.createRange();
range.selectNodeContents(document.getElementById('comment_replay'));
range.collapse(false);
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
//插入元素
var sel, range;
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount)
{
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode)
{
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
document.getElementById('comment_replay').scrollIntoView(false);//元素滚动到与视口顶部齐平地方
}
maxlength
input中会有maxlength的属性来控制输入的数量，但是div中maxlength是无效的
办法
通过按下键盘触发的事件和键盘码来阻止键盘输入
缺陷
英文可以限制 但是复制粘贴的限制不了，输入中文限制不了，所以提交数据和控制器那块都要在另做验证
if(目前输入框的字符串数量 > 最大限制数量)
{
// 小键盘 英文字母 特殊字符 的键盘码
if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <=
90) || (e.keyCode >= 96 && e.keyCode <= 111) || (e.keyCode >= 186 && e.keyCode <=
92) || (e.keyCode >= 219 && e.keyCode <= 222))
{
e.preventDefault();
}
}
