标签: summernote

我正在使用WYSIWYG Editor summernote.

我有一个textarea

<textarea name="data[Text][text]" rows="3" class="form-control" autofocus="autofocus" cols="30" id="TextText" required="required"></textarea>

和一个JavaScript:

$(document).ready(function() {
  $('#TextText').summernote({
    height: 250,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', ]],
      ['para', ['ul', 'ol', 'paragraph']],
    ]
  });
});

正如您所看到的,textarea具有所需的属性,但在将summernote应用于textarea之后,提交一个空表单会在chrome中抛出一条javascript消息:

名称='data [Text] [text]'的无效表单控件不可聚焦.

Firefox不会抛出任何错误,但也不表示输入是必需的.

如何强制summernote保持所需的属性？

我一直在到处搜索以找到一种方法来防止任何大于 500kb 的图像，但还没有找到单一的解决方案。我尝试限制图像文件大小的原因是针对使用有限数据计划的移动用户。

我最终相信这是不可能的，因为summernote将图像保存为文本这样的东西......

<img style="width: 640px;" src="data:image/jpeg;base64,/9j/4Qv6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdp...............>

并在需要时生成回图像。

即使我将它们作为文本存储在数据库中，我是否仍然需要限制文件大小？

如果我必须这样做，是否有一个 api？

我在一个页面中有2个summernote编辑器,这是一个概述和内容.在每个编辑器中,它都有可以获取所选文本的按钮.当我在相应的textarea编辑器中单击按钮时,如何获取所选文本？

我在 laravel 5.3 上实现了 Summernote ( https://github.com/summernote/summernote )

如果我输入数据然后保存，在表格上看起来像这样：

<p>1. chelsea</p><p>2. mu</p><p>3. city</p><p>4. liverpool</p><p>5. arsenal</p>

如何在没有标签 p 的情况下显示它？

所以当它显示时会看起来像这样：

1. chelsea
2. mu
3. city
4. liverpool
5. arsenal

我该怎么做？

我正在使用 summernote 添加图像、视频、文本。此外，我将图像或视频保存为 Html 代码，该代码类型为字符串到数据库。当我从数据库中检索视频或图像以显示在 summernote 上时，需要将近 5 分钟，我不知道为什么。但是，当我从数据库中检索文本以显示在 summernote 上时，没有问题。

这是模型

public class Article
{
   [AllowHtml]
   [Column(TypeName = "varchar(MAX)")]
   public string Content { get; set; }
}

这是 Summernote 编辑器的视图

@Html.TextAreaFor(x => Model.Content, new { @class = "", placeholder = @Blog.Helper.Resources.Content, @id = "summernote_1" })

另外，如果我在视图中使用下面的代码

<div id="summernote_1">@Html.Raw(Model.Content)</div>

显示视频或图像没问题，但我无法编辑summernote。当我编辑summernote 时，Model.Content 变空了。

如果我在视图中使用下面的代码

@Html.TextAreaFor(x => Model.Content, new { @class = "", placeholder = @Blog.Helper.Resources.Content, @id = "summernote_1" })

编辑summernote没问题，但显示视频或图像需要近5分钟。

由于这些原因，我尝试在 View 中使用下面的代码，但是下面的代码出现错误。

@Html.TextAreaFor(x => Html.Raw(Model.Content), new { @class = "", …

我正在构建一个使用 Summernote 编辑器 ( https://summernote.org/ )的应用程序。

它工作得很好，现在我想处理粘贴事件。想法是我想将内容粘贴为纯文本。此页面中的一些谷歌搜索结果： Paste content as plain text in summernote editor。

这导致了我的问题 - 我试图实现这一点但没有成功。

我的代码：

我已经在我的 Bootstrap / ASP.NET MVC 应用程序中实现了 Summernote，如下所示（我使用 Summernote 0.8.8）：

<div class="form-group mb-3">
        @Html.LabelFor(c => c.Content)
        <div class="card-body">
            <form class="form-horizontal form-bordered">
                <div class="form-group row">
                    <div class="col-sm-12">
                        <textarea name="Content" id="summernote" class="summernote" data-plugin-summernote data-plugin-options='{ "height": 180, "codemirror": { "theme": "ambiance" } }'>
                            @Html.Raw(Model.Content)
                        </textarea>
                    </div>
                </div>
            </form>
        </div>

我现在尝试添加以下代码：

  $('#summernote').summernote({
                onPaste: function (e) {
                    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                    e.preventDefault(); …

我在后端使用 Summer-note 编辑器并将该 HTML 内容存储在数据库中，并且我已经在<div></div>标签之间加载了该 HTML 内容。

当该页面加载到前端站点时，所有上传的 CSS 都适用于整个页面，例如

我已经在编辑器中编写了这段代码

h5 {
  text-align; right;
}

这将应用于<h5>该页面的另一个标签。

那么，对于我只想在特定 div 中应用该编辑器 css 的解决方案是什么？请指导我。

我只想在框架中显示该 HTML。