关于tinymce富文本编辑器定义上传视频无法删除的解决办法
筱贲_
2023年02月25日 14:51
收录于文集
共2篇

使用的版本为4.9.3,使用的是自己封装的一个按钮组件

上传视频按钮组件

插入视频代码如下

videoSuccessCBK(value) {

            window.tinymce

                .get(this.tinymceId)

                .insertContent(`<div><video style="display: inline-block&#​34; src="${this.qiniuUrl + value}&#​34; class="&#​34; width="400&#​34; height="400&#​34; controls="controls&#​34;></video><p></p></div>`); 

}

这样最后在编辑器的视频删除不了,而且也不能看到焦点,最终各种尝试这样才解决的,如下代码:

videoSuccessCBK(value) {

            window.tinymce.get(this.tinymceId).insertContent(

                `<p>

                  <span class="mce-preview-object mce-object-video" contenteditable=&#​34;false"

                   data-mce-object="video&#​34; data-mce-p-allowfullscreen="allowfullscreen&#​34;

                    data-mce-p-frameborder="no&#​34; data-mce-p-scrolling="no&#​34;

                     data-mce-p-src="${this.qiniuUrl + value}&#​34; >

                      <video src="${this.qiniuUrl + value}&#​34; width="400&#​34; height="400&#​34;

                       controls="controls&#​34;></video>

                  </span>

                </p>`

            );

        }