How do I retrive Quill text editor text using Delta - javascript

I am using the quill text editor in a php based web-app and I need to retrieve the contents of the text editor as a string with the HTML included but the docs are a little sparse on this subject. Ultimately I want to write that data to a database.
This is how I tried to get the content
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an Des...',
theme: 'snow' // or 'bubble'
});
var delta = quill.getContents();
var text = editor.getText();

Try the following:
let html = quill.root.innerHTML;

Related

storing content from a Quill form in the database

I've been trying a couple of rich text editors, and Quill seems to be the best tool to implement into my projects. I'm using Node/Express and MongoDB/Mongoose. In my 'newPost route', I have a form that just takes a title and the main content. Since I'm just testing it out, the title field is outside of the Quill editor. Here the error I'm getting:
This is after I hit "submit". The console shows not only the title but also the main content that has a code-block with syntax highlight which is exactly what I wanted. But it's not being added to the database.
There's also this message Use of Mutation Events is deprecated. Use MutationObserver instead., and it seems I'm required to change Quill's source code myself to fix this.
Getting the main content of the post on the console kind of gave me a feeling that I'm halfway of getting this to work.
Is there a not-so-hard way to get this to work? Thanks!!
js
var quill;
var metaData = [];
hljs.configure({ // optionally configure hljs
languages: ['javascript', 'ruby', 'python']
});
hljs.initHighlighting();
$(document).ready(function() {
var toolbarOptions = [['blockquote', 'code-block'],
["bold", "italic", "underline", "strike"], // toggled buttons
//['blockquote'],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["clean"] // remove formatting button
];
quill = new Quill("#snow-container", {
placeholder: "Compose an epic...",
modules: {
syntax: true,
toolbar: toolbarOptions
},
theme: "snow"
});
var oldDelta = {"ops":[{"attributes":{"color":"#000000"},"insert":"This is sample text."}]};
quill.setContents(oldDelta);
});
var form = document.querySelector('form');
form.onsubmit = function() {
// Populate hidden form on submit
var formContent = document.querySelector('input[name=content]');
formContent.value = JSON.stringify(quill.getContents());
console.log("Submitted", $(form).serialize(), $(form).serializeArray());
// No back end to actually submit to!
//alert('Open the console to see the submit data!')
return false;
};

QuillJs - jumps to top

I'm using QuillJs as a text editor on my website. In a long post the screen view jumps to top when pasting text or changing heading type or alignment or color or inserting a link or video. Can't find out why.
QuillJs version: 1.2.6
Browser: Chrome 58.0.3029.110
OS: Windows 10
Initialization:
var toolbarOptions = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] },
'bold', 'italic', 'underline', 'strike', { 'align': [] },
{ 'list': 'ordered' }, { 'list': 'bullet' },
{ 'color': [] }, { 'background': [] }],
['image', 'blockquote', 'code-block', 'link', 'video'],
['clean']
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
This happens when any option is clicked from the quill toolbar. I had similar issue and I was using react-quill 0.4.1.
Try using event.preventDefault and event.stopPropagation on quill toolbar to fix this.
The following fixed the issue for me.
componentDidMount()
{
$('.quill-toolbar').on("mousedown", function(event){
event.preventDefault();
event.stopPropagation();
});
}
If you want an editor to be scrolled and maintained by a web page's main scrollbar, you need to set scrollingContainer property to 'body' during configuration of Quill object.
var quill = new Quill('#editor', {
modules: { toolbar: toolbarOptions },
theme: 'snow',
scrollingContainer: 'body'
});
Setting scrollingContainer to html was the only solution that worked for me:
var quill = new Quill('#editor', {
modules: { toolbar: toolbarOptions },
theme: 'snow',
scrollingContainer: 'html'
});
this is happening because of these two lines:
https://github.com/quilljs/quill/blob/5715499c57091db262c176985f6c5370d73db5dd/modules/toolbar.js#L86
and
https://github.com/quilljs/quill/blob/5b28603337f3a7a2b651f94cffc9754b61eaeec7/core/quill.js#L171
this.scrollingContainer => could be not an actual scrolling element.
The fix could be is to assign the nearest scrolling element directly.
If you are not sure what it is you can use this snippet to find it:
const regex = /(scroll)/;
const style = (node, prop) => window.getComputedStyle(node, null).getPropertyValue(prop);
const scroll = (node) => regex.test( style(node, "overflow") + style(node, "overflow-y") + style(node, "overflow-x"));
export const scrollparent = (node) => {
return !node || node===document.body ? document.body : scroll(node) ? node : scrollparent(node.parentNode);
};
editor.scrollingContainer = scrollparent(editor.container);

How to use switch between two store in one grid

