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

Posted 2023-03-22

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

【英文标题】：how to restrict space at first position in summernote editor for textarea using jquery/javascript

【发布时间】：2020-04-15 06:43:21

【问题描述】：

这里我使用的是summernote编辑器，因为我需要限制第一个位置的空间。

<link href="~/css/bootstrap.min.css" rel="stylesheet" />  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">

    <div class="QB-PanelName"><lable>Question</lable></div>
     <textarea name="QBQuestion" id="QBQuestion" rows="10" cols="80"></textarea>        
   </div>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>



$('#QBQuestion').summernote(
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['picture'],
                    ['table']
                ]
            );

此处的按键无法限制第一个位置的空间

$("#QBQuestion").keypress(function (evt) 
                var kc = evt.data.keyCode;
                var qbQuestion = $('#QBQuestion').summernote('code');
                if (kc === 32 && qbQuestion.length === 0) 
                        event.preventDefault();
                   
            );

【问题讨论】：

在控制台检查错误

我没有发现控制台错误

【参考方案1】：

您需要在脚本中对按键事件进行以下更改。

将选择器 "#QBQuestion" 更改为 "div.note-editing-area div.note-editable"。 将var kc = evt.data.keyCode; 更改为var kc = evt.keyCode;。 将您的条件更改为(kc === 32 && (qbQuestion.length == 0 || qbQuestion == '<p><br></p>'))。

所以你的整个代码应该如下所示：

$('#QBQuestion').summernote(
                    toolbar: [
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['strikethrough', 'superscript', 'subscript']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['picture'],
                        ['table']
                    ]
                );

$("div.note-editing-area div.note-editable").keypress(function (evt) 
       var kc = evt.keyCode;
       var qbQuestion = $('#QBQuestion').summernote('code');
       if (kc === 32 && (qbQuestion.length == 0 || qbQuestion == '<p><br></p>')) 
          event.preventDefault();
       
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <div class="QB-PanelName"><label>Question</label>
         <textarea name="QBQuestion" id="QBQuestion" rows="10" cols="80"></textarea>        
       </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>

所有更改的原因是：

当您使用 Summernote 编辑器时，它的作用是创建一个可编辑的 div 来处理前面的所有编辑器任务，因此您尝试附加按键事件的元素不再参与编辑。 要获取任意按键的keyCode，您可以直接使用eventObj.keyCode。 在可编辑的 div 中，编辑器添加了换行符，因此我添加了条件来检查空行。

希望它能帮助并解决您的问题。