- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我这里有一个 jsFiddle -> http://jsfiddle.net/cm910t89/2/
我在Summernote WYSIWYG Editor中创建了一个自定义按钮我似乎无法让我的功能在插件内正常工作。
我希望用户能够突出显示(或使用光标选择)编辑器中的任何文本,然后单击我的自定义按钮,该按钮将使用特殊的 span
标记将所选文本包装在 span
标记中'snote' 类。
现在,我可以使用该类将所选内容包装在 span 标记中,但编辑器中的所有格式都会被删除。
任何人都可以帮忙,使选定的文本包含在 span 标记中并且格式保持不变吗?
jsFiddle -> http://jsfiddle.net/cm910t89/2/
$(document).ready(function() {
var editor = $('#summernote');
editor.summernote({
height: ($(window).height() - 250),
focus: false,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough']],
['fontsize', ['fontsize']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['view', ['fullscreen', 'codeview']],
],
oninit: function() {
// Add "open" - "save" buttons
var noteBtn = '<button id="makeSnote" type="button" class="btn btn-default btn-sm btn-small" title="Identify a music note" data-event="something" tabindex="-1"><i class="fa fa-music"></i></button>';
var fileGroup = '<div class="note-file btn-group">' + noteBtn + '</div>';
$(fileGroup).appendTo($('.note-toolbar'));
// Button tooltips
$('#makeSnote').tooltip({container: 'body', placement: 'bottom'});
// Button events
$('#makeSnote').click(function(event) {
var highlight = window.getSelection(),
spn = '<span class="snote" style="color:blue;">' + highlight + '</span>',
text = $('.note-editable').children('p').text(),
range = highlight.getRangeAt(0),
startText = text.substring(0, range.startOffset),
endText = text.substring(range.endOffset, text.length);
$('.note-editable').html(startText + spn + endText);
});
},
});
最佳答案
由于 $('.note-editable')
是一个文本区域,因此当您调用 .text()
时,它将仅获取该元素的文本,而丢失所有内容Summernote 插件添加的 html 可以很好地为您显示。
您不需要所有代码来替换突出显示的文本。事实上,您所需要的只是您创建的 range
对象!使用他,您可以调用 .deleteContents()
清除所选范围,然后调用 .insertNode(node)
插入动态创建的跨度,其中包含以下文本:
$('#makeSnote').click(function(event) {
var highlight = window.getSelection(),
spn = document.createElement('span'),
range = highlight.getRangeAt(0)
spn.innerHTML = highlight;
spn.className = 'snote';
spn.style.color = 'blue';
range.deleteContents();
range.insertNode(spn);
});
正在工作 fiddle .
关于jQuery Summernote 自定义按钮功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29632105/
fontfamily 选项在 summernote 中不起作用 我试过 $("#divCalltoactiontitle").summernote({ toolbar: [
我正在尝试在 Summer-note v0.8.1 中创建一个自定义按钮(带有下拉列表)。 我以前使用过一个运行良好的旧版本,但是在新版本中我不知道如何创建下拉列表按钮。 请帮助我向自定义按钮添加属性
我正在尝试在 vueJS 中使用 summernote。在 Laravel 框架下。在 blade.php 文档中,我设置了一个 id summernot_div: 然后,在相应的 vueJS 文档
我正在尝试使用 summernote我的应用程序中的编辑器。我在我想修复编辑器的地方使用了 height/minheight, maxheigh 并且不允许它调整大小。 这是我正在处理的代码: $('
我有这个旧代码 // myenter.js, enter key is binded to insertParagraph command. $.summernote.addPlugin({
我正在尝试限制夏日笔记中允许的字数。 例如,我只想限制最多 50 个字。 你有什么想法吗? $(document).ready(function() { $('#summernote').su
我正在将用户输入加载回 summernote 进行编辑,顶部和底部都添加了额外的行。有办法解决吗? $('#summernote').summernote('editor.pasteHTML', "h
我在 angular 中使用 summernote 我想创建一个自定义按钮。 我想将 customButton 中的 listHit 作为参数传递,如下所示 'testBtn': this.custo
我在 summernote 中有一个自定义按钮,当我点击例如文本“一”时,它有一个项目“一”、“二”、“三”的下拉列表,文本被添加在开头,这很好。但是当我之后点击“两个”时,文本也会添加到产生这个结果
我在 laravel 上使用 summernote 包,但问题是 Orderlist 和 unorder list 在那里不起作用。这是我正在尝试使用的代码。请帮我解决这个问题。 Html : Ve
我在 Laravel 应用程序中使用 summernote。 @csrf
我正在使用非常好的 Summernote Editor 来开发一个小网络应用程序。我没有对图像使用默认的内联 base64 代码,而是将图像存储在一个文件夹中。 我让那部分按预期工作。我可以单击“图像
我这里有一个 jsFiddle -> http://jsfiddle.net/cm910t89/2/ 我在Summernote WYSIWYG Editor中创建了一个自定义按钮我似乎无法让我的功能在
有人可以帮我设置 Summernote 的默认 textarea 名称值吗?编辑器在页面上看起来是正确的(我可以使用界面修改文本),但根据我的理解,POST 不起作用。 我尝试了各种 POST 变量,
我在将文本返回到 Summernote 编辑器时遇到问题。 我已经尝试过(但没有成功): $("#EDITsummernote").innerHtml = 'test'; 如何做到这一点? 最佳答案
我正在尝试编写一个脚本,当我单击按钮时,该脚本会自动显示 Summernote 链接对话框。 例如,我有以下按钮: Copy 所以在我的 js 中我有: $("#linklist").on("clic
有没有办法在summernote编辑器中同时启用默认工具栏和空气模式工具栏? 例如,我需要用户首先使用默认工具栏编辑文本区域,当他只想编辑一个单词时,他可以选择它,然后弹出空中模式工具栏。 (就像 M
我正在使用django-summernote作为所见即所得的编辑器。到目前为止,我可以从 Summernote 编辑器保存帖子,也可以使用 safe 过滤器显示它。但它的一些功能在我的模板中不存在。
我最近实现了django-summernote使用我的表单,这对于文本非常有效。然而,我很难确切地了解图像上传的工作原理。有人对它是如何完成的有一些意见吗? 问题 使用 Summernote 从文件中
我想向 Summernote WYSIWYG 编辑器添加自定义按钮。 此按钮将弹出一个小窗口,其中包含特殊字符,例如:alpha - beta - 度数等。 我到处找过,但没有找到任何有关此的信息。如
我是一名优秀的程序员,十分优秀!