Develop Reference

Arabic sentence for words are reversed on datatables pdfhtml5 "pdfmake"

I have changed the default font to a font that supports arabic
The words supposed to be shown this way:
تقارير حركة الرسائل
But they are shown as
الرسائل حركة تقارير
function processDoc(doc) {
// https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
scheherazade: {
normal: 'Scheherazade-Regular.ttf',
bold: 'Scheherazade-Regular.ttf',
italics: 'Scheherazade-Regular.ttf',
bolditalics: 'Scheherazade-Regular.ttf'
}
};
// modify the PDF to use a different default font:
doc.defaultStyle.font = "scheherazade";
}
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('messaage_movements.index') }}",
"method": "GET",
data: function (d) {
d.search = $('input[type="search"]').val()
}
},
dom: 'Bfrtip',
buttons: [
// {
// extend: 'pdfHtml5',
// text: 'PDF',
// } ,
'copyHtml5',
'excelHtml5',
'csvHtml5',
'print',
{
extend: 'pdfHtml5',
// download: 'open',
title: '{{__('messages.messaage_movements')}}',
customize: function ( doc ) {
processDoc(doc);
doc.content.splice( 1, 0, {
margin: [ 0, 0, 0, 12 ],
alignment: 'right',
} );
},
}
],
columns: [
{data: 'id', name: 'id'},
{data: 'message', name: 'message'},
{data: 'user_id', name: 'user_id'},
{data: 'number_massages', name: 'number_massages'},
{data: 'status', name: 'status'},
{data: 'reason', name: 'reason'},
{data: 'date_sent', name: 'date_sent'},
{
data: 'action',
name: 'action',
orderable: true,
`enter code here` searchable: true
},
]
});
});
I have followed a code like that but turned it into arabic
I don't know where to put the direction="rtl" in the code cause It's not a visible html tag
enter link description here
-----edit
The changes I've made above solved the problem of the title and the rows but not the thead.
customize: function ( doc ) {
processDoc(doc);
doc.content[0]['text'] = doc.content[0]['text'].split(' ').reverse().join(' ');
},
}
],
columns: [
{data: 'id', name: 'id'},
{data: 'message', name: 'message',targets: '_all',render: function(data, type, row) {
if (type === 'myExport') {
return data.split(' ').reverse().join(' ');
}
console.log(data);
return data;
}},

This library doesn't support rtl very well.. but you could fix this issues in table body using "render" function in columns option to reverse the content..
the problem is with your table head, because you can't customize table header content..
but I figured out a trick to solve this issue..
the idea is to create two table headers.. one reversed and hidden from the html page.. while the other is not reversed and shown in html, the library will only detect the reversed one and display it in the pdf file
to apply this just add this code to your js file..
let thead = document.getElementsByTagName('thead')[0].children[0]
const reversedHead = thead.cloneNode(true)
thead.parentNode.appendChild(reversedHead)
let headCells = reversedHead.children
Object.keys(headCells).forEach(i=>{
headCells[i].textContent = headCells[i].textContent.split(' ').reverse().join(' ')
})
reversedHead.setAttribute('hidden',"")

Save JavaScript Variable to Django Database -

I'm a beginner and I've started making a website. I need to take the delta created from the quill text editor and save it in the database. The variable is in the script tag as HTML. I need that variable extracted to views.py and I think I will be able to do the rest... hopefully. Any tip I really need guidance on this. There might even be a better way that I am not seeing.
This is my javascript in my HTML file:
<script>
var toolbarOptions = [
[{ 'font': [] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic'],
[{ 'align': [] }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'color': [] }, { 'background': [] }],
[ 'image', 'link', 'video' ],
['blockquote'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
['clean'] // remove formatting button
]
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function logHtmlContent() {
console.log(quill.root.innerHTML);
}
quill.on('text-change', update);
var container = document.querySelector('#delta-container');
update();
function update(delta) {
var contents = quill.getContents();
console.log('contents', contents);
var html = "contents = " + JSON.stringify(contents, null, 2);
if (delta) {
console.log('change', delta)
html = "change = " + JSON.stringify(delta, null, 2) + "\n\n" + html;
}
container.innerHTML = HTML;
hljs.highlightBlock(container);
}
</script>
This is the views I'm trying to be able to access the variable in.
def template(request):
if request.method == "POST":
form = TextForm(request.POST or None)
form.save()
return render(request, 'template.html', {})
else:
return render(request, 'template.html', {})

Dangerous behavior disallowedcontent let me insert js in some case

I'm trying to let my user can paste some html tag in their post by using ckeditor.
But I have blacklisted some of them like script for example for avoiding XSS attack.
Here is part of my config.js
'...'
config.allowedContent = {
$1: {
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedContent = 'script;';
'...'
config.toolbar_mini = [
{ name: 'paragraph', groups: ['blocks', 'align', 'bidi' ], items: ['Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
{ name: 'styles', items: [ 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'insert', items: [ 'Imgur', 'tliyoutube2', 'linkfile', 'Source'] },
];
When I click on Source for adding html tag and add
<script>alert('test')</script then I click on Source for adding non-html content and submit my post. CKEDITOR will remove the script tag correctly as I expected.
But if do the same:
Click on Source then add my script tag
<script>alert('test')</script> and submit the post without being out of Source mode. The script is saved in my DB and executed.
Also if I try to edit this message and go on Source mode CKEDITOR disable this script tag.
Obviously I have to create validator on my backend for avoiding this. But I don't think this the correct behavior of disallowedContent or if it is then I don't understand why.
Did I missconfigure my CKEDITOR or is it the correct behavior ?

It seems that Source mode doesn't implement filtering: https://github.com/ckeditor/ckeditor-dev/issues/2326
I would disable Source plugin or prevent the submission while in Source mode.

How to add custom fonts to the QuillJS editor?

I want to be able to add custom font families to my Quill JS editor using the toolbar options via JavaScript, rather than defining them through HTML.
The code I have is below, which is the same code taken from the documentation:
var toolbarOptions = [
['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': [] }], // Here, how do I specify custom font families??
[{ 'align': [] }],
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
Code running here: https://codepen.io/anon/pen/VgVZMg
Is there any way to do this? Also, I assume I need to include a link to Google fonts for each font I want to use, right?
Thanks

you can find your answer in this lisnk:
How to add font types on Quill js with toolbar options?
The process is like this you need 4 components:
A select tag with a ql-font class. This will contain the new font options.
Add the new fonts to the whitelist. This has to be defined before you call the the Quill constructor in Javascript.
Define the font-family for each label in the dropdown. Example: font-family: "Inconsolata"
Define the content font-families that will be used in the text area. Following the example in the 3rd component: .ql-font-inconsolata { font-family: "Inconsolata";}
for more information visit link please.

Quill rich text editor resize image only works in IE but not in Chrome or Edge

I implemented Quill text editor to my web app. I created a web app in asp.net core 2.1
Quill text editor resizing an image working fine in IE but not in Chrome or Edge.
Is this already known issue for other browsers? If so, only IE is suitable for resizing an image thru Quill editor?
If you tell me only IE can resize an image thru Quill, I have to use different text editor I guess.. hope not though.. If I have to use different one, can you recommend one that is open source?
Thank you in advance!
Here is how I have done in html:
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<div id="editor-container" style="height:600px"></div>
</div>
</div>
<script type="text/javascript">
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
[{ 'font': [] }],
[{ 'color': [] }, { 'background': [] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'align': [] }],
['image', 'link'],
]
},
theme: 'snow' // or 'bubble'
});
</script>

I'm using quill editor with vue and I had to install some modules for image resize:
1 Install modules
yarn add quill-image-resize-module --save
yarn add quill-image-drop-module --save
or using npm:
npm install quill-image-resize-module --save
npm install quill-image-drop-module --save
2 Import and register modules
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
3 Add editor options
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote'/*, 'code-block'*/],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [/*1,*/ 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
],
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
}
}
I hope will help you.

displaySize: true // default false
<script src="quill-image-resize-module-master/image-resize.min.js"></script>
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
imageResize: {
displaySize: true // default false
},
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['link', 'image'],
['clean']
]
}
});

A simple way to implement the image resize module cross-browser would be to download the ZIP from GitHub:
https://github.com/kensnyder/quill-image-resize-module
Extract the contents in your root folder, then call it from your HTML.
<!-- Quill HTML WYSIWYG Editor -->
<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Quill Image Resize Module -->
<script src="quill-image-resize-module-master/image-resize.min.js"></script>
Next add it to your Quill config:
var quillObj = new Quill('#editor-container', {
modules: {
imageResize: {},
toolbar: '#toolbar-container'
},
theme: 'snow'
});
Demo Here