Get font family from Quill - html

I'm using Quill to build rich text editor.
It is working fine and I can change fonts for selected words as in this example.
The next step is to export raw HTML of the edited text. I was expecting standard font-family styles to be exported but I got Quill ones.
For example, using the above link, if I select the word "hello" and change font to Mirza:
Outputed raw HTML: <span class="ql-font-mirza">Hello </span>
Expected raw HTML: <span style="font-family: mirza;">Hello</span>

It's explained in the Quill guide.
Example:
var FontStyle = Quill.import('attributors/style/font');
Quill.register(FontStyle, true);
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
[{'font': []}],
['bold', 'italic', 'underline']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});

It's explained in the Quill guide.
Example:
//The font of the quill editor
var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //Add fonts to the whitelist
Quill.register(Font, true);
var toolbarOptions = [
[{
'header': [1, 2, 3, 4, 5, 6, false]
}],
['bold', 'italic', 'underline', 'strike'],
[{
'list': 'ordered'
}, {
'list': 'bullet'
}],
[{'font': fonts }],
['link', 'image', 'video']
];
var quill = new Quill('#quillEditor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow',
placeholder:'Enter The Song Here'
});

Related

Add an ODS export button to a HTML table

I have an html table, and use the jquery datatables plug-in to export the table in different formats (csv, xlsx, pdf).
I'd like to add a button to export the table in the opendocument spreadsheet format (ods).
Is there a simple way to do that ?
An extract of the js part of my code :
<script>
let tableType = "<?php echo $element; ?>";
$(document).ready( function () {
$('#montableau').DataTable({
"lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
"columnDefs": [ { "searchable": true, "targets": 0 } ],
"fixedHeader": true,
dom: 'Blfrtip',
buttons: [
'copy',
{ extend:'csv',
title: tableType,
filename: tableType },
{ extend:'excel',
title: tableType,
filename: tableType },
{ extend:'pdf',
title: tableType,
filename: tableType },
{ extend:'print',
title: tableType }
]
});
});
I didn't find a built-in ods export button in datatables, and wonder if creating one would be feasible.

Quill Editor in Angular (editor.root.innerHTML)

I have a problem using the Quill Editor. I want to show the inserted content of the Quill editor in another HTML Tag.
I tried to use the following code:
configureQuill() {
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'align': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['image', 'formula']
];
const options = {
modules: {
toolbar: toolbarOptions,
formula : true,
imageResize: {}
},
placeholder: 'Hier goes the content...',
theme: 'snow'
};
this.q = new Quill('#editor2', options);
this.q.on('editor-change', (eventName, ...args) => {
if (eventName === 'text-change') {
this.contentHtml = this.q.root.innerHTML;
}
});
}
And I am using the contentHTML variable to put the HTML content into a div Container:
<div [innerHTML]="contentHtml">
The content is shown but I think the css styles are not used for the content in the div container:
Everything works fine except the formula, the text-alignment and the text size.
I have solved the problem by adding the following css-class to my div-container: ql-editor.
Furthermore I changed the way of pasting the HTML content as follows:
this.q.on('editor-change', (eventName, ...args) => {
if (eventName === 'text-change') {
const justHtmlContent = document.getElementById('contentHtml');
this.contentHtml = this.q.root.innerHTML;
justHtmlContent.innerHTML = this.contentHtml;
}
});

Highcharts YAxis Title is smudged

I am trying to apply a title to YAxis of my chart, it looks smudged (overlaps on each other) on the screen, whereas my other titles looks just fine.
My code :
yAxis: [{
title: {
text : 'User Count',
margin : 60,
style : {
fontWeight : '100%',
fontFamily : 'verdana'
}
}
}],
series: [{
data: [1,2,3,4,5,6,3,8,1,10,4,11]
}]
});
});
Sample: I get this in IE9, but not in FF and chrome. Please suggest a solution. I have been stuck with this for months. Thanks in Advance.

Why isn't my custom tool bar appearing on my CKEditor

