Question

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

要添加一些难度，内容应该是可滚动的，但按钮应该保持在同一个位置，文本应该避免它。当然，我无法添加一些游戏/填充，因为它会在内容可编辑区域的底部或右侧添加一些空白列/行。

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

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

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

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

正如你所看到的，这是一个很有意义的＆＃34;元件。因此用户可以在其中键入来文。但是文本不应该在圆形按钮下方传递，而且它应该是srcollable。

编辑＃2：编辑＃2：实际上，我对按钮几乎不错。＆＃34;：之前＆＃34;在contenteditale容器内的插入元素上的元素允许我放置我希望文本避免的区域。但问题是我无法改变任何参数：＆＃34;之前＆＃34;元素通过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，让我可以定位＆＃34;空白区域＆＃34;在可满足的元素内。

[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

所以我终于找到了一个方法来移动＆＃34;之前＆＃34; conustteditable元素内的peuso元素。以下是代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，我使用继承css技巧来传递before伪元素的动态高度。卷轴仍在工作，我现在看不到任何表现不足。希望有一天能帮助别人：）

感谢大家的帮助。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

使div按钮超过contenteditable元素

2 个答案: