如何在summernote中使用<pre>在代码块之后插入段落

Posted

技术标签:

【中文标题】如何在summernote中使用<pre>在代码块之后插入段落【英文标题】:how to insert paragraph after codeblock with <pre> in summernote 【发布时间】:2021-06-22 04:18:54 【问题描述】:

我要插入

在我使用带有 ext-highlight 的代码块后标记

下面是我的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- default css -->
    <link href="% static 'css/reset.css' %" rel="stylesheet">
    <link href="% static 'css/layout.css' %" rel="stylesheet">
    <!-- use Prism -->
    <link href="% static 'css/prism.css' %" rel="stylesheet">

    <!-- bootstrap cdn -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <!-- fontawsome -->
    <link href="% static 'fontawesome/css/all.css' %" rel="stylesheet" type="text/css">

    <!-- summernote -->
    <link href="% static 'summernote-0.8.18-dist/summernote-bs4.css' %" rel="stylesheet">
    <script src="% static 'summernote-0.8.18-dist/summernote-bs4.min.js' %"></script>
  </head>
  <body>
    <textarea id="id_content></textarea>
    <script>
    $(document).ready(function() 
      $('#id_content').summernote(
        toolbar: [
          ['style', ['style', 'add-text-tags']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['highlight', 'link', 'picture', 'video']],
        ],
        width: '100%',
        height: '380px',
        lang: 'ko-KR',
        prettifyHtml: false,
        placeholder: '질문을 입력하세요.',
        dialogsInBody: true,
        tabDisable: true,
      );
    );
    </script>
    <script src="% static 'js/summernote-ext-highlight.js' %"></script>
  </body>

现在插入代码块

&lt;p&gt;&lt;/p&gt; + &lt;pre&gt;&lt;/pre&gt;

但我想要

&lt;p&gt;&lt;/p&gt; + &lt;pre&gt;&lt;/pre&gt; + &lt;p&gt;&lt;/p&gt;

现在我的页面是这样的

但我想要这样

我怎样才能做出我想要的功能?

我不知道我是否正确地问了这个问题,因为我英语说得不好。

请理解。

【问题讨论】:

【参考方案1】:

我不明白这个问题,但我看到一个可能导致各种问题的错误:

<textarea id="id_content></textarea>

这缺少双引号。更正为:

<textarea id="id_content"></textarea>

【讨论】:

感谢您的回答.. 我解决了修复高亮代码。我投票给你的答案

以上是关于如何在summernote中使用<pre>在代码块之后插入段落的主要内容,如果未能解决你的问题,请参考以下文章

如何在summernote div中计算图像?

如何使用 jquery/javascript 在summernote 编辑器中为 textarea 限制第一个位置的空间

如何使用 Summernote 防止使用 PHP 进行危险的 HTML 输入?

如何获取 ngx-Summernote 运行时的价值

如何在laravel上显示summernote存储的数据?

Laravel Summernote 不想保存标签 <src>