文本编辑器弹出时内容可编辑光标位置在可编辑 div 中 [英] Content Editable cursor position to be in editable div when popup of text editor occur
本文介绍了文本编辑器弹出时内容可编辑光标位置在可编辑 div 中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试构建一个 jquery 内容可编辑代码，其中用户在将鼠标悬停时识别可编辑 div，一旦单击该 div，内容就会变为可编辑并弹出按钮以选择编辑类型.现在，当我单击按钮时，会弹出一个文本编辑器并设置文本格式，一旦单击按钮，光标或指针就会从可编辑的 div 中出来.我正在使用 jquery 使内容可编辑
这是我的代码.
$(function() {变种鼠标X；变种鼠标Y；变模态=假；$(文档).mousemove(函数(f) {mouseX = f.pageX;鼠标Y = f.pageY;});var openPopup = function(e) {//打开弹窗的函数$(e).fadeIn(400);$('#mask, [data-nitstextpopup]').fadeIn(400).css({'顶部':鼠标Y，左":鼠标X}).draggable();$('#mask').css({顶部":0，左":0});$('[data-nitstextbutton]').hide();};var closePopup = function() {//关闭弹出窗口的函数$('#mask, [data-nitstextpopup]').fadeOut(400);$('[data-nitstextbutton]').show();};$('[data-nitspagelabel]').hover(function() {$(this).css('border', 'solid 1px #777');}， 功能() {$(this).css('border', 'none');});$('[data-nitspagelabel]').click(function() {$(this).attr('contenteditable', 'true');var labeltype = $('[data-nitspagelabel]').data("nitslabeltype");如果(标签类型==文本"){如果(模态==假){模态=真；$('[data-nitstextbutton]').css({'顶部':鼠标Y，左":鼠标X}).fadeIn(400).click(函数(e) {e.preventDefault();var popupbox = $(this).attr('href');打开弹出(弹出框)；});}}});$('#mask').on('click', function(e) {e.stopPropagation();关闭弹出()；模态=假；$('[data-nitstextbutton]').hide();});$(document).keyup(function(e) {如果(e.keyCode == 27){关闭弹出()；模态=假；$('[data-nitstextbutton]').hide();}});});#mask {显示:无；背景:#9ACD32；位置:固定；左:0；顶部:0；z指数:88888；宽度:100%；高度:100%；不透明度:0.2}[数据-nitstextpopup] {显示:无；背景:#e2e2e2；填充:0px；向左飘浮;字体大小:1.2em；位置:固定；宽度:250px；z 指数:99999；}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></脚本><script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><身体><div id="掩码"></div><h3>这是newject扩展生成的新html文档</h3></div><div class="clearfix" data-nitstextbutton style="display: none;"><a href="#nitstexteditor" class="btn btn-circle btn-sm 默认">编辑 <i class="fa fa-pencil"></i></a><a href="#" class="btn btn-icon-only btn-circle default"><i class="fa fa-circle-o-notch"></i></a></div><div id="editable" style="top: 50%; left: 50%" data-nitspagelabel="1" data-nitslabeltype="text"><h3>这是可编辑的内容，我可以在其中更改字体和编辑文本</h3></div><div id="nitstexteditor" style="display: none;"数据-nitstextpopup="0" 数据-nitseditor="1"><div class="portlet 框蓝色"><div class="portlet-title"><div 类="标题"><i class="fa fa-pencil-square-o"></i>文本编辑器</div><div 类="工具"><a href="" class="删除"></a></div></div><div class="portlet-body 形式"><form 角色="form"><div class="form-body"><div class="form-group"><div 类="输入组"><span class="input-group-addon input-circle-left"><i class="fa fa-magic"></i></span><input type="text" class="form-control input-circle-right" placeholder="选择样式"></div></div><div class="form-group"><div 类="输入组"><span class="input-group-addon input-circle-left"><i class="fa fa-font"></i></span><input type="text" class="form-control input-circle-right" placeholder="选择字体"></div></div><div class="form-group"><div 类="输入组"><span class="input-group-addon input-circle-left"><i class="fa fa-font"></i></span><input type="text" class="form-control input-circle-right" placeholder="Select Size"></div></div><div class="form-group"><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-bold"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-italic"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-underline"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-align-justify"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-align-left"></i></a></div><div class="form-group"><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-align-right"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-undo"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-repeat"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-link"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-chain-broken"></i></a></div></div></表格></div></div></div>稍后我会将凭据用于格式化文本.提前致谢！
解决方案
我在异常情况下使用了停止传播，它成功了！！！
刚刚使用了下面的代码:
stopPropagation();完整代码如下:
var key;var 编辑标签；function nitspopupeditor(key, edittag) {//格式化可编辑项的函数.如果(编辑标签){document.execCommand(edittag, false, null);$('key').focus();}};function closep() {//关闭按钮时关闭弹出窗口的函数.$('[data-nitstextpopup]').fadeOut(400);$('[data-nitstextbutton]').show();}$(函数(){变种鼠标X；变种鼠标Y；变模态=假；$(文档).mousemove(函数(f) {mouseX = f.pageX;鼠标Y = f.pageY;});var openPopup = function(e) {//打开弹窗的函数$(e).fadeIn(400);$('[data-nitstextpopup]').fadeIn(400).css({'顶部':鼠标Y，左":鼠标X}).draggable();$('[data-nitstextbutton]').hide();};var closePopup = function() {//关闭弹出窗口的函数$('[data-nitstextpopup]').fadeOut(400);$('[data-nitstextbutton]').show();};$('[data-nitspagelabel]').hover(function() {//只悬停可编辑项$(this).css('border', 'solid 1px #777');}， 功能() {$(this).css('border', 'none');});$('[data-nitspagelabel]').click(function() {//点击可编辑div上的函数获取可编辑按钮var $this = $(this);key = $this.attr('[data-nitspagelabel]');$(this).attr('contenteditable', 'true');var labeltype = $('[data-nitspagelabel]').data("nitslabeltype");如果(标签类型==文本"){如果(模态==假){模态=真；$('[data-nitstextbutton]').css({//弹出文本编辑按钮'顶部':鼠标Y，左":鼠标X}).fadeIn(400).click(函数(e) {e.preventDefault();$this.focus(函数() {var $this = $(this);$this.data('enter', $this.html());$this.data('之前', $this.html());返回$这个；}).on('keyup paste', function() {//使用任何按下或粘贴的键var $this = $(this);var text = $this.html();if ($this.data('before') != text) {$this.data('之前'，文本);变量数据 = {};数据[键] = 文本；}返回$这个；}).on('blur', function() {//点击外部发送数据保存var $this = $(this);var text = $this.html();if ($this.data('enter') !== text) {$this.data('enter', text);变量数据 = {};数据[键] = 文本；}返回$这个；});var popupbox = $(this).attr('href');打开弹出(弹出框)；//打开编辑工具弹出窗口edittag = $('[data-nitsedittag]').data("nitsedittag");nitspopupeditor(键，编辑标签)；//格式化按钮});}}});$(document).click(function(e) {//点击外部关闭弹出窗口关闭弹出()；模态=假；$('[data-nitstextbutton]').hide();});$('[data-nitstextpopup]').click(function(e) {//设置关闭弹窗的执行区域e.stopPropagation();});$("#btnedit").click(function(e) {//设置关闭弹窗的执行区域e.stopPropagation();});$("#editable").click(function(e) {//设置关闭弹窗的执行区域e.stopPropagation();});$(document).keyup(function(e) {//设置 esc 按钮关闭弹窗如果(e.keyCode == 27){关闭弹出()；模态=假；$('[data-nitstextbutton]').hide();}});});<body><div contenteditable="true"><h3>这是newject扩展生成的新html文档</h3></div><div id="btnedit" class="clearfix" data-nitstextbutton style="display: none;"><a href="#nitstexteditor" class="btn btn-circle btn-sm 默认">编辑 <i class="fa fa-pencil"></i></a><a href="#" class="btn btn-icon-only btn-circle default"><i class="fa fa-circle-o-notch"></i></a></div><div id="editable" style="top: 50%; left: 50%" data-nitspagelabel="1" data-nitslabeltype="text"><h3>这是可编辑的内容，我可以在其中更改字体和编辑文本</h3></div><div id="nitstexteditor" style="display: none;"数据-nitstextpopup="0" 数据-nitseditor="1"><div class="portlet 框蓝色"><div id="test" class="portlet-title"><div 类="标题"><i class="fa fa-pencil-square-o"></i>文本编辑器</div><div 类="工具"><a onclick="closep()" class="remove"></a></div></div><div class="portlet-body 形式"><form name="texteditorform" 角色="form"><div class="form-body"><div class="form-group"><div 类="输入组"><span class="input-group-addon input-circle-left"><i class="fa fa-magic"></i></span><input type="text" class="form-control input-circle-right" placeholder="选择样式"></div></div><div class="form-group"><div 类="输入组"><span class="input-group-addon input-circle-left"><i class="fa fa-font"></i></span><input type="text" class="form-control input-circle-right" placeholder="选择字体"></div></div><div class="form-group"><div 类="输入组"><span class="input-group-addon input-circle-left"><i class="fa fa-font"></i></span><input type="text" class="form-control input-circle-right" placeholder="Select Size"></div></div><div class="form-group"><a class="btn btn-icon-only default" onclick="nitspopupeditor()" data-nitsedittag="bold"><i class="fa fa-bold"></i></a><a class="btn btn-icon-only default" data-nitsedittag="italic"><i class="fa fa-italic"></i></a><a href="javascript:;"class="btn btn-icon-only default" data-nitsedittag="underline"><i class="fa fa-underline"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-align-justify"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-align-left"></i></a></div><div class="form-group"><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-align-right"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-undo"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-repeat"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-link"></i></a><a href="javascript:;"class="btn btn-icon-only default"><i class="fa fa-chain-broken"></i></a></div></div></表格></div></div></div></身体>[data-nitstextpopup] {显示:无；背景:#e2e2e2；填充:0px；向左飘浮;字体大小:1.2em；位置:固定；宽度:250px；z 指数:99999；}I'm trying to build a jquery content editable code where a user identifies the editable div while hovering the mouse, once it clicks on that div the content becomes editable and buttons pops up for selecting type of edit. Now when I click the button a text editor pop up and formats the text, once I click the button the cursor or pointer it comes out of the editable div. I'm using jquery to make the content editable
Here's my code.
$(function() {
var mouseX;
var mouseY;
var modal = false;
$(document).mousemove(function(f) {
mouseX = f.pageX;
mouseY = f.pageY;
});
var openPopup = function(e) { //Function to open popup
$(e).fadeIn(400);
$('#mask, [data-nitstextpopup]').fadeIn(400).css({
'top': mouseY,
'left': mouseX
}).draggable();
$('#mask').css({
'top': 0,
'left': 0
});
$('[data-nitstextbutton]').hide();
};
var closePopup = function() { // Function to close the popup
$('#mask, [data-nitstextpopup]').fadeOut(400);
$('[data-nitstextbutton]').show();
};
$('[data-nitspagelabel]').hover(function() {
$(this).css('border', 'solid 1px #777');
}, function() {
$(this).css('border', 'none');
});
$('[data-nitspagelabel]').click(function() {
$(this).attr('contenteditable', 'true');
var labeltype = $('[data-nitspagelabel]').data("nitslabeltype");
if (labeltype == "text") {
if (modal == false) {
modal = true;
$('[data-nitstextbutton]').css({
'top': mouseY,
'left': mouseX
}).fadeIn(400).click(function(e) {
e.preventDefault();
var popupbox = $(this).attr('href');
openPopup(popupbox);
});
}
}
});
$('#mask').on('click', function(e) {
e.stopPropagation();
closePopup();
modal = false;
$('[data-nitstextbutton]').hide();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup();
modal = false;
$('[data-nitstextbutton]').hide();
}
});
});
#mask {
display: none;
background: #9ACD32;
position: fixed;
left: 0;
top: 0;
z-index: 88888;
width: 100%;
height: 100%;
opacity: 0.2
}
[data-nitstextpopup] {
display: none;
background: #e2e2e2;
padding: 0px;
float: left;
font-size: 1.2em;
position: fixed;
width: 250px;
z-index: 99999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div id="mask"></div>
<div>
<h3>this is new html document generated by newject extention</h3>
</div>
<div class="clearfix" data-nitstextbutton style="display: none;">
<a href="#nitstexteditor" class="btn btn-circle btn-sm default">
Edit <i class="fa fa-pencil"></i>
</a>
<a href="#" class="btn btn-icon-only btn-circle default">
<i class="fa fa-circle-o-notch"></i>
</a>
</div>
<div id="editable" style="top: 50%; left: 50%" data-nitspagelabel="1" data-nitslabeltype="text">
<h3>This is the content editable where I can change fonts and edit text</h3>
</div>
<div id="nitstexteditor" style="display: none;" data-nitstextpopup="0" data-nitseditor="1">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-pencil-square-o"></i> Text Editor
</div>
<div class="tools">
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-magic"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Select style">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-font"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Select font">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-font"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Select Size">
</div>
</div>
<div class="form-group">
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-bold"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-italic"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-underline"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-align-justify"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-align-left"></i>
</a>
</div>
<div class="form-group">
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-align-right"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-undo"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-repeat"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-link"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-chain-broken"></i>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
I'll put the credentials to format text later on. Thanks in advance!
解决方案
I used stop propagation on the exceptional cases and it worked!!!!
Just used the below code:
stopPropagation();
Full code is below:
var key;
var edittag;
function nitspopupeditor(key, edittag) { //Function to format editable items.
if (edittag) {
document.execCommand(edittag, false, null);
$('key').focus();
}
};
function closep() { // Function to close the popup on close button.
$('[data-nitstextpopup]').fadeOut(400);
$('[data-nitstextbutton]').show();
}
$(function() {
var mouseX;
var mouseY;
var modal = false;
$(document).mousemove(function(f) {
mouseX = f.pageX;
mouseY = f.pageY;
});
var openPopup = function(e) { //Function to open popup
$(e).fadeIn(400);
$('[data-nitstextpopup]').fadeIn(400).css({
'top': mouseY,
'left': mouseX
}).draggable();
$('[data-nitstextbutton]').hide();
};
var closePopup = function() { // Function to close the popup
$('[data-nitstextpopup]').fadeOut(400);
$('[data-nitstextbutton]').show();
};
$('[data-nitspagelabel]').hover(function() { // to hover only editable items
$(this).css('border', 'solid 1px #777');
}, function() {
$(this).css('border', 'none');
});
$('[data-nitspagelabel]').click(function() { //click function on editable div to get editable buttons
var $this = $(this);
key = $this.attr('[data-nitspagelabel]');
$(this).attr('contenteditable', 'true');
var labeltype = $('[data-nitspagelabel]').data("nitslabeltype");
if (labeltype == "text") {
if (modal == false) {
modal = true;
$('[data-nitstextbutton]').css({ //popup text editing buttons
'top': mouseY,
'left': mouseX
}).fadeIn(400).click(function(e) {
e.preventDefault();
$this.focus(function() {
var $this = $(this);
$this.data('enter', $this.html());
$this.data('before', $this.html());
return $this;
}).on('keyup paste', function() { // any key pressed or paste is used
var $this = $(this);
var text = $this.html();
if ($this.data('before') != text) {
$this.data('before', text);
var data = {};
data[key] = text;
}
return $this;
}).on('blur', function() { // Clicking outside send the data to save
var $this = $(this);
var text = $this.html();
if ($this.data('enter') !== text) {
$this.data('enter', text);
var data = {};
data[key] = text;
}
return $this;
});
var popupbox = $(this).attr('href');
openPopup(popupbox); // opens the editing tools popup
edittag = $('[data-nitsedittag]').data("nitsedittag");
nitspopupeditor(key, edittag); // formatting buttons
});
}
}
});
$(document).click(function(e) { // clicking outside closing the popup
closePopup();
modal = false;
$('[data-nitstextbutton]').hide();
});
$('[data-nitstextpopup]').click(function(e) { // setting execption areas for closing popup
e.stopPropagation();
});
$("#btnedit").click(function(e) { // setting execption areas for closing popup
e.stopPropagation();
});
$("#editable").click(function(e) { // setting execption areas for closing popup
e.stopPropagation();
});
$(document).keyup(function(e) { // setting esc button close popup
if (e.keyCode == 27) {
closePopup();
modal = false;
$('[data-nitstextbutton]').hide();
}
});
});
<body>
<div contenteditable="true">
<h3>this is new html document generated by newject extention</h3>
</div>
<div id="btnedit" class="clearfix" data-nitstextbutton style="display: none;">
<a href="#nitstexteditor" class="btn btn-circle btn-sm default">
Edit <i class="fa fa-pencil"></i>
</a>
<a href="#" class="btn btn-icon-only btn-circle default">
<i class="fa fa-circle-o-notch"></i>
</a>
</div>
<div id="editable" style="top: 50%; left: 50%" data-nitspagelabel="1" data-nitslabeltype="text">
<h3>This is the content editable where I can change fonts and edit text</h3></div>
<div id="nitstexteditor" style="display: none;" data-nitstextpopup="0" data-nitseditor="1">
<div class="portlet box blue">
<div id="test" class="portlet-title">
<div class="caption">
<i class="fa fa-pencil-square-o"></i> Text Editor
</div>
<div class="tools">
<a onclick="closep()" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form name="texteditorform" role="form">
<div class="form-body">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-magic"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Select style">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-font"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Select font">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-font"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Select Size">
</div>
</div>
<div class="form-group">
<a class="btn btn-icon-only default" onclick="nitspopupeditor()" data-nitsedittag="bold">
<i class="fa fa-bold"></i>
</a>
<a class="btn btn-icon-only default" data-nitsedittag="italic">
<i class="fa fa-italic"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default" data-nitsedittag="underline">
<i class="fa fa-underline"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-align-justify"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-align-left"></i>
</a>
</div>
<div class="form-group">
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-align-right"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-undo"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-repeat"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-link"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-chain-broken"></i>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
[data-nitstextpopup] {
display: none;
background: #e2e2e2;
padding: 0px;
float: left;
font-size: 1.2em;
position: fixed;
width: 250px;
z-index: 99999;
}
这篇关于文本编辑器弹出时内容可编辑光标位置在可编辑 div 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
