Today I discovered Quill while looking for a rich text editor, and have tried following the documentation to get it working. So far, most of it works just fine.
My only problem is, that when I click on the Link icon, the tooltip doesn't appear due to the following class being mysteriously added to the ql-tooltip <div> element: ql-out-bottom.
This class adds the following CSS rule at quill.snow.css:391:
.ql-snow .ql-out-bottom, .ql-snow .ql-out-top {
visibility: hidden;
}
This class does not get added in Quill's documentation demo which really perplexes me..
Here's my current setup which is entirely copypastarino'd from the documentation:
var snowQuill = new Quill('.quill', {
placeholder: 'Skriv noget hyggeligt her...',
modules: {
toolbar: [
[{ header: [] }],
['bold', 'italic', 'underline', 'link'],
[{ color: [] }, { background: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
['clean']
]
},
theme: 'snow'
});
I'm using Quill v1.0.0-beta.11 and grabbing the JS and CSS from cdn.quilljs.com. Hope this post follows all formalities, as I dont post on Stackoverflow often.
For those having problems in Angular:
QuillModule.forRoot({
modules: {
toolbar: [
[{ header: [false, 1, 2] }],
["bold", "italic", "underline"],
["blockquote"],
['link', 'image', 'video'],
['clean']
],
},
bounds: "document.body",
theme: "snow"
})
The link maybe hidden in Angular, and changing the bounds here does not work because of the way Angular is generated. However, this will fix it:
<quill-editor bounds="self">
https://github.com/KillerCodeMonkey/ng-quill/issues/145
The two classes .ql-out-bottom and .ql-out-top are added when the tooltip would appear beyond the vertical bounds of the editor.
Related
So after initializing the graph, I want to make it fit to its div by using cy.fit(). I have done this:
var cy = cytoscape({
container: document.getElementById("cy"),
elements: {
nodes: nodes,
edges: edges
},
layout: {
name: 'dagre',
},
style: [
{
selector: 'node',
css: {
'label': 'data(id)',
'background-color': '#808080'
}
]
});
So after this part if I do
cy.fit()
It does not work. But if I do this:
setTimeout(() => {
cy.fit();
},1000);
It works. However first the unfitted graph gets displayed and then after 1000 ms the proper graph fit gets displayed. Thus When a page is loaded, it looks like the graph is written twice.
How can I fix this? Is there a way to initialize the graph with this 'fit' option? Or any other way to fix it?
Thank you
Cytoscape.js deals with this via cy.ready(). Just use it like this:
var cy = cytoscape({
container: document.getElementById("cy"),
elements: {
nodes: nodes,
edges: edges
},
layout: {
name: 'dagre',
},
style: [{
selector: 'node',
css: {
'label': 'data(id)',
'background-color': '#808080'
}
}]
});
cy.ready(function() {
cy.fit();
});
Also, you can just use the layout option fit for this:
layout: { name: 'dagre', fit: true }
I'm working on a chart using echarts library with antd and react and I have to follow a specific tooltip design as below :
what I could do is :
tooltip implementation :
const chartOptions = {
tooltip: {
trigger: 'item',
responsive: true,
position: 'top',
formatter: '{c}',
backgroundColor: '#fafcfe',
borderColor: '#c8e2f7',
borderWidth: '0.8',
textStyle: {
color: '#5d6f80'
}
},
xAxis: {
data: xdata,
},
yAxis: {
type: 'value',
position: 'right',
},
series: [{
data: data1,
type: 'line',
name: 'data1',
},
{
data: data2,
type: 'line',
name: 'data2',
} ]
}
is there any way to add the down arrow and the link ( baby blue line between the tooltip and symbol)
css solution is acceptable but I'm beginner in css and frontend development in general
any suggestion would be helpful,
thank you
To add that vertical axis line, you can simply change to trigger: 'axis'. Beware that position: 'top' does not work with this option, so you would have to change it to something like this:
position: function (point) {
return [point[0], '20%'];
// if u wanna center it to the line, then u could do something like
// [point[0] - width_of_tooltip / 2, '20%']
}, ...
Regarding the down arrow, I see two options:
Change the formatter option to a function:
formatter: function (params) {
return `<div class="tooltip">${params[0]}</div>`;
}, ...
and then you can create the arrow with css, assigned to that tooltip class (see the example under Tooltip Arrows here: https://www.w3schools.com/css/css_tooltip.asp).
Other option, would be to manually add a background image of a tooltip arrow and assign it through the extraCssText option, like this:
tooltip: {
trigger: 'axis',
extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
...
}
there you can add more css options to make it look like you want (I just chose a random bubble text box).
I'd personally like the first option better. Good luck!
Please note this is a self-answered question.
The Quill Editor's toolbar module doesn't appear to offer a way to add custom tools to it using the JavaScript API. You can merely choose from a list of predefined tools or you have to completely rewrite the entire HTML of the toolbar which seems very hacky and often is not an option. Because of that mechanism, tools can't just be added or removed during runtime and are always static, meaning that (for example) you can't have a dynamic drop down list that loads or changes it's entries during runtime.
The Quill Editor itself only offers an API to add another module. So you could write another toolbar module that supports the above mentioned features the original one is lacking, but it would be much nicer to be able to continue using the original one because of the amount of work that would be required to effectively rewrite it.
The question is: How to add a potentially dynamic tool like a drop down menu to an existing Quill Editor instance's toolbar.
I wrote a library called DynamicQuillTools which can do the job.
It can be used like this:
const dropDownItems = {
'Mike Smith': 'mike.smith#gmail.com',
'Jonathan Dyke': 'jonathan.dyke#yahoo.com',
'Max Anderson': 'max.anderson#gmail.com'
}
const myDropDown = new QuillToolbarDropDown({
label: "Email Addresses",
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = function(label, value, quill) {
// Do whatever you want with the new dropdown selection here
// For example, insert the value of the dropdown selection:
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length)
quill.insertText(index, value)
quill.setSelection(index + value.length)
}
myDropDown.attach(quill)
Here is a full demo adding a custom drop down tool and a custom button to a Quill Editor instance:
// Create a Quill Editor instance with some built-in toolbar tools
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: {
container: [
['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': [] }],
[{ 'align': [] }],
['clean'],
]
}
}
})
// Add a custom DropDown Menu to the Quill Editor's toolbar:
const dropDownItems = {
'Mike Smith': 'mike.smith#gmail.com',
'Jonathan Dyke': 'jonathan.dyke#yahoo.com',
'Max Anderson': 'max.anderson#gmail.com'
}
const myDropDown = new QuillToolbarDropDown({
label: "Email Addresses",
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = function(label, value, quill) {
// Do whatever you want with the new dropdown selection here
// For example, insert the value of the dropdown selection:
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length)
quill.insertText(index, value)
quill.setSelection(index + value.length)
}
myDropDown.attach(quill)
// Add a custom Button to the Quill Editor's toolbar:
const myButton = new QuillToolbarButton({
icon: `<svg viewBox="0 0 18 18"> <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path></svg>`
})
myButton.onClick = function(quill) {
// Do whatever you want here. You could use this.getValue() or this.setValue() if you wanted.
// For example, get the selected text and convert it to uppercase:
const { index, length } = quill.selection.savedRange
const selectedText = quill.getText(index, length)
const newText = selectedText.toUpperCase()
quill.deleteText(index, length)
quill.insertText(index, newText)
quill.setSelection(index, newText.length)
}
myButton.attach(quill)
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.bubble.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.snow.css"></link>
<script src="https://cdn.jsdelivr.net/gh/T-vK/DynamicQuillTools#master/DynamicQuillTools.js"></script>
<div id="editor">The last two elements in the toolbar are our custom tools. The first one (<b>Email Addresses</b>) is a simple drop down menu that inserts the email address of the person selected and the second one (<b>U</b>) is a simple button that makes the selected text uppercase.</div>
I know this is old but I just came across this on accident (https://quilljs.com/docs/modules/toolbar/). The solution is to add the class "ql-size" to the select as shown in the container section.
I need to add a loading window dialog to my chart while it gets its data, similair to a bufferRenderer in a grid, it should be a simple loading window about the same size as a loading dialog in a grid. I am just looking for something simple.
i think you should use maskElement however I do not know for sure, I just need the chart element to be hidden or greyed out.
heres my code
{
xtype: 'panel',
title: 'Charts',
items: [
{
xtype: 'component'
},
{
xtype: 'polar',
height: 520,
id: '',
width: '',
title: 'Pie Chart',
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'GenderStore',
series: [
{
type: 'pie',
label: {
field: 'types',
display: 'rotate',
contrast: true,
font: '12px Arial',
color: '#fff'
},
xField: 'counter',
yField: 'types'
}
],
interactions: [
{
type: 'rotate'
}
]
}
]
}
To mask loading components i usually use mask.
to mask a component:
.mask( [msg], [msgCls] )
Masks this component with a semi-opaque layer and makes the contents unavailable to clicks.
Parameters
•msg : String (optional)
A message to show in the center of the mask layer.
•msgCls : String (optional)
A CSS class name to use on the message element in the center of the layer.
but, if you mask manually a component you also have to unmask it when it is loaded, mask the chart on before render and unmask it on store load. when all the datas have been receved
I have a very basic file I created in Edge Animate in which I just fadein and fadeout some text. It's located here:
http://www.threecell.com/demo/simpletext/simpletext.html
Edge Animate exports an HTML file and some JS Files. My question is whether it's possible to make it so that you can update the text in the future using the WordPress framework. I found that the actual text is declared in one of the JS files which I've posted below (the text in question is "THIS IS A TEST".) Ultimately, I'd like to create a WordPress widget that goes into this JS file and changes the text value.
Thanks in advance for any assistance or guidance,
/**
* Adobe Edge: symbol definitions
*/
(function($, Edge, compId){
//images folder
var im='images/';
var fonts = {};
var resources = [
];
var symbols = {
"stage": {
version: "2.0.1",
minimumCompatibleVersion: "2.0.0",
build: "2.0.1.268",
baseState: "Base State",
initialState: "Base State",
gpuAccelerate: false,
resizeInstances: false,
content: {
dom: [
{
id:'Text',
type:'text',
rect:['131','190','auto','auto','auto','auto'],
text:"THIS IS A TEST",
font:['Arial, Helvetica, sans-serif',24,"rgba(0,0,0,1)","normal","none",""]
}],
symbolInstances: [
]
},
states: {
"Base State": {
"${_Stage}": [
["color", "background-color", 'rgba(255,255,255,1)'],
["style", "overflow", 'hidden'],
["style", "height", '400px'],
["style", "width", '550px']
],
"${_Text}": [
["style", "top", '200px'],
["style", "opacity", '0'],
["style", "left", '197px']
]
}
},
timelines: {
"Default Timeline": {
fromState: "Base State",
toState: "",
duration: 1500,
autoPlay: true,
timeline: [
{ id: "eid7", tween: [ "style", "${_Text}", "opacity", '1', { fromValue: '0'}], position: 0, duration: 1500 },
{ id: "eid4", tween: [ "style", "${_Text}", "left", '297px', { fromValue: '197px'}], position: 0, duration: 1500 },
{ id: "eid5", tween: [ "style", "${_Text}", "top", '193px', { fromValue: '200px'}], position: 0, duration: 1500 } ]
}
}
}
};
Edge.registerCompositionDefn(compId, symbols, fonts, resources);
/**
* Adobe Edge DOM Ready Event Handler
*/
$(window).ready(function() {
Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-2538351");
You will have to create a plugin and use the Widgets_API.
In the frontend, the widget will use wp_enqueue_script to load simpletext_edgePreload.js. And then pass your text values as JavaScript data with wp_localize_script.
You'll finally be able to use something like this in your JS file: text:my_data.text.
A shortcode example: Wordpress Javascript File SRC File Path.
A widget example: Conditionally enqueue a widget's script/stylesheet in HEAD