<body>
<header class="mui-bar mui-bar-nav" style="background-color: #0e90d2;z-index:20">
<a class="mui-icon mui-icon-left-nav mui-pull-left" style="color:white" onclick="mui.back()"></a>
<h1 class="mui-title gradient">发表文章</h1>
<a class="mui-icon mui-pull-right" style="color: white;font-size: 17px;margin-top: 4px;">完成</a>
</header>
<div class="mui-content" style="height:100%;">
<div style="width:100%;height:50px;border:1px solid #AAAAAA;font-weight: bold;font-family: helvetica;font-size: 20px;color:#8F8F94;line-height:50px; -webkit-user-select: auto;
-webkit-user-modify: read-write;" contenteditable=true onclick="editTitle(this)">#这里输入文本</div>
<div id="contentInput" style="height: 100%;" onclick="editContent(this)" oninput="alert(mui.focus(this))" contenteditable=true>#这里是内容区</div>
</div>
<footer>
<div class="footer-center">
<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 50px;"></i>
</div>
</footer>
</body> mui.plusReady(function() {
main = plus.android.runtimeMainActivity();
Intent = plus.android.importClass("android.content.Intent");
intent = new Intent();
intent.setClassName(main, 'com.muzhi.camerasdk.PhotoPickActivity');
var msgImageDom = document.getElementById("msg-image");
contentInputDom = document.getElementById("contentInput");
msgImageDom.addEventListener("tap", function() {
var REQUESTCODE = 1000;
main.onActivityResult = function(requestCode, resultCode, data) {
if (requestCode == REQUESTCODE) {
plus.android.importClass(data);
var bundle = data.getExtras();
plus.android.importClass(bundle);
var cameraSdkParameterInfo = bundle.getSerializable("extra_camerasdk_parameter");
plus.android.importClass(cameraSdkParameterInfo);
var result = strToJson(cameraSdkParameterInfo.getImageListToJsonStr());
var innerHtml = contentInputDom.innerHTML;
innerHtml = innerHtml.replace("<div><br></div>", "");
contentInputDom.innerHTML = innerHtml;
for (var i = 0; i < result.imagePaths.length; i++) {
// var img = document.createElement("IMG");
// img.src = result.imagePaths[i];
// img.width = 50;
// img.height = 50;
// contentInputDom.appendChild(img);
contentInputDom.innerHTML += "<div class='teleditor'><img src='" + result.imagePaths[i] + "' width=50 height=50></img></div>"
}
// contentInputDom.innerHTML+="<div><br></div>";
// for(var imagePath in result.imagePaths){
// var img = document.createElement("IMG");
// img.src=imagePath
// img.width="50px";
// img.height="50px";
// contentInputDom.appendChild(img);
// }
}
}
main.startActivityForResult(intent, REQUESTCODE);
});
});我做的是一个移动端的文章编辑功能，但当图片添加完后，在次换行输入文字，理论上文字应该紧跟着img后，但却跑到了首部也就是光标跑到了div的第一个位置插入文字。很诡异的一种情况。
说下观察的结果
div 变成contenteditable=true 的时候内部innerHtml是这样的
如果是文字 <div>文字内容</div>
如果你有换行 <div><br></div>
如果添加图片 <div class="teleditor"><img ...></img><.div>
如果是纯文字换行输入都没问题，甚至手动点击某处光标落到那处，插入文字都没问题
但如果添加了图片后问题就来了，光标看似在img后面，但是一输入完文本就跳到首行
6 个回复
DCloud_UNI_FXY
发一个测试工程
starkgao (作者)
附件是demo
DCloud_UNI_FXY
没发现你说的问题。可以录个视频说明一下
starkgao (作者)
我上面有指示光标闪烁位置
DCloud_UNI_FXY
手机系统是多少？你只给我了一个页面。我在5.1测试没问题。最好发一个完整的工程
2015-11-23 21:56
starkgao (作者)
oppo
android 4.2.1
sytan
请问怎么解决的，我也遇到一样的问题，用selection插入图片插到最前面去了，PC正常，要疯了