0

我正在尝试使用 Jodit 创建自定义音频组件。因此，我为组件设计了视图，但我不希望组件被位拆开。因此，如果必须删除组件，它应该删除根并且组件位不应该是可编辑的。

目前，您可以将视图分成不符合我的目的的部分。所以我的问题是：

  1. Jodit 有没有办法将代码块锁定或组合在一起，使其部分不可编辑？
  2. 如果这是不可能的，有没有办法检测是否有任何部分被移除？以及在这种情况下如何移除整个组件。

这些是默认设计：

这是在删除一些部分之后：

我使用的 HTML 代码类似于：

<div class="audio-container">
    <audio id="audio_player" style="position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0" controls="controls">
        <source id="audio_player_source" src="static/sound-file.mp3" type="audio/mpeg" />
    </audio>
    <div class="audio-pack" style="margin-left: auto; background: #DDD; border: 2px solid rgba(120, 255, 120, 255); width: 400px; height: 30px; padding: 5px 5px 5px 5px">
        <button id="play_btn" class="audio-controls audio-play" onclick="play('audio_player')"></button>
        <button id="pause_btn" class="audio-controls audio-pause" style="display: none" onclick="pause('audio_player')"></button>
        <button id="stop_btn" class="audio-controls audio-stop" onclick="stop('audio_player')"></button>
        <div style="margin: 0 5px">00:00</div>
        <div class="audio-timeline audio-track">
            <div class="audio-playhead"></div>
        </div>
        <div style="margin: 0 5px">00:00</div>
        <div style="margin: 0 5px">Vol:</div>
        <div class="audio-timeline volume-track">
            <div class="audio-playhead" style=""></div>
        </div>
    </div>
</div>

我曾尝试使用绝对位置的 div 来保护某些部分，但我可以轻松拖动以选择并点击删除/退格键来删除部分。

4

1 回答 1

0

通过查看媒体插入的 Jodit 源代码，我偶然发现了这个问题的答案。显然，contenteditable可以将一个属性添加到根元素以使其不可编辑。添加此属性定义contenteditable="false"似乎将元素组合在一起，尽管它带来了删除似乎根本不起作用的元素的另一个挑战。无论如何，我可以使用 MutationObserver 或通过添加上下文菜单并直接在源 html 上操作来做到这一点。

于 2019-05-10T18:58:44.330 回答