1) По поводу ресайза - у меня картинка вполне даже расайзится)
2) По поводу текста. В момент когда вы делаете картинку resizable она оборачивается в враппер (div), который хранит элемент картинки и "уголок" для ресайза. Когда мы начинаем что-то писать - это попадает именно во враппер.
3) И наконец главное - если в контейнер добавить абсолютно позиционированный элемент - писать в него уже не удастся.
<div contenteditable="true" style="border: 1px solid black; height: 300px;">
<div contenteditable="false" style="position: absolute; border: 1px solid black; width: 50px; height: 50px; top: 50px; left: 50px;">1<div>
</div>
https://jsfiddle.net/gccehnf6/
FF Баг: https://bugzilla.mozilla.org/show_bug.cgi?id=462758 (к сожалению пока не хочет открываться, не могу проверить, возможно это один из потомков этого бага)
Решение - не добавлять картинку в редактор а обрабатывать ее отдельно, можно положить редактируемую область и картинку в еще один DIV (position: relative), а скроллинг допускать во внешнем диве.
UPD: Добавил пример
.wrapper {
position: relative;
overflow-y: scroll;
border: 1px solid black;
}
.editor {
height: 300px;
}
.img {
position: absolute;
border: 1px solid black;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
//...
<div class="wrapper" contenteditable="false">
<div contenteditable="true" class="editor"> </div>
<div class="img">1</div>
</div>
https://jsfiddle.net/bxnmmh88/