在 contenteditable 元素上制作 div 按钮答案

【问题标题】：Make div button over contenteditable element在 contenteditable 元素上制作 div 按钮
【发布时间】：2016-08-24 04:46:12
【问题描述】：

我正在为客户开发一个角度应用程序，我必须在右下角的 contenteditable 元素上创建一个可点击按钮，如下图所示：

为了增加一些难度，内容应该是可滚动的，但按钮应该保持在同一个地方，文本应该避开它。当然，我不能添加一些边距/填充，因为它会在内容可编辑区域的底部或右侧添加一些空白列/行。

我可以使用任何 js/css 提示/库。

编辑#1：好的，我的问题不够准确。这是一些代码：

<p id="editfield"  contenteditable="true"></p>

http://jsfiddle.net/4yr7jsz1/24/

如您所见，这是一个“contenteditable”元素。所以用户可以在其中输入文本。但是文本不应该通过圆形按钮下方，并且应该是 srcollable。

编辑#2：实际上，我几乎可以很好地使用按钮。 contenteditale 容器内插入元素上的 ":before" 元素允许我放置我希望文本避开的区域。但问题是我无法通过javascript更改“：before”元素的任何参数... 这是html：

<body ng-app="MyApp">
  <div id="editable-content" ng-controller="SimpleController">
    <span id="clickable-zone"></span>
    <p id="editfield" contenteditable="true"></p>
  </div>
</body>

#clickable-zone 是按钮。

通过 javascript，我插入一个空元素，使文本四处走动。

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      var imgPhoto = $('<div class="inside_element"></div>');
      var mydiv = $('<div class="myimage"></div>').append(imgPhoto);


      element.bind("blur keyup change", function(event) {
        if(element.html() != mydiv[0].outerHTML && element.html() != '') {
                    mydiv.prependTo(element);
        }
        else {
          mydiv.remove();
        }
      });

      $(document).on("click","span#clickable-zone",function() {
        console.log('click');
      });
    }
  };
});

然后，我为所有不同的内容添加 css，让我将“空白区域”定位在 contenteditable 元素内。

[contenteditable] {
  border: 2px dotted #ccc;
  background-color: #eee;
  padding: 2px;
  height: 200px;
  width: 500px;
  overflow-y: scroll;
}

.inside_element {
  float:right;
  clear:both;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: 50%;
}

.myimage:before {
  content: '';
  display: block;
  float:right;
  height: 100px;
}

#clickable-zone {
  position: absolute;
  bottom: 4px;
  right: 4px;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  float:right;
  background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
  background-repeat: no-repeat; /*Prevent showing multiple background images*/
  background-size: 100px 100px;
  z-index: 5;
  cursor: pointer;
}

#editable-content {
  height: 208px;
  width: 508px;
  position: relative;
}

我不确定是否有办法做到这一点，任何帮助都会很棒:)

提前致谢！

【问题讨论】：

这在纯 CSS 中是不可能的，你不能有一个固定的元素，它仍然是文本流的一部分。此外，当按钮应该在 contenteditable 中时，脚本对内容的访问权限将受到限制。
检查这个：stackoverflow.com/questions/19182577/…
您可以使用 Javascript 来修复它，方法是在滚动时移动图像，但很难做到正确，并且会严重减慢页面的滚动速度，因为文本会每次移动后重新对齐。我认为你最好寻找不同的解决方案。
您好，感谢您的帮助。是的，这正是我试图避免的，用 javascript 移动按钮。我的例子几乎是我所需要的 (jsfiddle.net/4yr7jsz1/23) ，但是我被图像容器上的 ":before" 元素阻止了，因为没有办法用 javacript 改变它的高度。

标签： javascript html css angularjs contenteditable

【解决方案1】：

所以我终于找到了答案，方法是找到一种将“之前”peuso 元素移动到 contenteditable 元素内的方法。这是代码 sn-p ：

var app = angular.module("MyApp", []);

app.controller('SimpleController', function($scope){

});

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      var imgPhoto = $('<div class="inside_element"></div>');
      var mydiv = $('<div class="myimage"></div>').append(imgPhoto);
      
      var initScrollHeight = element[0].scrollHeight;
      var initAvoidElementHeight = 100;
      
      element.bind("blur keyup change scroll", function(event) {
      	var position = element[0].scrollHeight;
		if(element[0].scrollTop > 0) {
        	var position = element[0].scrollTop + initScrollHeight;
        }
        else if(element[0].scrollHeight > initScrollHeight) {
        	var position = initScrollHeight;
        }

      	var diffScroll = parseInt(position - initScrollHeight);
        mydiv.css('height', initAvoidElementHeight + diffScroll);
				
        if(element.html() != mydiv[0].outerHTML && element.html() != '') {
		    mydiv.prependTo(element);
        }
        else {
            mydiv.remove();
        }
        
      });

      $(document).on("click","span#clickable-zone",function() {
      	console.log('click');
      });
    }
  };
});

[contenteditable] {
  border: 2px dotted #ccc;
  background-color: #eee;
  padding: 2px;
  height: 200px;
  width: 500px;
  overflow-y: scroll;
}

.inside_element {
  float:right;
  clear:both;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: 50%;
}

.myimage::before {
  content: '';
  display: block;
  float:right;
  height: inherit;
}
.myimage {
  height: 100px;
  max-height: 0;
}
#clickable-zone {
  position: absolute;
  bottom: 4px;
  right: 4px;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  float:right;
  background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
  background-repeat: no-repeat; /*Prevent showing multiple background images*/
  background-size: 100px 100px;
  z-index: 5;
  cursor: pointer;
}

#editable-content {
  height: 208px;
  width: 508px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp">
  <div id="editable-content" ng-controller="SimpleController">
    <span id="clickable-zone"></span>
    <p id="editfield"  contenteditable="true" ></p>
  </div>
</body>

如您所见，我使用了继承 css 技巧来传递 before 伪元素的动态高度。滚动仍在工作，我现在看不到任何性能不足。希望有一天这可以帮助某人:)

感谢大家的帮助。

【讨论】：

我试图在这几行中找到答案，但您似乎在我之前就已经做到了。

【解决方案2】：

这是解决方案，按钮保持不变，而内容滚动。 https://jsfiddle.net/8rofx1n9/2/

.btn{

  float:right;
  position:fixed;
  margin-left:300px;
}

<html>
Text Goes here
<span > <input class="btn" type="button" value="ClickMe"   >   

<br/><br/><br/><br/><br/><br/>
Contents.........


<br/><br/><br/><br/>
Contents.........


<br/><br/><br/><br/><br/>
Contents.........


<br/><br/><br/><br/>
Contents.........

<br/><br/><br/><br/>
Contents.........

</span>


</html>

【讨论】：