javascript - ckeditor 停止传播
问题描述
我想让 ckeditors 移动。当我在其上添加内联样式时,它会立即刷新,因此我在div.editor_out
外面创建了一个父级。父 div 的内联样式不会消失。
当我点击ckeditor的区域时,也触发了父级。如何解决这个问题?谢谢你。
https://jsbin.com/nilolenote/1/edit?html,js,输出
<div class="editor_out">
<div class="editor" id="editor" onclick="focusMethod(this, event);" >
<p>This is some sample contenA.</p>
</div>
</div>
<div class="editor_out">
<div class="editor" id="editor" onclick="focusMethod(this, event);" >
<p>sample contenB.</p>
</div>
</div>
<script>
function dragElement(elmnt)
{
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
(function(){
pics = document.querySelectorAll('.editor_out');
for (let ii in pics) {
dragElement(pics[ii]);
}
editors = document.querySelectorAll( 'div.editor' ) ;
for(let ii in editors ) {
// console.log(ii);
if (!isNaN(ii-0)) {
InlineEditor
.create( editors[ii], {
toolbar: {
items: [
'bold',
'italic',
]
},
} )
.then( editor => {
window.editor = editor;
// editor.stopPropagation();
} )
.catch( error => {
} );
editors[ii].addEventListener('click', function(e){
e.stopPropagation();
// this.classList.remove("ck-blurred");
// this.classList.add("ck-focused");
this.focus();
});
}
}//for(let ii in editors )
})();
focusMethod = function getFocus(e, event) {
event.stopPropagation();
event.preventDefault();
return false;
}
</script>
解决方案
推荐阅读
- python - 如何在 Python 中平滑数据?
- php - 根据帖子类型的多个 WP_Query args 组合
- ruby-on-rails - 从 WebpageTest 结果 Cloudflare/Heroku/Rails 改进 HTTP 缓存
- java - 如何从 Java 连接到 Databricks Apache Spark 的远程实例并将其写入 csv 文件?
- javascript - 在调用突变时从后端graphql获取通知以进行前端反应
- php - 如何将 .php 页面添加到我的 Wordpress 页面?
- javascript - 使用 javascript 动态创建电话日记
- c - 为什么这个版本的 strrev 比我的快?
- android - 如何在 Android TV App 上将屏幕方向设置为纵向模式?
- c# - 模拟验证 DbSet 失败,GetEnumerator 未验证