I have a two data set in which one i am loading in store. My grid is completely fine. Now in some certain condition i want to load 2nd data to my store. I am using extjs 3
My code for grid is :
{
xtype: 'grid',
id: 'COGRID,
autoHeight: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
frame: true,
columns : this.columns,
store : store, // store is loading my data.
stripeRows: true,
}
My store and data :
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole ',2,'eSample'] ];
var myData2 = [
['USA','at','a'],
['France','bt',b'],
['Aus','ct','c'] ];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData); // Here I am loading first data to store
button handler config , you need to set your data according to your requirement.
e.g
{
xtype:button,
text:'Click Me',
handler:function(btn){
Ext.getCmp('COGRID').getStore().loadData(myData);
}

ckeditor do not work when i add extraPlugins

i have uploaded codesnippet plugin inside /ckeditor/plugins/ directory.
My config.js file codes are:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basic', items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'font', items: [ 'Font' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule' ] },
{ name: 'last', items: [ 'Maximize' ] }
];
config.extraPlugins = 'codesnippet';
config.format_tags = 'p;h1;h2;h3;pre';
config.entities = false;
config.removeDialogTabs = 'image:advanced;link:advanced;table:advanced';
config.disableNativeSpellChecker = false;
};
But when i add config.extraPlugins = 'codesnippet'; line then editor do not work even i can't see textarea field.
And when i remove config.extraPlugins = 'codesnippet'; line then editor works perfectly.
Use the online builder to add the codesnippet plugin to your editor. Most probably your editor is missing dependencies.
Most plugins in CKEditor require some additional plugins to operate. If you download manually plugin A, there is a chance that you need to download dependencies for plugin A... and plugin B, which is required by plugin A. And sometimes you will need to download dependencies for plugin C, which was required by plugin B. Sounds like a nightmare, this is why we created online builder and why package managers exist.

How do I pass in config info to CKEditor using the jQuery adapter?

I'm using the latest CKeditor with jQuery adapter.
I have successfully got it to work, and display.
However, as I am completely new to CKeditor, how do I pass in config variables using the jQuery method?
This is what I've got
$( '#input-content' ).ckeditor('', {
toolbar: 'basic'
});
I think from what I've read, the first argument is meant to be a callback, and the 2nd the config. But doing this has not changed the editor at all.
How do I use these config properties etc using the jQuery adapter?
I have accomplished this using this code. Hopefully this helps.
Here is the html:
<textarea id="txtMessage" class="editor"></textarea>
and here is the javascript:
try {
var config =
{
height: 180,
width: 515,
linkShowAdvancedTab: false,
scayt_autoStartup: true,
enterMode: Number(2),
toolbar_Full: [['Styles', 'Bold', 'Italic', 'Underline', 'SpellChecker', 'Scayt', '-', 'NumberedList', 'BulletedList'],
['Link', 'Unlink'], ['Undo', 'Redo', '-', 'SelectAll']]
};
$('textarea.editor').ckeditor(config); }
I passed an empty function...
$('textarea#my').ckeditor($.noop, {
property: 'value'
});
jQuery(function(){
var config = {
toolbar:
[
['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Undo', 'Redo', '-', 'SelectAll'],
['UIColor']
]
};
jQuery('#textAreaElement').ckeditor(config);
});
var config = {
toolbar:
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Maximize', 'ShowBlocks','-','About']
],
coreStyles_bold: { element : 'b', overrides : 'strong' }
};
Simply add the respective config object, above I added coreStyles_bold, All I did is change the "=" from the CK API documentation to a ":"
$(document).ready(function(){
$('.reply').click(
function(event){
// Event click Off Default
event.preventDefault();
// CKEditor
$(function(){
var config = {toolbar:[['Bold', 'Italic', '-', 'Link', 'Unlink']]};
//<?php /*echo"var config = {toolbar:[['Bold', 'Italic', '-', 'Link', 'Unlink']]};" ;*/ ?>
// DOM class = "cke"
$('textarea.cke').ckeditor(function(){}, config);
});
return false;
});
});
There is an official documentation for it, see jQuery Adapter
The ckeditor() method accepts two optional parameters:
A callback function to be executed when the editor is ready.
Configuration options specific to the created editor instance:
$( 'textarea' ).ckeditor({
uiColor: '#9AB8F3'
});
Not sure if this is a new feature of CKEDITOR, but just want to share my solution (in case it helps anyone looking for this now):
$("textarea.youreditor").ckeditor
(
{
customConfig: "/path/to/custom/config.js"
}
);
... and my config looks like this (simply copied the default config.js):
CKEDITOR.editorConfig = function(config)
{
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
];
};

Categories