删除视频选项在summernote中不可用
在使用Summernote富文本编辑器时，如果你发现删除视频的选项不可用，可能需要进行一些自定义配置或扩展来实现这一功能。Summernote本身提供了基本的富文本编辑功能，但有时需要额外的插件或自定义代码来满足特定需求。
以下是一些步骤和示例代码，帮助你在Summernote中实现删除视频的功能：
1. 引入Summernote
首先，确保你已经引入了Summernote的CSS和JavaScript文件。你可以通过CDN来引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Summernote 删除视频示例</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.css" rel="stylesheet">
</head>
<body>
<div id="summernote"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>
</body>
</html>2. 初始化Summernote
在页面加载完成后，初始化Summernote编辑器：
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']],
['mybutton', ['removeVideo']]
],
buttons: {
removeVideo: function(context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="note-icon-trash"/> 删除视频',
tooltip: '删除视频',
click: function() {
var $editable = context.layoutInfo.editable;
var $video = $editable.find('video');
if ($video.length) {
$video.remove();
} else {
alert('没有视频可以删除');
}
}
});
return button.render();
}
}
});
});
</script>3. 自定义删除视频按钮
在上面的代码中，我们自定义了一个删除视频的按钮，并将其添加到Summernote的工具栏中。以下是关键部分的解释：
- toolbar: 我们在工具栏中添加了一个自定义按钮组
['mybutton', ['removeVideo']]。 - buttons: 我们定义了一个名为
removeVideo的自定义按钮。这个按钮使用了Summernote的UI组件，并绑定了一个点击事件。 - click: 在点击事件中，我们查找编辑器内容中的视频元素，并将其删除。如果没有找到视频元素，则显示一个提示。
4. 完整示例
以下是完整的HTML文件示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Summernote 删除视频示例</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.css" rel="stylesheet">
</head>
<body>
<div id="summernote"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']],
['mybutton', ['removeVideo']]
],
buttons: {
removeVideo: function(context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="note-icon-trash"/> 删除视频',
tooltip: '删除视频',
click: function() {
var $editable = context.layoutInfo.editable;
var $video = $editable.find('video');
if ($video.length) {
$video.remove();
} else {
alert('没有视频可以删除');
}
}
});
return button.render();
}
}
});
});
</script>
</body>
</html>通过以上步骤，你可以在Summernote中添加一个自定义的删除视频按钮，并实现删除视频的功能。你可以根据需要进一步自定义和扩展这个示例。
相关·内容
我使用一个夏季笔记，我有权添加视频网址添加视频网址视频显示在夏季笔记，但没有选项，如果用户不需要视频。
添加视频后，没有要删除的选项。
浏览 31提问于2017-02-04得票数 1
回答已采纳
我试图添加媒体(图片/视频)到Summernote富文本编辑器。在Summernote默认选项之外。我成功地添加了纯文本，但是当我添加Media时，它似乎删除了用Summernote编辑器和过写媒体编写的所有内容。$('#summernote').summernote('editor.restoreRange');
$('#summernote
浏览 4提问于2018-02-12得票数 0
回答已采纳
8回答
有没有办法完全禁止在Summernote中上传图片，但保留图片的url输入？我找到的最接近的是disableDragAndDrop: true选项，但这不会从图像弹出窗口中删除upload按钮
浏览 215提问于2015-11-10得票数 25
回答已采纳
我正在使用summernote，并试图在便笺中添加一个图像，然后应用到该图像的链接。正如您将在我的图像中看到的，所有工作良好，直到我删除“文本要显示”-我不能“插入链接”，一旦我删除了“文本显示”选项。我的代码：谢谢
更新：实际
浏览 1提问于2018-11-09得票数 0
我正在使用summernote添加图像，视频，文本。此外，我保存图像或视频作为Html代码，这是类型字符串到数据库。当我从数据库中检索视频或图像显示在summernote上时，我花了将近5分钟，我不知道为什么。但是，当我从数据库中检索文本以显示在summernote上时，没有任何问题。_1" })<div id="summern
浏览 2提问于2018-01-22得票数 0
我正在使用一个很好的Summernote编辑器来做一个小的webapp。我没有对图像使用默认的内联base64代码，而是将图像存储在一个文件夹中。 $(function() {
$('.
浏览 0提问于2015-06-02得票数 2
回答已采纳
1回答
无法粘贴summernote js中的视频
这是我的summernote配置 height: 250, 也在
浏览 0提问于2018-09-05得票数 0
回答已采纳
3回答
我一直在谷歌各地寻找一种方法，以防止任何大于500‘t的图片，但还没有找到一个解决方案。我试图限制图像文件大小的原因是针对使用有限数据计划的移动用户。我是否仍然需要限制文件大小，即使我将它们作为文本存储在DB中？
如果有必要的话，有api吗？
浏览 2提问于2014-12-19得票数 0
回答已采纳
1回答
因此，我有一系列的夏季笔记输入，我希望在默认情况下是斜体。我只想要斜体按钮选项，所以我已经删除了所有其他。生成以下内容的Html： <div class="summernote" id="RTE_@Model.ST_ID">我试过：
$('.summernote').summernote('italic'
浏览 2提问于2016-11-24得票数 0
我在Laravel应用程序中使用summernote。当我打开div时，summernote的内容文本在工具栏后面。当我滚动窗口或调整窗口大小时，内容文本显示正确。滚动前：滚动后：
浏览 3提问于2018-04-28得票数 3
我在把短信送回夏季笔记编辑器时遇到了麻烦。$("#EDITsummernote").innerHtml = 'test';
怎么做？
浏览 3提问于2014-02-27得票数 31
回答已采纳
我想使用带有<form>标签的Summernote。我尝试了这两个选项：和
<input id="summernote" name="summernote">在<form>标记中，但它对我不起作用。
浏览 2提问于2015-04-18得票数 1
我为summernote定制了knockoutjs绑定，如下所示： ko.bindingHandlers.summernote = { var $element = $(element);
浏览 16提问于2017-03-16得票数 2
2回答
我试图在JSF中使用summernote，但我不知道为什么总是返回空字符串： <labelrequiredMessage="O conteúdo é obrigatório"
浏览 4提问于2015-03-22得票数 1
回答已采纳
当我点击BoosTrap编辑器( v0.6.16 )的链接或图片功能时，Modal会出现在另一个Modal中，这很奇怪。我不知道我是否有一些CSS覆盖另一个CSS，或者它的SummerNote错误。Summernote url：谢谢。
浏览 7提问于2015-10-20得票数 0
回答已采纳
我希望在粗体和下划线按钮旁边添加一个“斜体”按钮，因为它是一个非常常见的编辑操作。我找不到如何去做的例子。
谢谢你的帮助！
浏览 2提问于2015-10-24得票数 2
回答已采纳
我有一个表单向导，在第一步中有一个summernote和一个由id "change_summernote“设置的next按钮，如果summernote包含了禁用的文本启用(即使在用户输入文本然后删除文本之后)，这是我的代码： if(e.keyCode ==46 || e.k
浏览 1提问于2018-10-02得票数 0
回答已采纳
Summernote网站上的例子是： toolbar: [ ['para', ['ul', 'ol', 'paragraph']],
['height', [&#x
浏览 2提问于2015-01-26得票数 0
回答已采纳
当用户将html内容粘贴到Summernote texteditor中时，是否可以删除所有样式属性？content </div> <p>Hello World </p>我想在Javascript/Jquery中实现一些东西$('tag').removeAttr("style");
Summ
浏览 6提问于2017-04-19得票数 7
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
