在可编辑的 div 中“选择”图像答案

【问题标题】：'Selecting' an image inside an editable div在可编辑的 div 中“选择”图像
【发布时间】：2014-12-23 21:08:04
【问题描述】：

使用 contenteditable div 开发基本的文本编辑器。

使图像可选择然后可删除的任何解决方案。因此，用户可以点击它变为“突出显示”的图像，而不是在键盘上退格，然后按下删除，只删除该图像。

用于测试的 JSFiddle：http://jsfiddle.net/vbbay6jc/

备份代码：

<div contentEditable="true">
  <img class="temp-image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQLl0EqJ_0sAhvsYTsLJaazja4H3ol3dgBYd3OAfEqCWYR2EyRWH2CXxEM"/>
</div>

【问题讨论】：

一种可能的方法是在图像的单击/聚焦事件上在图像周围添加某种边框（可能只是给 div 一些样式）。还添加了一个按键功能来检测 event.which 值删除并从 div 的 dom 中删除 img 元素。

标签： jquery css contenteditable text-editor rich-text-editor

【解决方案1】：

我做了一个非常简单的例子，首先选择图像然后按del。希望能帮助到你。 http://jsfiddle.net/vbbay6jc/2/

var seleccionado;
$(".temp-image").on('click', function(){
    seleccionado = this;    
});

$('#newupdate-text-1').keyup(function(e){
    if(e.keyCode == 46){
        $(seleccionado).remove();
    }
})

您可以添加一个类来查看屏幕中选择的内容。

【讨论】：