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', {})
Related
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',"")
Following the example here, we've been trying for over a week to get Tabulator working with a Select2 header filter. There is a JS Fiddle here with all the pieces. It seems like the Tabulator filter (which are really just editors) onRendered() function is not even getting called because the console log we have inside it never gets logged.
The select element itself shows up in the header filter, but never gets the Select2 object applied (probably because the onRendered seems to not even be called). If we put the Select2 object outside the onRendered function, it get applied, but then the filter does not get applied after selection is made. There are no console or other errors and we've followed the Tabulator 'example' to the letter, so we are not sure what to try next.
Does anyone know how to get a basic Select2 header filter functioning with Tabulator?
var tableData = [{
id: "1",
topic: "1.1"
},
{
id: "2",
topic: "2.2"
},
];
var select2Editor = function(cell, onRendered, success, cancel, editorParams) {
var editor = document.createElement("select");
var selData = [{
id: '1.1',
text: "One"
}, {
id: "2.2",
text: "Two"
}, {
id: "3.3",
text: "Three"
}, ];
onRendered(function() {
// TODO: map tracks to id and text
console.log('rendered');
$(editor).select2({
data: selData,
minimumResultsForSearch: Infinity,
width: '100%',
minimumInputLength: 0,
//allowClear: true,
});
$(editor).on('change', function(e) {
success($(editor).val());
});
$(editor).on('blur', function(e) {
cancel();
});
});
return editor
};
var columns = [{
title: "ID",
field: "id"
}, {
title: "Topic",
field: "topic",
headerFilter: select2Editor,
}, ];
var table = new Tabulator("#table", {
placeholder: "No Data Found.",
layout: "fitData",
data: tableData,
columns: columns,
});
I'm new to both Tabulator and select2 and I think this is possibly a bad way to do it but it seems like it miiight work.
If you want to use select2 with text input elements, it looks like you need to use the full package.
https://jsfiddle.net/dku41pjy/
var tableData = [{
id: "1",
topic: "1.1"
},
{
id: "2",
topic: "2.2"
},
];
var columns = [{
title: "ID",
field: "id"
}, {
title: "Topic",
field: "topic",
headerFilter: 'select2Editor'
}, ];
var awaiting_render = [];
function do_render({ editor, cell, success, cancel, editorParams }) {
console.log('possibly dodgy onrender');
var selData = [{
id: '',
text: "-- All Topics --"
}, {
id: '1.1',
text: "One"
}, {
id: "2.2",
text: "Two"
}, {
id: "3.3",
text: "Three"
}, ];
$(editor).select2({
data: selData,
//allowClear: true,
});
$(editor).on('change', function(e) {
console.log('chaaaange')
success($(editor).val());
});
$(editor).on('blur', function(e) {
cancel();
});
}
function render_awaiting() {
var to_render = awaiting_render.shift();
do_render(to_render);
if(awaiting_render.length > 0)
render_awaiting();
}
Tabulator.prototype.extendModule("edit", "editors", {
select2Editor:function(cell, onRendered, success, cancel, editorParams) {
console.log(cell);
var editor = document.createElement("input");
editor.type = 'text';
awaiting_render.push({ editor, cell, success, cancel, editorParams });
return editor
},
});
var table = new Tabulator("#table", {
placeholder: "No Data Found.",
layout: "fitData",
data: tableData,
columns: columns,
tableBuilt:function(){
render_awaiting();
},
});
Edit: my suspicion is that onRendered only gets fired when these edit elements are used in cells to sope with the transition between showing just data and showing an editable field.
iam using fullcalendar-scheduler-5.3.0.
My events and resources comes from json url:
resources: {
url: "content/exe/json_load_bm_ressourcen_v2.php"
},
Resource Area definition:
resourceAreaColumns: [
{
headerContent: 'Betriebsmittel',
field: 'title',
width: 360
},
{
headerContent: '',
field: 'status',
width: 40,
cellDidMount: function(arg) {
var resource = arg.resource;
arg.el.addEventListener('click', function() {
res_id = resource.id.substring(0, 1);
var parentId = arg.resource._resource.parentId;
dep_id = parentId;
console.log(dep_id);
if(res_id != 'd'){
console.log('User RES ID ' + res_id);
console.log('User RESOURCE ID ' + resource.id);
//edit_wpl(resource.id);
}
});
}
}
],
Example:
[{
"id": "d1",
"sort_id":"1",
"title": "Leitern/ Gerüste",
"children": [
{
"id": "374",
"title": "Alu-Klappgerüst, Günzburger ",
"status": "<i class='fal fa-fw fa-times-circle text-danger'></i>",
"datum_anfang":"1602453600"
}
]}]
I want to show the icon from field "status" in the second row of my resources list.
But i only get the clear html in this field.
Any suggestions?
Suggest that using cellDidMount with jquery to change the cell content:
let init_parms = {
initialView: 'resourceTimelineMonth',
resourceAreaHeaderContent: 'Resource',
resources: resources,
events: events,
resourceAreaColumns: [
{
headerContent: 'My Column',
cellDidMount: function(arg) {
$(arg.el)
.children(".fc-datagrid-cell-frame")
.children(".fc-scrollgrid-sync-inner")
.children(".fc-datagrid-cell-main")
.html(`<input type="text" value="${arg.fieldValue}" />`)
}
}
]
}
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), init_parms)
calendar.render()
Reference
There is a data table with export to PDF or Excel and print buttons.But pagination doesn't appear. When I have looked examples most of them same as my project; when they put button, pagination doesn't appear. How can I solve the problem?
js code of Data table is below;
var oTable = $('#datatables').dataTable({
destroy: true,
"bSort": false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
footer: true ,
exportOptions: {
columns: [0, 1, 2, 3, 4,5,6,7]
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5]
},
customize: function (doc) {
//Remove the title created by datatTables
doc.content.splice(0, 1);
//Create a date string that we use in the footer. Format is dd-mm-yyyy
var now = new Date();
var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();
// doc.pageMargins = [20, 60, 20, 30];
// Set the font size fot the entire document
doc.defaultStyle.fontSize = 9;
// Set the fontsize for the table header
doc.styles.tableHeader.fontSize = 9;
// Create a header object with 3 columns
// Left side: Logo
// Middle: brandname
// Right side: A document title
doc['header'] = (function () {
return {
columns: [
{
alignment: 'left',
italics: true,
text: 'dataTables',
fontSize: 18,
margin: [10, 0]
},
{
alignment: 'right',
fontSize: 14,
text: $("#drpIller option:selected").text() + " " + $("#drpIlceler option:selected").text()
}
],
margin: 20
}
});
doc['footer'] = (function (page, pages) {
return {
columns: [
{
alignment: 'left',
text: ['Oluşturulma tarihi: ', { text: jsDate.toString() }]
},
{
alignment: 'right',
text: ['page ', { text: page.toString() }, ' / ', { text: pages.toString() }]
}
],
margin: 20
}
});
var objLayout = {};
objLayout['hLineWidth'] = function (i) { return .5; };
objLayout['vLineWidth'] = function (i) { return .5; };
objLayout['hLineColor'] = function (i) { return '#aaa'; };
objLayout['vLineColor'] = function (i) { return '#aaa'; };
objLayout['paddingLeft'] = function (i) { return 4; };
objLayout['paddingRight'] = function (i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
extend: 'print'
}
],
"responsive": true,
"data": data,
"columns": [
{ "data": "A", "autoWidth": true},
{ "data": "S", "autoWidth": true},
{ "data": "D", "autoWidth": true },
{ "data": "E", "autoWidth": true},
{ "data": "F", "autoWidth": true },
{ "data": "G", "autoWidth": true }
],
"bAutoWidth": false
}
});
thanks your valuable for helps.
I found answer at this link:
https://codepen.io/RedJokingInn/pen/XMVoXL
It is abouth dom options.
It is solved When I write
"dom": '<"dt-buttons"Bf><"clear">lirtp'
instead
dom: 'Bfrtip'
tutorial at the link also consists printing page numbers and printing same sentence top of every pages informations.
May be can help someone in the future.
when I try to set text which contains "\n". It displays error - Uncaught SyntaxError: Unexpected token ILLEGAL in browser console
In java script console I get my text as below.
<script type="text/javascript">
var toolbarOptions = [
[{ 'font': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
['bold', 'italic', 'underline', 'strike'], // toggled buttons
//['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
//[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
//[{ 'direction': 'rtl' }], // text direction
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
['clean'] // remove formatting button
];
var quill = new Quill('#standalone-container', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
var quill1 = new Quill('#standalone-container1', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
$(".tacti_note_txt").click(function(){
$("#order_video_01").get(0).pause();
})
$(".tech_note_txt").click(function(){
$("#order_video_02").get(0).pause();
})
$(document).ready(function(){
// my element which display errors
var technical_notes = '<%= raw #review.technical_notes %>';
quill.setText(technical_notes);
var tactical_notes = '<%= #review.tactical_notes.to_s %>';
quill1.setText(tactical_notes);
});
</script>
I want to display text as below in editor:
'Rails
and
quill
editor
;
This is just a guess but you may need to use escape character \ so try "\\n"
EDIT:
Use "<br/>" tag instead of "\n"
ActiveSupport::JSON.encode(my_string) - worked for me.
As it keep my string with \n and \t, So quill editor display it in proper format as:
'Rails
and
quill
editor
;