项目需求是可以在文字编辑的同时加入图片和表情，所以只能用 div contenteditable 实现。
现在遇到的问题是：
1.输入法键盘的换行没有效果，如何实现。
2.加入图片后光标消失。
- 手动选择光标位置，如何在该位置插入表情或者图片。
- 使用.focus()方法只会把光标定位到最前面。
有方法的大大请多多指点，感激不尽。
vlancer
- 发布：2016-07-25 11:17
- 更新：2018-10-31 15:48
- 阅读：5866
最佳回复
赵梦欢 - 专注前端，乐于分享！
这个问题重难点在于两个【获得输入框键盘焦点】和【光标移动到最后】。
【获得输入框键盘焦点】我在mui初级入门教程（五）— 聊聊即时通讯（IM），基于环信 web im SDK一文中提到过，方法如下：
// 获得输入框键盘焦点
var msgTextFocus = function(obj){
obj.focus();
setTimeout(function() {
obj.focus();
}, 150);
}【光标移动到最后】参考网上一文input、textarea、div(contenteditable=true)光标定位到最后可以解决。
// 光标移动到最后
function msgTextLastPos(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}
else if (document.selection) {//ie10 9 8 7 6 5
var range = document.selection.createRange();//创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>富文本编辑器</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
<style>
*{
margin: 0;
padding: 0;
-webkit-user-select: auto;
}
.wrap{
width: 80%;
margin: 20px auto;
box-shadow: #272727 0px 0px 5px;
}
.edit_wrap{
width: 96%;
padding: 2%;
overflow: auto;
line-height: 1.5;
outline: none;
border: 1px solid #eee;
}
.icon{
width: 25px;
}
button.mui-btn{
width: 80%;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="edit_wrap" contenteditable="true"></div>
</div>
<button id="add" type="button" class="mui-btn mui-btn-blue mui-btn-block">添加图片</button>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var msgText = document.querySelector(".edit_wrap");
document.querySelector('#add').addEventListener('tap',function () {
// 添加图片
var img = document.createElement("img");
img.src = "img/qq.png";
img.className = "icon";
msgText.appendChild(img);
// 光标移动到最后
msgTextLastPos(msgText);
// 获得输入框键盘焦点
msgTextFocus(msgText);
})
// 获得输入框键盘焦点
var msgTextFocus = function(obj){
obj.focus();
setTimeout(function() {
obj.focus();
}, 150);
}
// 光标移动到最后
function msgTextLastPos(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}
else if (document.selection) {//ie10 9 8 7 6 5
var range = document.selection.createRange();//创建选择对象
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
</script>
</body>
</html>
ios中不能吧，我试过了但是不能，到底是怎么回事？
-
-
MUI,为了用户体验防止手机弹出输入框.对所有元素添加了-webkit-user-select: none;.
解决方案:
根据业务需要自行修改-webkit-user-select属性,如*{-webkit-user-select: auto;}2016-09-28 13:54
-
可以换行的，在页面所在的html文件的<style></style>中加入*{
margin: 0;
padding: 0;
-webkit-user-select: auto;
}
记得这行前面不要有注释哦，我刚开始加了注释，没任何换行效果，但是把注释去掉了就好了，血的教训啊2017-03-29 14:49
ios我用tap事件，加入手动focus,可以激活光标输入
document.querySelector('.edit_wrap').addEventListener('tap',function (obj) {
this.focus();
setTimeout(function() {
this.focus();
}, 150);
})
全栈工程师 - 精通mui、uniapp,承接相关项目外包,解决各种疑难问题。有任何问题可以随时联系，QQ：419761282
有一个新问题，就是我把img换掉，再换一个新的标签如b标签，当我添加后，再后面输入汉字，就都在b标签里了 是怎么回事啊？要怎么解决
全栈工程师
有一个新问题，就是我把img换掉，再换一个新的标签如b标签，当我添加后，再后面输入汉字，就都在b标签里了 是怎么回事啊？要怎么解决
2018-10-31 15:48