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
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});
});}
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/
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
)
)
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;
})
});
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();
});