在 contenteditable 元素上制作 div 按钮

Question

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

为了增加一些难度，内容应该是可滚动的，但按钮应该保持在同一个位置，文本应该避免它。当然，我不能添加一些marging/padding，因为它会在内容可编辑区域的底部或右侧添加一些空白column/line。

我可以使用任何 js/css tips/library.

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

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

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

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

编辑#2：实际上，我几乎可以使用按钮。 contenteditale 容器内插入元素上的“:before”元素允许我放置我希望文本避开的区域。但问题是我无法通过 javascript 更改“：之前”元素的任何参数... 这是 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，这样我就可以将 "blank zone" 放置在 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;
}

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

提前致谢！

Answer 1

这是解决方案，按钮保持固定，而内容滚动。 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>

Answer 2

所以我终于通过找到一种方法将 "before" peuso 元素移动到 contenteditable 元素内找到了我的答案。这是代码片段：

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 伪元素的动态高度。卷轴仍在工作，我现在看不到任何性能不足。希望有一天这可以帮助某人 :)

感谢大家的帮助。

在 contenteditable 元素上制作 div 按钮

Make div button over contenteditable element

html

javascript

css

contenteditable

angularjs