Disable Quill editor onclick - javascript

Codepen
I am trying to add a custom button on the toolbar so that once a user is done editing they can remove the text area.
var init = false;
var quill = null;
document.getElementById('editor-container').addEventListener('click', () => {
console.log(quill);
if(!init) {
quill = new Quill('#editor-container', {
modules: {
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
init = true;
};
var Parchment = Quill.import("parchment");
let CustomClass = new Parchment.Attributor.Class('custom', 'ql-custom', {
scope: Parchment.Scope.INLINE
});
Quill.register(CustomClass, true);
var customButton = document.querySelector('#custom-button');
customButton.addEventListener('click', function(event) {
event.stopPropagation();
quill = null;
console.log(quill);
});
})

Related

How to display multiple CodeMirror correctly?

This code re-adds information only to the first block:
window.onload = function() {
document.querySelectorAll(".codemirror-textarea").forEach(el => {
const [output] = document.querySelectorAll(".codemirror-textarea");
const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true});
});}
You are looping over the elements, but applies CodeMirror to the first element each time, use el in your loop.
window.onload = function(e) {
document.querySelectorAll(".codemirror-textarea").forEach(el => {
const editor = CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true});
});
}
Another way:
window.onload = function() {
Array.from(document.querySelectorAll(".codemirror-textarea")).forEach(el => {
CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true});
});}

Quill.js and custom prompt for video handler

I'm trying to make a custom prompt for Quill.js, but it does not work.
I need to get a value from a prompt and pass it to Quill handler.
Here is an example for test: https://jsfiddle.net/yk03dt7j/
function promptInput(callback, event) {
let prompt = document.getElementById('prompt');
if(prompt) {
let input = document.getElementById('input');
prompt.style.display = 'block';
document.getElementById("ok").onclick = function() {
prompt.style.display = 'none';
callback(input.value);
};
}
}
function videoHandler() {
promptInput(function(value) {
console.log(value);
});
let range = this.quill.getSelection();
this.quill.insertEmbed(range.index, 'video', value);
this.quill.setSelection(range.index + 1);
}
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: "#toolbar",
handlers: {
video: videoHandler
}
}
},
placeholder: 'Content',
theme: 'snow'
});
I've tried this way (does not work):
function videoHandler() {
promptInput(function(value) {
let range = this.quill.getSelection();
this.quill.insertEmbed(range.index, 'video', value);
this.quill.setSelection(range.index + 1);
});
}
I refactored your code a little:
var prompt = document.getElementById('prompt');
var input = document.getElementById('input');
var okButton = document.getElementById("ok");
okButton.onclick = () => {
prompt.style.display = 'none';
embedVideo();
};
const embedVideo = () => {
let range = this.quill.getSelection();
this.quill.insertEmbed(range.index, 'video', input.value);
this.quill.setSelection(range.index + 1);
}
function videoHandler() {
if (prompt) prompt.style.display = 'block';
}
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: "#toolbar",
handlers: {
video: videoHandler
}
}
},
placeholder: 'Content',
theme: 'snow'
});
Here is the working example: https://jsfiddle.net/zj70u2kr/15/

Adding buttons to the export menu in highcharts with R

How could new items be added to the export menu in highcharts, this is the code I have so far, it does not return an error that I can understand. I am trying very hard to learn highcharts.
jsCodeAddButtons <- JS("function() {
var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
buttons.push({
separator: true
});
buttons.push({
text: 'Ocultar Leyenda',
onclick: function() {
var chart = this;
chart.legend.update({enabled: false});
chart.redraw();
}
});
buttons.push({
text: 'Mostrar Leyenda',
onclick: function() {
var chart = this;
chart.legend.update({enabled: true});
chart.redraw();
}
});
return buttons;
}")
hc_exporting (
buttons = list(
contextButton = list(
menuItems = jsCodeAddButtons
)
)

Paste html content in Pell Editor and format with Striptags nodejs package

On our project we use pell WYSIWYG text editor, with following code:
import { moduleInit } from 'gs-components/export/js/_utils';
import pell from 'pell';
class Wysiwyg {
constructor (element) {
this._element = element;
this._store = this._element.querySelector('.input__input')
this._placeholder = this._element.querySelector('.input__label');
this._element.appendChild(this._placeholder);
this._editor = pell.init({
element: this._element.querySelector('.wysiwyg__editor'),
defaultParagraphSeparator: 'p',
onChange: html => this._store.value = html,
actions: [
{
name: 'heading2',
icon: '<b>Überschrift</b>',
title: 'Überschrift'
},
{
name: 'paragraph',
icon: 'Text',
title: 'Text'
},
'bold',
'italic',
'underline',
'olist',
'ulist'
],
classes: {
button: 'gs-btn gs-btn--xs gs-btn--bordered',
selected: 'gs-btn--dark'
}
});
this._editor.content.innerHTML = this._store.value;
const pellContent = this._element.querySelector('.pell-content');
pellContent.addEventListener('focus', (e) => {
this._store.dispatchEvent(this._buildEvent('focus'));
});
pellContent.addEventListener('blur', (e) => {
this._store.dispatchEvent(this._buildEvent('blur'));
});
this._store.dispatchEvent(this._buildEvent('blur'));
}
_buildEvent(type) {
const event = document.createEvent('HTMLEvents');
event.initEvent(type, true, true);
return event;
}
}
export const init = () => moduleInit('.input--wysiwyg', element => {
new Wysiwyg(element);
});
and we must implement paste event and striptags function:
Example
var striptags = require('striptags');
var html =
'<a href="https://example.com">' +
'lorem ipsum <strong>dolor</strong> <em>sit</em> amet' +
'</a>';
striptags(html);
striptags(html, '<strong>');
striptags(html, ['a']);
striptags(html, [], '\n');
But, how and where?
Here is answer:
pellContent.addEventListener('paste', (e) => {
setTimeout(() => {
this._editor.content.innerHTML = striptags(this._editor.content.innerHTML, ['h2', 'p', 'br', 'ul', 'ol', 'li']);
this._store.value = this._editor.content.innerHTML;
})
});

How to change default value with click function?

function navigation() {
var navigation = {
value:1
};
return navigation.value;
$( '#cookie_outside').click( function() {
var navigation = {
value:0
};
return navigation.value;
});
$( '#cookie_inside' ).click( function() {
var navigation = {
value:1
};
return navigation.value;
});
}
swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
parallax: false,
initialSlide: navigation(),
grabCursor: true,
resistanceRatio: .00000000000001
});
How can i change default value with click function. "initialSlide: navigation()".
My default value is 1, i want it change when i clicked #cookie_inside or #cookie_outside.
It can be possible instant change?
Your event binding is never triggered due to return statement and another reason is the binding of event must be done outside your function. On your ready function do call setup
function navigation() {
var navigation = {
value:1
};
return navigation.value;
}
function setup()
{
$( '#cookie_outside').click( function() {
var navigation = {
value:0
};
return navigation.value;
});
$( '#cookie_inside' ).click( function() {
var navigation = {
value:1
};
return navigation.value;
});
}
$(document).ready(function(){
//set it up
setup();
});

Categories

Resources