向Jodit添加不可编辑/紧凑的区域

Question

我正在尝试使用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来保护某些零件，但是我可以轻松地拖动以选择并点击Delete / backspace键以删除零件。

Answer 1

通过查看Jodit源代码进行媒体插入，我能够偶然发现答案。显然，存在一个ERROR in ./src/app/pages/pages.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15) at Function.Module._load (internal/modules/cjs/loader.js:508:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.sassLoader (E:\QiwkCollaborator\QiwkCollaboratorTool\node_modules\sass-loader\lib\loader.js:46:72) ERROR in ./node_modules/ionicons/scss/ionicons.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./node_modules/ionicons/scss/ionicons.scss) 属性，可以将其添加到根元素以使其不可编辑。添加此属性定义contenteditable似乎将元素组合在一起，尽管这带来了另一个挑战，即删除似乎根本不起作用的元素。无论如何，我可以使用MutationObserver或通过添加上下文菜单并直接在源html上进行操作来做到这一点。