Summernote编辑器，angular -带有工具提示背景的问题
Summernote编辑器是一个基于JavaScript的富文本编辑器，它提供了一种简单且易于使用的方式来在网页应用程序中创建和编辑富文本内容。它支持各种功能，包括文本样式设置（如字体、大小、颜色）、插入图片、插入链接、插入表格、插入视频等。
Summernote编辑器的优势包括：
- 简单易用：Summernote提供了直观的用户界面和简洁的操作方式，使得用户可以轻松地创建和编辑富文本内容。
- 可定制性强：Summernote允许开发人员根据自己的需求进行定制，可以通过配置参数来调整编辑器的功能和外观。
- 轻量级：Summernote的代码量相对较小，加载速度快，对网页性能的影响较小。
- 跨平台兼容：Summernote可以在各种主流浏览器和操作系统上运行，具有良好的跨平台兼容性。
Summernote编辑器适用于各种场景，包括但不限于：
- 博客和论坛：Summernote可以用于创建和编辑博客文章、论坛帖子等富文本内容。
- 内容管理系统：Summernote可以作为内容管理系统的富文本编辑器，用于编辑网页内容、新闻文章等。
- 电子商务平台：Summernote可以用于编辑商品描述、发布促销信息等富文本内容。
- 在线教育平台：Summernote可以用于创建和编辑在线课程的富文本内容，包括课程介绍、教学资料等。
腾讯云提供了一款名为"富文本编辑器"的产品，可以满足类似于Summernote编辑器的需求。该产品支持富文本内容的创建、编辑和展示，并提供了丰富的功能和定制选项。您可以通过访问腾讯云的富文本编辑器产品介绍页面了解更多信息。
相关·内容
我正在使用angular-summernote。如何禁用它？
<div summernote class="summernote" ng-model="postData.content" placeholder="Content"></div>
浏览 2提问于2015-09-29得票数 1
5回答
我想知道如何使用jQuery或JavaScript重置或清除引导Summernote WYSIWYG编辑器。
我试过以下代码
$('#MyForm').delay(1000).resetForm(1000);
除了带有Summernote的文本区域外，这会重新设置整个表单。
$('#SummernoteText').reset();
SummernoteText是html文本区域，但是代码根本不做任何事情。
$('#SummernoteText').destroy();
上面似乎对编辑器感到不快，而不是清除编辑器。
有人能指点我怎么做吗。
链接到
浏览 4提问于2015-04-02得票数 5
回答已采纳
2回答
我使用的是Summernote角指令。然而，由于某种原因，这是行不通的。
问题：
它无法识别概要记录函数..。
<summernote code="text"></summernote>
<script src="components/bower_components/summernote/dist/summernote.js"></script>
<script src="components/bower_components/angular-summernote/src/angular
浏览 6提问于2014-10-05得票数 3
回答已采纳
我正在使用angularJS的夏季笔记。我写了一个包装器来让它工作。在我的html中，我尝试使用带有bootstrap折叠的summernote。当我切换面板时，summernote编辑器出现在summernote工具栏的后面。当我稍微调整窗口的大小时，它就被修复了。不知道问题出在哪里。
这是js包装器。
@Component({
selector: 'summernote',
templateUrl: './summernote.html'})
export class SummernoteComponent implements AfterVie
浏览 3提问于2018-03-26得票数 1
我刚刚开始使用Visual 2015，我遇到了工具提示颜色的麻烦。新的工具提示有彩色字体-这是令人敬畏的-但是工具提示的背景色与我的字体颜色方案冲突，使它无法阅读。我已经仔细研究了字体和颜色的设置，我似乎找不到一种方法来改变这个特定的颜色。
是否有人知道是否可以在Visual 2015中更改工具提示背景色？
下面是我所说的()的一个例子：
编辑:这个问题有一个用户语音帖子，
浏览 0提问于2015-07-22得票数 21
回答已采纳
我对我的summernote组件中的工具提示有问题： ? 正如您在图片上看到的，工具提示背景只覆盖了整个工具提示的一部分。在夏季笔记中的所有工具提示中都会发生这种情况。你知道为什么会发生这种情况吗？
浏览 25提问于2020-09-29得票数 0
回答已采纳
我现在在Ionic 5+ Angular项目中使用ngx-Summernote。 有没有办法以ngModel的形式获取价值？我试过了 <div [ngxSummernote]="config" [ngxSummernoteView]="content"></div> 问题是，当我在构造处为内容设置"HELLO“时，它就起作用了。但是当我试图在运行时更新内容时，却没有更新summernote。 我试着去找一些例子，但是到目前为止还没有成功。希望能得到您的帮助。 谢谢。
浏览 14提问于2020-10-19得票数 0
5回答
多个夏季笔记div在一页
、、、、
我试图在一个页面上得到一个特定的夏季笔记div的代码，其中包含多个。
我的夏季笔记是从带有php的数据库中创建的，如下所示：
<div class="tab-content">
<?php $i=-1; foreach($contents as $content): ?>
<?php $i++; ?>
<div class="tab-pane" id="<?php echo $content->contentName; ?>">
&l
浏览 4提问于2014-03-24得票数 3
回答已采纳
我正在努力弄清楚如何在图像上传上使用angular-summernote回调。
我视图中的代码：
<summernote data-editable="editable" data-on-image-upload="imageUpload(files, editor)"></summernote>
和imageUplaod函数：
$scope.imageUpload = function(files, editor) {
console.log(files); // FileList
console.log(editor
浏览 1提问于2015-05-15得票数 10
我正在创建一个组件来在我的angular应用程序中使用summernote，但是我得到了"$(...).summernote is not a function“错误。正确加载页面后，summernote没有加载。但是我真的不知道该怎么解决这个问题。
组件中的代码：
import { Component,OnInit,ElementRef } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-root',
templateUrl: './app.c
浏览 6提问于2019-11-03得票数 1
2回答
我在和夏天的笔记作斗争。我使用Vue与laravel和Inspinia主题()相结合。
我已经加载了.css和.js文件。我的问题是，夏季笔记不会编辑它的内容。工具栏中的按钮无法工作。
这是我的vue组件：
<style>
</style>
<template>
<div>
<div class="ibox-content no-padding">
<div class="summernote" v-el:summernote>
浏览 2提问于2016-07-04得票数 2
回答已采纳
大家好，我在Grocery Crud的文本编辑器上遇到了一些问题。在我的默认文本编辑器中，我无法将图片上传到编辑器中，所以我想用bootstrap summernote来更改默认文本编辑器。但问题是我该怎么做呢？我已经下载了bootstrap summernote，但我现在不知道如何将bootstrap summernote添加到Grocery Crud库中，并使用bootstrap summernote更改默认编辑器。
浏览 3提问于2017-06-13得票数 1
3回答
我正在使用Visual Studio 2017的颜色主题编辑器扩展，在编辑器工具提示中更改特定部分的颜色时遇到问题。
在下面的示例中，我不知道如何自定义白色背景的bit --显示方法重载的工具提示中的方法签名。
我已经知道如何使用工具提示自定义几乎所有其他内容，除了突出显示的部分。例如，Environment -> Tooltip将设置整个工具提示的背景(奇怪的是，Environment -> Tooltip -> Background设置似乎没有任何作用...)。
有没有人知道如何控制示例中用白色突出显示的文本的颜色？
浏览 53提问于2017-09-06得票数 4
我正在尝试实现一个报表编辑器，其中在使用多个summernote WYSIWYG编辑器部分时只显示了一个工具栏。我已经想出了一个解决方案，第一部分是一个完整的编辑器，而另一个部分则处于空中模式。
下面是我使用的HTML代码：
<h1>Report Editor</h1>
<h2>Findings</h2>
<summernote id="findings" class="summernote focused" ng-model="summernoteText" config="opti
浏览 2提问于2015-09-15得票数 0
如何在Visual下更改由Intellisense显示的工具提示的颜色？
我已经定制了我的编辑器颜色，通过将VS主题保持为“蓝色”(我发现黑暗主题没有对比度)，可以在黑暗的背景上获得白色文本，但是现在Intellisense工具提示是不可读的。
浏览 5提问于2018-02-14得票数 6
回答已采纳
我试过很多所见即所得的编辑器，比如TinyMCE，Ckeditor和Summernote。
我喜欢Summernote的简单性和特性，但summernote似乎没有像TinyMCE或CKEditor那样的图像管理器插件。
我的webapp有一个可以由个人用户上传的照片池(媒体库)。我希望有一个功能，允许用户选择从池中的照片，并将其添加到文本区时，编辑一篇文章在Summernote (就像Wordpress做的那样)。
谁能给我一些提示，如果真的没有插件支持，如何手动完成这个功能？
浏览 1提问于2015-01-12得票数 11
我正在从事基于、Webpack等的项目，当我想使用时，我遇到了非常有趣的问题
它不起作用，并给出了一个错误"TypeError: element.summernote不是函数“。如果在没有任何构建工具的情况下添加库作为脚本标记，它就正常工作，但是对于Webpack，它却没有。
所以，让我们看看文件和信任
webpack.config.js
let webpack = require('webpack');
let path = require('path');
module.exports = {
entry: {
bundl
浏览 2提问于2017-01-25得票数 4
回答已采纳
我一直在胡思乱想要这么做。
我所拥有的
页面上有一个div，其中包含一个资源列表(带有一个特定的#id)
带有可编辑summernote实例的另一个div
我想要创造的
能够将资源从列表中拖到summernote编辑器中(也许可以使用jquery使其更漂亮?)
一旦将资源放入编辑器中，它就会自动以某种/自定义的方式进行样式(例如，使用按钮-info样式和资源的特定#id )。
一旦元素在编辑器中，我们就不能从该元素中编辑文本(因此我们不能更改资源的标题)，而是能够将整个元素拖到编辑器中的其他任何地方(就像处理图像一样)。
下面是基本操作，处理所需的所有基本代
浏览 3提问于2017-05-18得票数 0
回答已采纳
我已经创建了一个自定义的Summernote工具栏，但我在使用它启用调整条大小时遇到了问题。似乎只有一种方法可以工作。
下面是我的代码：
$(document).ready(function() {
$('#summernote').summernote({height: 300});
});
$('#summernote').summernote({
toolbar: [
['style', ['bold', 'italic', 'underline', '
浏览 6提问于2015-08-08得票数 2
我试图添加媒体(图片/视频)到Summernote富文本编辑器。在Summernote默认选项之外。
我成功地添加了纯文本，但是当我添加Media时，它似乎删除了用Summernote编辑器和过写媒体编写的所有内容。
码
$("#addImages").click(function () {
$('#summernote').summernote('editor.saveRange');
$('#summernote').summernote('editor.restoreR
浏览 4提问于2018-02-12得票数 0
回答已采纳
我刚刚升级到Visual 2015。我的工具提示过去是无聊(和可读性的)黑色文本的白色背景。现在，适用于代码窗口中的标记的颜色显然也适用于这里。我已经浏览了六次选择列表，不知道是哪一个控制了这个弹出窗口的背景，如下所示。我应该看哪些设置？我想，接下来的一个问题是“我把这个弹出式窗口叫做什么？”，我怀疑知道这个名字会回答我的问题。
浏览 3提问于2015-07-26得票数 0
回答已采纳
我对angular来说还是个新手。
我使用的是angular- google -map，但我不知道如何在将鼠标悬停在标记上时显示工具提示/信息窗口:基本上就是使用直接的google maps并设置标记对象的'title‘属性时得到的结果(就像在中一样)
我尝试过带有labelContnent属性的markers元素和带有marker-label元素的标记--两者都没有显示带有标记标题的工具提示。
angular-google-maps演示()也没有显示任何工具提示，所以我不认为我做错了什么。
问题是，如何让标题显示出来？
蒂娅！
浏览 1提问于2014-04-01得票数 4
我使用的是ng2-summernote ()。
安装后，我在app.module.ts中声明并添加Ng2Summernote
import { Ng2Summernote } from 'ng2-summernote/ng2-summernote';
@NgModule({
declarations: [
AppComponent,
Ng2Summernote
],
})
但是我运行了ng serve =>错误：“意外的值'Ng2Summernote‘由模块'AppModule’声明。请添加一个@管道/@指令/@组件注释”。
我使
浏览 2提问于2018-07-05得票数 0
我过来为summernote wysiwyg编辑器设置一个背景图像，让我知道是否有任何我需要设置的控件或任何wysiwyg编辑器支持这一点，谢谢。
浏览 4提问于2017-12-25得票数 1
1回答
我在我的web应用程序中添加了summernote编辑器。
我发现它仍然可以拖放图像到编辑区域。当然，我用下面的代码阻止了summernote输入。(下面的方法在summernote官方站点中提供)
summernote.summernote('disable');
summernote.summernote({
disableDragAndDrop : true
});
我还能尝试什么？
我已经初始化了我的暑期笔记就像..。
var s_note = $('#${id}_summernote');
var summernote = s
浏览 4提问于2016-02-12得票数 4
回答已采纳
我使用的是带有Bootswatch主题'Yeti‘的Summernote，它使用Open Sans作为字体。当编辑器初始化时，它将默认字体设置为'Open Sans‘，即使它不在我的字体列表中：
fontNames: ['Arial', 'Arial Black', 'Courier New', 'Helvetica', 'Helvetica Neue', 'Impact', 'Lucide Grande', 'Tahoma', 'Times
浏览 15提问于2017-03-15得票数 1
1回答
对于这个非常简单的问题，我很抱歉。
我可以用它来设置编辑器的初始高度：
$('#content').summernote({height: 300,});
我可以用它来填充编辑器：
$('#content').summernote('code',content);
我想同时使用它们，但是我不能让它工作。简单地一个接一个地使用是行不通的。我不知道如何在一行中同时使用它们。例如，这不起作用：
$('#content').summernote('code',content,{height:300});
请帮帮忙。谢谢。
浏览 17提问于2019-08-22得票数 1
回答已采纳
我已经在我的angular 2项目中添加了summernote插件，并且我使用的是ng2admin主题，而不是angular CLI。那么如何在我的项目中添加summernote编辑器呢？
我尝试在index.html文件中包含summernote css和js文件。
index.html文件
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.c
浏览 5提问于2019-03-25得票数 0
1回答
这是我的代码 <textarea id="summernote<?php echo $u->id ?>" name="isi" placeholder="Tulis di sini" style="width: 100%; height: 100px !important; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"> 我把我的javascript放在textarea下面。 <s
浏览 19提问于2020-06-28得票数 0
即时通讯使用summernote ()
有没有办法将与bootstrap一起工作的弹出窗口、工具提示等设置为容器内，而不是body内
我可以看到有人已经提到了这个问题，但没有解决方案。
非常感谢。
浏览 20提问于2017-07-19得票数 0
1回答
根据，您应该这样做：
<div ng-controller="OptCtrl">
<summernote config="options"></summernote>
</div>
var HelloButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-child"
浏览 0提问于2016-06-01得票数 0
回答已采纳
我已经尝试了关于Stack Overflow的现有答案，只需更改“.tooltip-inner”样式即可。但我仍然看到默认的黑色背景。
我尝试过的css：
.tooltip-inner {
background-color: pink !important;
}
带有工具提示的HTML：
<strong #customTooltip="bs-tooltip" tooltip="Click below on your options" placement="bottom">Some Text</strong>
<i
浏览 1提问于2018-06-19得票数 3
4回答
我使用summernote编辑器已经有一段时间了，它可以用于我所需要的大多数东西。但是，我最近希望在用户操作之后禁用(而不是销毁)它。经过努力，没有成功，我想到我可以用破坏()方法来实现我想要的。我注意到Summernote仍然将一个已经禁用的文本区域转换为它的编辑器，并且禁用了写入区域。以下是我最后所做的：
若要在创建summernote之后禁用它:我首先销毁它，然后禁用目标元素，最后重新初始化它：
$(".summernoteTarget").destroy();
$(".summernoteTarget").prop('disab
浏览 3提问于2015-03-12得票数 10
回答已采纳
我试图通过AJAX和ASP.NET MVC实现从summernote插件到服务器的图像上传。在检查了几个示例之后，我创建了以下JS代码: Init：
$('#contentEditor').summernote({
height: 520, // set editor height
minHeight: 520, // set minimum height of editor
maxHeight: 520, // set maximu
浏览 0提问于2017-07-17得票数 1
回答已采纳
VS 2015中的一个新功能是彩色编辑器工具提示(也称为“快速信息”)。我使用蓝色主题，工具提示中的标识符以白色显示在浅色背景上，这使得它们很难阅读。我找不到在“字体和颜色”设置中指定这些颜色的位置。请建议如何修改工具提示颜色设置。
浏览 1提问于2015-05-05得票数 2
我正在使用laravel背包作为crud，我正在用它创建一个laravel管理面板。我需要使用summernote wysiwyg字段，并且有一个带有laravel backpack的选项字段属性，我正在尝试输入夏季备注的minheight选项，但是它没有正确地将其添加到初始化中 $this->crud->addField([
'name' => 'desc',
'type' => 'summernote',
'label' =>
浏览 49提问于2019-03-24得票数 0
1回答
我在rails应用程序中使用summernote文本编辑器。当我在编辑器中键入纯文本时，除了在编辑器中键入的文本之外，还会得到html标记和其他字符。我想知道如何在输出中派生出纯文本。我尝试了这个我在网上找到的解决方案，但我得到一个错误，说'var是一个保留字‘。
var plainText = $($("#summernote").summernote("code")).text()
这是我的咖啡文件中的summernote代码
$ ->
$('[data-provider="summernote"]').each
浏览 9提问于2018-01-28得票数 0
回答已采纳
有人可以帮助我，我正在尝试使用livewire组件和夏季笔记，我的功能工作时，它是一个正常的输入字段，但一旦我改变类为夏季笔记，值不再更新，因为我键入。任何帮助都将不胜感激！更生动的形式： <div>
<p>{{ $note }}</p>
<textarea class="summernote" id="kt_summernote_1" name="note" wire:model="note"></textarea>
</div> php文
浏览 19提问于2020-10-29得票数 0
有人成功地使用了Meteor的Summernote编辑器吗？
请参阅
我在模板中包含了以下div：
<div id="summernote">Hello Summernote</div>
我实例化如下：
Template.sometemplate.rendered = function(){
$('#summernote').summernote({
height: 200, //set editable area's height
focus
浏览 2提问于2014-05-20得票数 5
回答已采纳
我想上传一个图像到服务器，并将其作为图像放在我的文本中。
编辑：
<summernote ng-model="answer.value" id="answerValue" config="options" on-image-upload="imageUpload(files)" editable="editable" editor="editor"></summernote>
“联合来文法典”：
$scope.options = {
height: 400
};
$sc
浏览 1提问于2015-12-17得票数 0
回答已采纳
我一直在做一个项目，使用Summernote。我的项目就像一个博客系统，我需要上传内容和图片。
我已经检查了这里和其他地方的其他帖子，并设法使用ajax将图像插入到要保存图像的文件中。但是，当我编辑时，有一个图像在那里，但是一旦我点击"update“按钮(表单中的提交按钮)，图像将不再存在。
我还检查了检查和资源说明
请求URL：
这是正确的路径，但是在更新之后，我会收到如下消息
请求URL：
另外，状态代码显示
状态代码: 403禁忌
这是我的密码
$('#summernote').summernote({
callbacks: {
onImageUp
浏览 3提问于2022-04-05得票数 0
如何使用Angular 5绑定来自summernote输入的数据？
component.html
<textarea class="form-control" ngModel
name="description"
id="summernote"
[(ngModel)]="learningunit.description"
maxlength="10000" rows="50"></textarea>
co
浏览 0提问于2018-05-27得票数 0
你好，我是angular的新手，我想在我的angular 10项目中使用angular-gantt ，有人能一步一步地给我解释一下吗？事件我尝试在angular.json文件中添加js和css。
"styles": [
"node_modules/angular2-multiselect-dropdown/themes/default.theme.css",
"node_modules/@coreui/icons/css/coreui-icons.css",
"node_modu
浏览 6提问于2021-03-26得票数 0
4回答
如何更改Ubuntu桌面"Xfce“上工具提示的背景色。我知道如何改变Gnome，但我无法找到如何在Xfce中这样做。
工具提示在Eclipse中的背景色是黑色的，字体的颜色也是黑色的。
浏览 0提问于2011-04-16得票数 10
我想在summernote中添加元素属性名称，单击以编辑
html：
<button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
<button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
浏览 5提问于2016-10-10得票数 1
回答已采纳
1回答
我正在构建一个能够显示具有丰富格式的文本的Rails应用程序-该应用程序将由非技术人员使用，因此使用markdown是不可能的。
因此，我决定使用Summernote作为WYSIWYG编辑器。
然而，初始化summernote时显示的默认突出显示颜色(背景色选项)是黄色的，这与我的应用程序的配色方案确实冲突。你知道我如何重置它，使默认颜色是我想要的任何颜色吗？
我想过编辑CSS类以获得正确的颜色，但是似乎Summernote通过内联样式标签来应用背景颜色--这对于可编辑性来说并不是最好的。
如果我不能更改默认颜色，那么有什么方法可以使用其他自定义JS强制更改颜色吗？
更新：
我深入研究了页面源
浏览 32提问于2018-01-31得票数 2
回答已采纳
我正在尝试使用summernote的网页应用程序，我一直在努力。我相信我已经包含了所有的库，并且遵循了它们在中包含的所有指令，但是页面没有返回。下面是我的代码(当我在自己的页面上运行时，它没有显示chrome developer工具中的错误)：
$(function() {
$('.editor').summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maxim
浏览 6提问于2017-11-21得票数 0
回答已采纳
2回答
你好，我在我的laravel项目中使用summernote，所有的工作都很好，除了在创建和编辑视图中，页面顶部有不必要的bar ()。我的代码如下：
设置：
<link rel="stylesheet" href="{{asset('assets/js/vendor/summernote/dist/summernote.css')}}">
<script src="{{asset('assets/js/vendor/summernote/dist/summernote.js')}}">&
浏览 31提问于2019-07-16得票数 0
回答已采纳
我是Angular2的新手，并试图在其中使用第三方库。尝试使用summernote Js插件，用于富文本区域。
这是我的my-summernote.component.ts文件。
import { ViewChild, ElementRef, AfterViewInit, Component} from '@angular/core';
import '../../assets/plugins/summernote/summernote.min.js';
declare var jQuery: any;
@Component({
selector:
浏览 3提问于2016-12-30得票数 0
1回答
我使用“铁:路由器”和“夏季笔记”，但它们似乎不能正常工作。从以下方面开始：
<div id="summernote"></div>
是由
Template.newPost.rendered = function(){
$('#summernote').summernote({height: 500});
}
路由器被定义
Router.route('/home', {name: 'home'});
Router.route('/new-post', {name: 'newPost&
浏览 5提问于2015-10-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