I have followed through a tutorial on the CKEditor website but I can't figure out why my custom tool bar is not appearing on the CKEditor. Originally I had all of the default toolbar on, but now it has reverted to just being a text area. Can someone help please? The code is as follows:
$(function () {
CKEDITOR.replace('txtBodyText',
config.toolbar=[
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
{ name: 'list', items: ['NumberedList', 'BulletedList'] },
{ name: 'Indent', items: ['Outdent', 'Indent'] },
{ name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'links', items: ['link', 'unlink;'] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule'] },
{ name: 'styles', items: [ 'Font', 'FontSize'] },
{ name: 'Clipboard', items: ['Cut', 'Copy', 'PasteText', 'PasteFromWord'},
{ name: 'undo', items: [ 'Undo', 'Redo'] },
{ name: 'tools', items: [ 'Maximise'] },
{ name: 'mode', items: [ 'Source'] }
]);
})
<td class="prompt">Body</td>
<td>
<%: Html.TextArea("txtBodyText", Model.EmailTemplate.BodyText)%>
</td>
That doesn't look like a valid second argument to the replace function. This might be of assistance:
var configObject = {};
configObject.toolbar = [
[ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
'/',
[ 'Bold', 'Italic' ]
];
CKEDITOR.replace('txtBodyText', configObject);
See the difference between the two? The 2nd argument to replace needs to be a valid JavaScript object. There was a typo in your example: see unlink;? That's not really correct :).
I had an extra pair of brackets at the bottom. If there is a problem in the Javascript it will not run the whole segment of code. So it's best to check!
CKEDITOR.replace() accepts the ID of the element to replace with the editor and the config. However, you do not need to write:
CKEDITOR.replace( 'txtBodyText',
config.toolbar=...
it's enough to just use toolbar, without the preceding config. And also, as pointed above, your JavaScript code is incorrect (notice your = instead of :):
CKEDITOR.replace( 'txtBodyText', {
toolbar: ...
} );
See how it is done in the samples from the CKEditor SDK, e.g. the Custom Toolbar sample. Scroll down to get the complete source code of the sample.
Don't forget to clear your browser cache after any editor configuration change!

Drawing charts on html5 canvas using jqplot

I am using jqplot charts for drawing different charts on html5 canvas. All charts are working well in all browsers but vertical bar(stacked and clustered) and line charts are getting overlapped in safari. Any reason why is this happening?
The following code lines i have used to draw clustered bar chart:
function DrawChart(chartId, chartType, categories, seriesWithData, grouping)
{
/*for(var i=0;i<seriesWithData.length;i++)
{
eachSeriesArr = seriesWithData[i].split(";");
seriesLabels[i] = eachSeriesArr.splice(0,1);
eachSeriesArr.splice(eachSeriesArr.length-1, 1);
for(var j=0; j<eachSeriesArr.length;j++)
{
eachSeriesArr[j] = Math.round(eachSeriesArr[j]).toString();
}
globalSeriesArr.push(eachSeriesArr);
} */
// Testing with hard coded value
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plotChart = $.jqplot(chartId, [s1,s2,s3], {
seriesDefaults:{
showLabel: true,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
//showDataLabels: true,
barDirection: 'vertical',
},
pointLabels: {show: true}
},
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
autoscale: true,
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: categories,
},
yaxis: { pad: 1.0 }
},
legend: {show: true, placement: 'outside', location: 'e' },
});
}
//This is the canvas div in html file
<div id="rId2" style="width:640px;height:426px;"></div>
<script type="text/javascript">
$(document).ready(function(){
alert('document loaded completely');
DrawChart('rId2', 'barChart;col', new Array(
"Category 1",
"Category 2",
"Category 3",
"Category 4"
), new Array(
"Series 1;4.3;2.5;3.5;4.5;",
"Series 2;2.4;4.4000000000000004;1.8;2.8;",
"Series 3;2;2;3;5;"
), 'clustered')
});
</script>
`
I am calling this function (defined in a javascript file) on document ready function from html file
Is anything missing?