I want to be able to add custom font families to my Quill JS editor using the toolbar options via JavaScript, rather than defining them through HTML.
The code I have is below, which is the same code taken from the documentation:
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }], // Here, how do I specify custom font families??
[{ 'align': [] }],
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
Code running here: https://codepen.io/anon/pen/VgVZMg
Is there any way to do this? Also, I assume I need to include a link to Google fonts for each font I want to use, right?
Thanks
you can find your answer in this lisnk:
How to add font types on Quill js with toolbar options?
The process is like this you need 4 components:
A select tag with a ql-font class. This will contain the new font options.
Add the new fonts to the whitelist. This has to be defined before you call the the Quill constructor in Javascript.
Define the font-family for each label in the dropdown. Example: font-family: "Inconsolata"
Define the content font-families that will be used in the text area. Following the example in the 3rd component: .ql-font-inconsolata { font-family: "Inconsolata";}
for more information visit link please.
Related
I want to add some styles to more than one block type.
At the moment I'm doing this for every block type like this and change only the part 'core/paragraph' to 'core/heading' for example.
Is there any way to do this for more than one block at the same time?
wp.blocks.registerBlockStyle(
'core/paragraph',
[
{
name: 'default',
label: 'Default',
isDefault: true,
},
{
name: 'lead',
label: 'Lead',
},
{
name: 'subline',
label: 'Subline',
},
]
);
If you know names of the blocks you want to add your styles to, you can use registerBlockStyle() in a forEach() loop to mass register multiple styles to multiple blocks, eg:
const blocks = ["core/quote", "core/heading", "core/paragraph"]; //etc..
const styles = [
{
name: 'default',
label: 'Default',
isDefault: true,
},
{
name: 'lead',
label: 'Lead',
},
{
name: 'subline',
label: 'Subline',
}
];
// Loop through each block and register all custom styles in one go..
blocks.forEach(function(blocks) {
wp.blocks.registerBlockStyle(blocks, [...styles]);
});
To find the names of all currently registered blocks, use:
wp.blocks.getBlockTypes().map(block => block.name);
Even though you could apply your styles to every block, please use it sparingly only on required blocks - not every block all at once..
I'm trying to let my user can paste some html tag in their post by using ckeditor.
But I have blacklisted some of them like script for example for avoiding XSS attack.
Here is part of my config.js
'...'
config.allowedContent = {
$1: {
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedContent = 'script;';
'...'
config.toolbar_mini = [
{ name: 'paragraph', groups: ['blocks', 'align', 'bidi' ], items: ['Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
{ name: 'styles', items: [ 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'insert', items: [ 'Imgur', 'tliyoutube2', 'linkfile', 'Source'] },
];
When I click on Source for adding html tag and add
<script>alert('test')</script then I click on Source for adding non-html content and submit my post. CKEDITOR will remove the script tag correctly as I expected.
But if do the same:
Click on Source then add my script tag
<script>alert('test')</script> and submit the post without being out of Source mode. The script is saved in my DB and executed.
Also if I try to edit this message and go on Source mode CKEDITOR disable this script tag.
Obviously I have to create validator on my backend for avoiding this. But I don't think this the correct behavior of disallowedContent or if it is then I don't understand why.
Did I missconfigure my CKEDITOR or is it the correct behavior ?
It seems that Source mode doesn't implement filtering: https://github.com/ckeditor/ckeditor-dev/issues/2326
I would disable Source plugin or prevent the submission while in Source mode.
I implemented Quill text editor to my web app. I created a web app in asp.net core 2.1
Quill text editor resizing an image working fine in IE but not in Chrome or Edge.
Is this already known issue for other browsers? If so, only IE is suitable for resizing an image thru Quill editor?
If you tell me only IE can resize an image thru Quill, I have to use different text editor I guess.. hope not though.. If I have to use different one, can you recommend one that is open source?
Thank you in advance!
Here is how I have done in html:
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<div id="editor-container" style="height:600px"></div>
</div>
</div>
<script type="text/javascript">
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
[{ 'font': [] }],
[{ 'color': [] }, { 'background': [] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'align': [] }],
['image', 'link'],
]
},
theme: 'snow' // or 'bubble'
});
</script>
I'm using quill editor with vue and I had to install some modules for image resize:
1 Install modules
yarn add quill-image-resize-module --save
yarn add quill-image-drop-module --save
or using npm:
npm install quill-image-resize-module --save
npm install quill-image-drop-module --save
2 Import and register modules
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
3 Add editor options
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote'/*, 'code-block'*/],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [/*1,*/ 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
],
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
}
}
I hope will help you.
displaySize: true // default false
<script src="quill-image-resize-module-master/image-resize.min.js"></script>
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
imageResize: {
displaySize: true // default false
},
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['link', 'image'],
['clean']
]
}
});
A simple way to implement the image resize module cross-browser would be to download the ZIP from GitHub:
https://github.com/kensnyder/quill-image-resize-module
Extract the contents in your root folder, then call it from your HTML.
<!-- Quill HTML WYSIWYG Editor -->
<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Quill Image Resize Module -->
<script src="quill-image-resize-module-master/image-resize.min.js"></script>
Next add it to your Quill config:
var quillObj = new Quill('#editor-container', {
modules: {
imageResize: {},
toolbar: '#toolbar-container'
},
theme: 'snow'
});
Demo Here
I am using CKEditor 4.5.11 in my responsive design website. Everything seems to be working fine except 2 ckEditor issues which are listed as under:
How to make images inserted responsive in ckEditor? I used my CSS for them but it didn't work at all. Even it didn't apply to those.
How to convert ckEditor full toolbar into basic and simple toolbar for mobile (small screen) devices e.g. when width goes less than 600px?
I searched a lot on Google and Stack Overflow but no proper solution has been given there except a few Drupal based workaround which I have nothing to deal with and none of my business. I think this topic is not considered seriously on Internet so far.
Any ckEditor plugin, custom JS or CSS solution will be accepted if it does work. Note that I don't want to change (upgrade) my ckEditor because it is very well setup with ckFinder and when I upgraded in past then everything got broken. So please no suggestion on upgrade.
For responsive images, use this:
CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }');
If you want to modify the toolbar when browser resizes, you can't do that without destroying the instance and recreate it with another toolbar configuration (the contents will not get lost). For that, you can use window.matchMedia (supported in Firefox, Chrome and IE 10) like this:
var toolbar_basic = [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
]
var toolbar_full = [
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
]
var mqs = [
window.matchMedia('(max-width: 600px)')
]
mqs.forEach(function(mq) {
mq.addListener(widthChange);
});
widthChange(); // call it once initially
function widthChange() {
if (CKEDITOR.instances.editor1) {
CKEDITOR.instances.editor1.destroy();
}
if (mqs[0].matches) {
// window width is less than 600px
CKEDITOR.replace('editor1', { toolbar: toolbar_basic });
} else {
// window width is at least 600px
CKEDITOR.replace('editor1', { toolbar: toolbar_full });
}
}
when I try to set text which contains "\n". It displays error - Uncaught SyntaxError: Unexpected token ILLEGAL in browser console
In java script console I get my text as below.
<script type="text/javascript">
var toolbarOptions = [
[{ 'font': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
['bold', 'italic', 'underline', 'strike'], // toggled buttons
//['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
//[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
//[{ 'direction': 'rtl' }], // text direction
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
['clean'] // remove formatting button
];
var quill = new Quill('#standalone-container', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
var quill1 = new Quill('#standalone-container1', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
$(".tacti_note_txt").click(function(){
$("#order_video_01").get(0).pause();
})
$(".tech_note_txt").click(function(){
$("#order_video_02").get(0).pause();
})
$(document).ready(function(){
// my element which display errors
var technical_notes = '<%= raw #review.technical_notes %>';
quill.setText(technical_notes);
var tactical_notes = '<%= #review.tactical_notes.to_s %>';
quill1.setText(tactical_notes);
});
</script>
I want to display text as below in editor:
'Rails
and
quill
editor
;
This is just a guess but you may need to use escape character \ so try "\\n"
EDIT:
Use "<br/>" tag instead of "\n"
ActiveSupport::JSON.encode(my_string) - worked for me.
As it keep my string with \n and \t, So quill editor display it in proper format as:
'Rails
and
quill
editor
;