Как захватить содержимое, набранное в div редактора форматированного текста - Rich Editor Quill

Я пытаюсь получить содержимое, которое было напечатано в div редактора редактора quill http://quilljs.com/examples/ с использованием кодов jquery, но, похоже, это не работает. Он работает для других текстовых вводов, но не для div редактора. У меня есть бегущая иллюстрация ниже.

$(function(){
$(document).on("click", "#SubmitButton", function(e) {
e.preventDefault();

{				
		var question = $("#question").val();		
        var title = $("#title").val();
		
        alert (question);
  		alert (title);
			
		e.preventDefault();	
}
});	
});

advancedEditor = new Quill('#question', {
  modules: {
    'toolbar': 
	{  
		container: '#toolbar'
    },
    'link-tooltip': true,
    'image-tooltip': true,
    'multi-cursor': true
  },
  styles: false,
  theme: 'snow'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.quilljs.com/0.20.1/quill.js"></script>
<link href="http://cdn.quilljs.com/0.20.1/quill.snow.css" rel="stylesheet"/>

<form id="postform" name="postform" action="">  

Title
<input  type="text" name="title" id="title">
<br>
     
     
<div class="advanced-wrapper" id="qs" style="width:95%; padding:0px; margin:0px;">
        <div class="toolbar-container" id="toolbar"><span class="ql-format-group">
            <select title="Font" class="ql-font">
              <option value="sans-serif" selected>Sans Serif</option>
              <option value="Georgia, serif">Serif</option>
              <option value="Monaco, 'Courier New', monospace">Monospace</option>
            </select>
            <select title="Size" class="ql-size">
              <option value="10px">Small</option>
              <option value="13px" selected>Normal</option>
              <option value="18px">Large</option>
              <option value="32px">Huge</option>
            </select></span><span class="ql-format-group"><span title="Bold" class="ql-format-button ql-bold"></span><span class="ql-format-separator"></span><span title="Italic" class="ql-format-button ql-italic"></span><span class="ql-format-separator"></span><span title="Underline" class="ql-format-button ql-underline"></span></span><span class="ql-format-group">
            <select title="Text Color" class="ql-color">
    
              <option value="rgb(187, 187, 187)"></option>
              <option value="rgb(161, 0, 0)"></option>
              
            </select><span class="ql-format-separator"></span>
            <select title="Background Color" class="ql-background">
              <option value="rgb(0, 0, 0)"></option>
              <option value="rgb(230, 0, 0)"></option>
            </select><span class="ql-format-separator"></span>
            <select title="Text Alignment" class="ql-align">
              <option value="left" selected></option>
              <option value="center"></option>
              <option value="right"></option>
              <option value="justify"></option>
            </select></span><span class="ql-format-group"><span title="Link" class="ql-format-button ql-link"></span><span class="ql-format-separator"></span><span title="Image" class="ql-format-button ql-image"></span><span class="ql-format-separator"></span><span title="List" class="ql-format-button ql-list"></span></span></div>
          <div id="question" class="editor-container"></div>
      </div>

<input  type="submit" class="btn btn-info"    id="SubmitButton" value="Post Your Question" />
      </form>

Я хочу, чтобы когда я нажимаю кнопку отправки, он также фиксирует содержимое, введенное в div текстового редактора, и предупреждает типы значений.

Любая помощь будет оценена


javascript html jquery quil
person Omari Victor Omosa    schedule 17.07.2016    source источник

Ответы (4)


arrow_upward
1
arrow_downward

У Quill есть собственный API для поиска контента. Замена вашего метода щелчка следующим кодом должна позволить вам получить значение простого текста из вашего экземпляра Quill.

$(document).on("click", "#SubmitButton", function(e) {
  e.preventDefault();   
  var question = advancedEditor.getText();
  var title = $("#title").val();    
  console.log(title, question);
});

Вот ссылка на документацию Quill по методам поиска

person hootstheowl    schedule 17.07.2016
comment
@hootstheowl, что, если мне нужен текст в формате HTML, который я могу хранить и отображать на другой странице в простом div? - person SarangK; 24.07.2017

arrow_upward
1
arrow_downward

Сначала добавьте все библиотеки для quilljs и используйте метод getText для получения содержимого.

    <!-- Theme included stylesheets -->
    <link href="//cdn.quilljs.com/1.3.0/quill.snow.css" rel="stylesheet">
    <link href="//cdn.quilljs.com/1.3.0/quill.bubble.css" rel="stylesheet">

    <!-- Core build with no theme, formatting, non-essential modules -->
    <link href="//cdn.quilljs.com/1.3.0/quill.core.css" rel="stylesheet">
    <script src="//cdn.quilljs.com/1.3.0/quill.core.js"></script>
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.0/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.0/quill.js"></script>
    <script>
    document.getElementById("myBtn").addEventListener("click", function(){
        var text =quill.getText( 0, 50); 
    alert(text);
    });
    </script>
person SriBalaji P    schedule 24.07.2017

arrow_upward
1
arrow_downward

Я вижу, что вопрос ориентирован на jQuery, но концепция JavaScript довольно параллельна. Вот как я это сделал, для вас, ребята из Express. Похоже, в сочетании с экспресс-дезинфицирующим средством это сработало очень хорошо.

app.js

 import expressSanitizer from 'express-sanitizer'

 app.use(expressSanitizer())

 app.post('/route', async (req, res) => {
     const title = req.body.article.title
     const content = req.sanitize(req.body.article.content)
     // Do stuff with content
 })

new.ejs

 <head>
     <link href="https://cdn.quilljs.com/1.3.2/quill.snow.css" rel="stylesheet">
 </head>

 ...

 <form action="/route" method="POST">
     <input type="text" name="article[title]" placeholder="Enter Title">
     <div id="editor"></div>
     <input type="submit" onclick="return quillContents()" />
 </form>

 ...

 <script src="https://cdn.quilljs.com/1.3.2/quill.js"></script>
 <script>
     const quill = new Quill('#editor', {
         theme: 'snow'
     })

     const quillContents = () => {
         const form = document.forms[0]
         const editor = document.createElement('input')

         editor.type = 'hidden'
         editor.name = 'article[content]'
         editor.value = document.querySelector('.ql-editor').innerHTML
         form.appendChild(editor)

         return form.submit()
     }
</script>

express-sanitizer (https://www.npmjs.com/package/express-sanitizer)

document.forms (https://developer.mozilla.org/en-US/docs/Web/API/Document/forms)

В моем представлении есть только одна форма, поэтому я использовал document.forms[0], но если у вас есть несколько форм или вы можете расширить свое представление в будущем, чтобы иметь несколько форм, ознакомьтесь со ссылкой на MDN.

Что мы делаем здесь, так это создаем скрытый ввод формы, которому мы назначаем содержимое Quill Div, а затем мы бутлегируем отправку формы и передаем ее через нашу функцию, чтобы завершить ее.

Теперь, чтобы проверить это, сделайте пост с <script>alert()</script> в нем, и вам не придется беспокоиться об эксплойтах для инъекций.

Вот и все.

То, на чем вы хотите сосредоточиться, на мой взгляд, это document.querySelector('.ql-editor').innerHTML Вставьте это в свой console.log(), и вы увидите HTML.

person agm1984    schedule 04.09.2017

arrow_upward
1
arrow_downward

Мое решение для версии 1.2.2:

Первый импорт css и js в HEAD

<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>

В вашем теле HTML объявите div с идентификатором

<div id="content_email" name="content_email"></div>

В разделе скриптов объявите редактор

<script>
  var quill = new Quill('#content_email', {
    theme: 'snow'
  });
</script>

И, наконец, чтобы получить содержимое с HTML-тегами, поместите это в функцию onclick:

var content = document.querySelector('.ql-editor').innerHTML;
console.log("content: ", content);
person Joe Castillo    schedule 23.03.2021