I am using React Quill and want to remove colour from pasted text, so that quill should show text in black colour only. I have tried Clipboard module but not able to understand how to remove colour. Has anyone achieved this?
Thanks,
MSK
Quill has config option with a list of allowed formats.
Demo that whitelist only link and size:
https://codepen.io/anon/pen/xBWved
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
formats: ['link', 'size'],
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
List of all supported formats:
https://quilljs.com/docs/formats/
Yes, you can register the color module and whitelist:
const ColorAttributor = Quill.import("attributors/style/color");
ColorAttributor.whitelist = [];
Quill.register(ColorAttributor);
Related
On clicking save charts button of stock tool chart nothing happens. How does it work?
This is my chart config
this.trendChart.update({
series: {
showInNavigator: true,
dataGrouping: {
approximation: "average"
}
}
},
series: [{
id: 'series1',
}],
chart: {
spacingRight: 35
},
exporting: {
enabled: true,
buttons: {
contextButton: {
x: 0
}
}
},
stockTools: {
gui: {
enabled: true
}
},
});
Any config change I need to do?
The button save a chart in localStorage under highcharts-chart key. You can for example use it to keep some drawn annotations after refresing a browser.
The following items are stored:
annotations
indicators (with yAxes)
flags
You can get the options in the following way:
const savedOptions = localStorage.getItem(['highcharts-chart']);
Live demo: https://jsfiddle.net/BlackLabel/u6Lte04d/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.merge%3CT%3E
I am using RGraph in Angular7 and i want to apply space between bar and it's label
Looking at the style of the chart you might need to upgrade and then you could add the property yaxisLabelsOffsetx to your configuration. Here's an example:
new RGraph.HBar({
id:'cvs',
data: [8,4,6,3],
options: {
marginInner: 10,
variant: '3d',
xaxis: false,
yaxis: false,
labelsAbove: true,
labelsAboveOffsetx: 10,
yaxisLabels: ['Jimmy','James','Tabatha','Richard']
}
}).draw();
And a codepen of the example is here:
https://codepen.io/rgraph/pen/mdReQmm
I have implemented multi-series doughnut chart using chart.js in react application. I want to show label of each section inside chart as a text in both inner and outer chart. To implement this, I tried chart-js-plugin-labels. But it is working only for the outer chart labels. Does anyone have any solution for that?
Here is one demo application I found similar to my implementation, for the reference.
demo
A part of applying inside text labels for chart is mentioned below:
var refChart = document.getElementById("dchart");
var chartConfig = new Chart(refChart, {
type: 'doughnut',
data: {
datasets: [
{
data: [4, 3, 3, 2],
label: 'data1',
labels: ['A','C','B','C']
},
{
data: [5, 3, 2],
label: 'data2',
labels: ['X','Y','Z'],
}]
},
options:{
responsive: true,
maintainAspectRatio:false,
legend: {
display: true,
position: 'bottom',
}
plugins:{
labels:{
render:"label",
arc:true,
}
}
}
});
The datalabels plugin of chart.js has what you are looking for from what I understand of your explanation:
Example: https://chartjs-plugin-datalabels.netlify.app/samples/charts/doughnut.html
Github: https://github.com/chartjs/chartjs-plugin-datalabels
I'm currently designing a website with React where the user will work with a text editor. The text editor will already have text in it. The user will make some changes to the text and submit it. I would like to add a button that will show the user the differences between the original text and his new text, like Git but down to individual characters.
I'm currently trying to use Quill for that. I've found a lovely solution to my problem, but it's written in plain JavaScript. I've tried translating it to React by setting the Quill objects in the state:
const [quill_old, set_quill_old] = React.useState(new Quill('#old', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_new, set_quill_new] = React.useState(new Quill('#new', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_diff, set_quill_diff] = React.useState(new Quill('#diff', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
but when initializing the code it gets stuck on the "findDiff" function, on this line:
var oldContent = quill_old.getContents();
and returns an error:
TypeError: Cannot read property 'length' of undefined
Where "undefined" is "quill_old".
When trying to run the page without the function, the page shows properly, but I get multiple errors in the console like this:
quill Invalid Quill container #old
Does somebody know how to properly implement this solution in React? Or has a suggestion on some other library I can use?
Thank you for your time
I integrated React Froala Editor to my website.
It's a simple project and I want to show paragraph select drop down.
But it doesn't work.
Is it related to version?
this.state = {
model: ``,
tags: [],
config: {
theme: 'foobar',
heightMax: 800,
height: 800,
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'paragraphStyle', 'paragraphFormat', 'align', 'undo', 'redo', 'html']
}
}
<FroalaEditorComponent
model={this.state.model}
onModelChange={this.onChange}
config={this.state.config}
/>
It seems that plugins are missing. Try to import plugins in your component:
import 'froala-editor/js/plugins.pkgd.min.js';
The issue might be with the froala version you are using.
Please update Froala version using
npm update froala-editor
All the options are available in the trail version too.
The same options worked for me with v3.1.0, check it below.
Froala editor