Depends what you want to get, here's an example showing a few ways:
http://codepen.io/k3no/pen/amwpqk
var delta = editor.getContents();
var text = editor.getText();
var justHtml = editor.root.innerHTML;
preciousContent.innerHTML = JSON.stringify(delta);
justTextContent.innerHTML = text;
justHtmlContent.innerHTML = justHtml;
Answer from Keno on Stack OverflowVideos
How do I retrieve the contents of a Quill text editor
How do I post contents of a Quill editor in a form?
Which VUE Editor Library, Quill, TipTap or Lexical?
Handling tables in quill
ยป npm install ngx-quill
Depends what you want to get, here's an example showing a few ways:
http://codepen.io/k3no/pen/amwpqk
var delta = editor.getContents();
var text = editor.getText();
var justHtml = editor.root.innerHTML;
preciousContent.innerHTML = JSON.stringify(delta);
justTextContent.innerHTML = text;
justHtmlContent.innerHTML = justHtml;
Quite simply by accessing the editor's innerHTML:
var quill = new Quill('#editor', {
theme: 'snow'
});
// ....
var editor_content = quill.container.innerHTML // or quill.container.firstChild.innerHTML could also work
Hope this helps!
<form method="post" id="identifier">
<div id="quillArea"></div>
<textarea name="text" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Save" />
</form>
If you give the form an identifier, then using jQuery you can do the following:
var quill = new Quill ({...}) //definition of the quill
$("#identifier").on("submit",function() {
$("#hiddenArea").val($("#quillArea").html());
})
Instead of the HTML you could use quill.getContents() to get the delta.
You can check related discussion about it https://github.com/quilljs/quill/issues/87
While this is not an ideal solution :
var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML
ยป npm install react-quill
In this video (https://www.youtube.com/watch?v=VRKSA4ijo8U), I talk about our journey of choosing a JS library for our app.
The implementation was for Superthread which is an all-in-one project management software and wiki for small teams.
Since the editor is used throughout the app: e.g. pages, cards, comments etc.
it was very important for it to be crafted immaculately.
It was a choice between Quill, TipTap or Lexical.
I hope some of you find it useful.
Sorry but Quill v2.0.2 doesn't really support table rendering and inserting/editing. For basic usage, I recommend using the module: https://github.com/soccerloway/quill-better-table
npm install quill-better-table
import QuillBetterTable from 'quill-better-table'
Quill.register({
'modules/better-table': QuillBetterTable
}, true)
const quill = new Quill('#editor-wrapper', {
theme: 'snow',
modules: {
table: false, // disable table module
'better-table': {
operationMenu: {
items: {
unmergeCells: {
text: 'Another unmerge cells name'
}
}
}
},
keyboard: {
bindings: QuillBetterTable.keyboardBindings
}
})
...
document.body.querySelector('#insert-table')
.onclick = () => {
let tableModule = quill.getModule('better-table')
tableModule.insertTable(3, 3)
}
If you're feeling adventurous, you could also check this cool project, where they re-write Quill in order to handle table.
Cheers,
Maybe you can try quill table better. This supports toolbar configuration table insertion button(insert table show).
npm i quill-table-better
import QuillTableBetter from 'quill-table-better';
import 'quill-table-better/dist/quill-table-better.css'
Quill.register({
'modules/table-better': QuillTableBetter
}, true);
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['table-better']
];
const options = {
theme: 'snow',
modules: {
toolbar: toolbarOptions,
table: false,
'table-better': {
language: 'en_US',
menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete'],
toolbarTable: true
},
keyboard: {
bindings: QuillTableBetter.keyboardBindings
}
}
};
const quill = new Quill('#editor', options);