文本编辑器弹出时内容可编辑光标位置在可编辑 div 中
Posted
技术标签:
【中文标题】文本编辑器弹出时内容可编辑光标位置在可编辑 div 中【英文标题】：Content Editable cursor position to be in editable div when popup of text editor occur 【发布时间】：2016-07-05 23:56:44 【问题描述】：我正在尝试构建一个 jquery 内容可编辑代码，其中用户在将鼠标悬停时识别可编辑 div，一旦单击该 div，内容就会变为可编辑，并且会弹出用于选择编辑类型的按钮。现在，当我单击按钮时，会弹出一个文本编辑器并设置文本格式，一旦单击按钮，光标或指针就会从可编辑的 div 中出来。我正在使用 jquery 使内容可编辑
这是我的代码。
$(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>稍后我会将凭据用于格式化文本。提前致谢！
【问题讨论】：
【参考方案1】：我在特殊情况下使用了停止传播，它起作用了！！！
刚刚使用了下面的代码：
stopPropagation();
完整代码如下：
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 中的主要内容，如果未能解决你的问题，请参考以下文章