如何阻止光标出现在contenteditable div内blockquote图片的前后

要解决光标出现在blockquote内图片前后的问题，核心是通过contenteditable属性精准控制可编辑范围，同时确保目标文本区域保持可编辑状态：

关键修改步骤 #

1. 调整HTML的可编辑属性 #

给包含图片的.blockquote容器设置contenteditable="false"，直接阻止光标进入该容器区域；同时给blockquote内的文本<p>标签单独设置contenteditable="true"，利用该属性的子元素覆盖特性，确保quote文本仍可正常编辑。

修改后的HTML代码：

<div id="editor_body" contenteditable="true">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at est euismod suscipit id quis purus.</p>

    <div class="blockquote" contenteditable="false">
        <span class="span_lat" style="display:inline-flex">
            <img class="blockquote_img" height="50px" width="50px" />
            <blockquote>
                <p contenteditable="true">Edit this content to add your own quote</p>
            </blockquote>
        </span>
    </div>

</div>

2. 优化CSS样式 #

调整.blockquote的显示属性，避免行内布局导致的光标异常，同时保留原有视觉效果：

.blockquote_img {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

.blockquote {
    display: block; /* 从inline改为block，消除行内布局引发的光标跳转问题 */
    margin: 10px 0;
}

blockquote {
    background: #eee;
    border-radius: 5px;
    margin: 0;
    min-height: 40px;
}

blockquote p {
    padding: 15px;
}

.blockquote_img:before,
.blockquote_img:after {
    display: none;
}

原理说明 #

• 父容器.blockquote设置contenteditable="false"后，整个容器（包括图片）会被编辑器标记为不可编辑区域，光标无法定位到图片前后的空白位置。
• 子元素<p contenteditable="true">覆盖了父容器的不可编辑设置，保证quote文本可以正常编辑。
• 将.blockquote改为display:block，让它作为独立块级元素存在，避免和其他可编辑文本行混排导致的光标异常跳转。

内容的提问来源于stack exchange，提问作者dark_pajuva