将选择设置为summernote的内容

编程问答 2022-06-09

问题描述

我想创建一个按钮，用于选择在summernote编辑器框中输入的文本。结果就像用户在编辑器中按下ctrl + A一样。我设法创建了一个按钮，可以在summernote之外选择一个纯文本框。这是我的代码，显示了我对summernote选择和纯文本框选择（Hello World）的尝试：

$('#summernote').summernote({
  height: 140,disableDragAndDrop: true,followingToolbar: true,});

function selectText() {
  const input = document.getElementById('text-Box');
  input.focus();
  input.select();
};

function selectText2() {
  const input = document.getElementById('summernote');
  input.focus();
  input.select();
};
<html>

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport"
    content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Email Composer</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet" />
</head>

<body>
  <input type="text" id="text-Box" size="20" value="Hello World!">
  <button onclick="selectText()">Select Hello world</button><br>
  <button onclick="selectText2()">Select Summernote</button>

  <div class="summernote" id="summernote" style="width: 100%"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

</body>

</html>

解决方法

将此函数替换为 selectText2（）。希望对您有所帮助。

function selectText2() {
    var selectText = document.getElementsByClassName("note-editable");
    var range = document.createRange();
    range.selectNode(selectText[0]);
    window.getSelection().addRange(range);
};

预览： 

$('#summernote').summernote({
    height: 140,disableDragAndDrop: true,followingToolbar: true,});

function selectText() {
    const input = document.getElementById('text-box');
    input.focus();
    input.select();
};

function selectText2() {
    var selectText = document.getElementsByClassName("note-editable");
    var range = document.createRange();
    range.selectNode(selectText[0]);
    window.getSelection().addRange(range);
};
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Email Composer</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet" />
</head>

<body>
  <input type="text" id="text-box" size="20" value="Hello world!">
  <button onclick="selectText()">Select Hello world</button><br>
  <button onclick="selectText2()">Select Summernote</button>

  <div class="summernote" id="summernote" style="width: 100%"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

</body>
</html>

javascript