1. 技术文章
  2. Content Editable cursor position to be in editable div when popup of text editor occur

Content Editable cursor position to be in editable div when popup of text editor occur

由 雨燕双飞 提交于 2019-12-29 09:14:06

问题


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!


回答1:


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;
}


来源：https://stackoverflow.com/questions/36097764/content-editable-cursor-position-to-be-in-editable-div-when-popup-of-text-editor

标签
jquery
html
jquery-ui
popup
contenteditable
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!