Make над contenteditable элементом

Я developping углового приложения для клиента, и я должен сделать интерактивную кнопку в правом нижнем угле над contenteditable элементом, как на следующий рисунок:Make над contenteditable элементом

Для добавьте некоторые трудности, контент должен быть прокручиваемым, но кнопка должна оставаться на одном месте, и текст должен избегать этого. Конечно, я не могу добавить некоторую маргинальную/добавку, потому что она добавит пустой столбец/строку внизу или справа от области редактирования контента.

Я могу использовать любые js/css tips/library.

EDIT # 1: Хорошо, я не был достаточно точным с моим вопросом. Вот код:

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

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

Как вы можете видеть, что это "contenteditable" элемент. Таким образом, пользователь может ввести в него текст. Но текст не должен проходить ниже круглой кнопки, и он должен быть сложен.

EDIT # 2: На самом деле, я почти хорош с кнопкой. Элемент «: before» на вставленном элементе внутри контейнера contenteditale позволяет мне помещать зону, в которой я хочу, чтобы текст избегал. Но проблема в том, что я не могу изменить любой aprameter аф а «: до того» элемента с помощью 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>

# интерактивными-зона расположена кнопка.

Через 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; 
}

Я не уверен, что есть способ сделать это, любая помощь будет здорово :)

Спасибо заранее!

источник

2016-08-23 Mayous

Это невозможно с чистым CSS, вы не можете иметь фиксированный элемент, который все еще будет частью текстового потока. Кроме того, когда кнопка должна быть доступна для контента, сценарий будет иметь ограниченный доступ к контенту. – Teemu

Проверьте это: http://stackoverflow.com/questions/19182577/how-to-wrap-text-around-floating-fixed-image –

_Вы можете исправить это, используя Javascript, перемещая изображение по мере прокрутки, но оно будет будет трудно получить право, и это серьезно замедлит прокрутку вашей страницы, так как текст должен быть повторно выровнен после каждого движения. Я думаю, вам лучше искать другое решение. –

Так что я, наконец, найти свой ответ, найдя способ, чтобы переместить «до» 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) { 
 
     \t var position = element[0].scrollHeight; 
 
\t \t if(element[0].scrollTop > 0) { 
 
     \t var position = element[0].scrollTop + initScrollHeight; 
 
     } 
 
     else if(element[0].scrollHeight > initScrollHeight) { 
 
     \t var position = initScrollHeight; 
 
     } 
 

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

 
     $(document).on("click","span#clickable-zone",function() { 
 
     \t 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 трюк, чтобы передать динамичную высоту перед тем псевдо-элемента. Свиток все еще работает, и я не вижу недостатка в производительности прямо сейчас. Надеюсь, что это может помочь кому-то в один прекрасный день :)

Спасибо, что вам нужна помощь.

источник

2016-08-23 20:46:12 Mayous

Я пытался выработать ответ в этих строках, но, похоже, вы сделали это передо мной. –

Очень хороший подход. –

Решение проблемы: Кнопка остается неизменной, а контент прокручивается. 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>

источник

2016-08-23 18:48:25 djsreeraj

Make над contenteditable элементом

ответ

Смежные вопросы