内容当文本编辑器弹出时，可编辑的光标位置在可编辑的div中

本文介绍了内容当文本编辑器弹出时，可编辑的光标位置在可编辑的div中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图构建一个jQuery内容可编辑代码，用户在悬停鼠标的同时识别可编辑div，一旦点击该div，内容就变得可编辑，并弹出按钮选择编辑类型。现在，当我点击按钮时，一个文本编辑器弹出并格式化文本，一旦我点击按钮，光标或指针就会从可编辑div中出来。我使用jquery使内容可编辑

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

这是我的代码。

$(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 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中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！