我正在为客户开发一个 Angular 应用程序，我必须在右下角的 contenteditable 元素上方制作一个可点击的按钮，如下图所示:
要增加一些难度，内容应该是可滚动的，但按钮应该保持在同一个位置，文本应该避免它。 当然，我不能添加一些边距/填充，因为它会在内容可编辑区域的底部或右侧添加一些空白列/行。
我可以使用任何 js/css 技巧/库。
编辑#1: 好吧，我的问题不够准确。 这是一些代码:
<p id="editfield" contenteditable="true"></p>
http://jsfiddle.net/4yr7jsz1/24/
如您所见，这是一个“contenteditable”元素。所以用户可以在其中输入文字。但是文本不应该通过圆形按钮下方，并且它应该是可折叠的。
编辑#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;
}
我不确定是否有办法做到这一点，任何帮助都会很棒:)
提前致谢!
最佳答案
因此，我最终通过找到一种方法将“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 伪元素的动态高度。 卷轴仍在工作，我现在看不到任何性能不足。 希望有一天这可以帮助某人 :)
感谢大家的帮助。
关于javascript - 在 contenteditable 元素上制作 div 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39108416/