2
Ich versuche, ein jquery Inhalt editierbare Code zu bauen, wo ein Benutzer die editierbare div identifiziert, während die Maus schweben, einmal klickt es auf, dass der Inhalt div wird editierbar und Schaltflächen zum Auswählen der Bearbeitungsart. Jetzt, wenn ich auf den Knopf klicke, erscheint ein Texteditor und formatiert den Text, sobald ich auf die Schaltfläche klicke, erscheint der Cursor oder Zeiger aus dem bearbeitbaren div. Ich verwende jquery, um den Inhalt editierbar zu machenInhalt Editierbare Cursorposition in editierbare div zu sein, wenn Popup-Texteditor auftreten
Hier ist mein 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">
\t \t \t \t \t \t \t \t \t \t \t <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>Ich werde die Anmeldeinformationen setzen Text auf später zu formatieren. Danke im Voraus!