I have the following code to export to pdf with datatables:
{
extend: 'pdf',
text: 'pdf',
title: 'Registo de Marcações',
footer: true,
exportOptions: {
stripHtml : false,
columns: function ( idx, data, node ) {
if (idx >= 4) {
return data;
}
}
},
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' );
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
}
}
I'll start by saying that stripHtml: false doesn't work, because when I generate the pdf it doesn't return the font-awesome icon. Returns as shown in the picture:
And it should return as it returns when I print:
Then in this part of the code $(win.document.body) generates this error:
Uncaught TypeError: Cannot read properties of undefined (reading
'body')
at Object.customize
How can I solve these problems? On the print button, the code works fine. The problems only appear in the generate pdf button
Related
I am having some issues with Laravel (5.5.46) + VueJS (2.6.10) + Flatpickr (2.4.1).
What I try to do is, when I change the Date field I want to update Start Time and End Time fields with new values.
Here is the error:
[Vue warn]: Error in callback for watcher "value": "TypeError: self.config is undefined" found in ---> <Datetime><BookingForm><Root> admin.js:41492:15
TypeError: "self.config is undefined"
setSelectedDate http://localhost/js/admin.js:103661
setDate http://localhost/js/admin.js:103687
value http://localhost/js/admin.js:101992
run http://localhost/js/admin.js:45419
flushSchedulerQueue http://localhost/js/admin.js:45163
nextTick http://localhost/js/admin.js:42847
flushCallbacks http://localhost/js/admin.js:42773
admin.js:42755:13
And here is the code that triggers the error (the block inside this.datePickerConfig.onChange event):
Vue.component("booking-form", {
mixins: [AppForm],
data: function () {
return {
form: {
datum: "",
starttijd: "",
eindtijd: "",
tp_start: "08:00",
tp_end: "18:00"
}
};
},
computed: {
datePickerConfigAltered: function () {
let tConfig = {
noCalendar: true,
enableTime: true,
time_24hr: true,
enableSeconds: false,
minuteIncrement: 0,
dateFormat: "H:i:S",
altFormat: "H:i",
defaultDate: "12:00",
defaultHour: "12",
defaultMinute: "00",
minDate: "08:00",
maxDate: "22:00",
};
var that = this;
this.datePickerConfig.onChange = function (selectedDates, dateStr, instance) {
// START - Code causing VueJS errors
let sd = flatpickr("#starttijd", tConfig);
sd.jumpToDate();
sd.setDate(that.form.tp_start, true, tConfig.dateFormat);
let ed = flatpickr("#eindtijd", tConfig);
ed.jumpToDate();
ed.setDate(that.form.tp_end, true, tConfig.dateFormat);
// END - Code causing VueJS errors**
};
return this.datePickerConfig;
}
}
});
Thank you! :)
I have simple form (5 textfields) and one of them I have to validate (check if it's value is unique in the list from store). So my code is the following:
{
xtype: 'textfield',
fieldLabel: 'Name',
itemId: 'BRW_NAME',
vtype: 'alphanum',
validator: function (tab) {
Ext.getStore('BrwStore').each(function(rec) {
if (rec.get('brw_nazwa') == tab) {
//debugger;
Ext.ComponentQuery.query('#BRW_NAME').markInvalid('DOUBLE NAME ERROR!');
return (false);
}
});
return (true);
}
but after I enter the same value (the same as in the store) this field stay valid. When I use "debugger" I see that this field is marked as invalid (red frame around field and procedure return false) but I can see it only in this moment. When I loose debugger control the field become normal (I mean without red frame).
Why?
What's wrong?
Don't know why but when this validation error is set outsite "each" loop, like this:
{
xtype: 'textfield',
fieldLabel: 'Name',
itemId: 'BRW_NAME',
vtype: 'alphanum',
validator: function (tab) {
var err = false;
Ext.getStore('BrwStore').each(function(rec) {
if (rec.get('brw_nazwa') == tab) err = true;
});
if (err) {
Ext.ComponentQuery.query('#BRW_NAME').markInvalid();
return 'DOUBLE NAME ERROR!';
}
return (true);
}
everything is ok.
I have a CKEditor dialog plugin as follow
CKEDITOR.dialog.add('myDialog', function( editor ) {
editor.on( 'dialogShow', function( dialogShowEvent )
{
...
dialog.setValueOf('tab-xxx', 'seperator', ", ");
});
return {
title: 'xxx',
minWidth: 200,
minHeight: 100,
contents: [
{
id: 'tab-xxx',
label: 'xxx',
elements: [
{
type: 'text',
id: 'seperator',
label: 'xxx'
}]
}
],
When dialog.setValueOf is being performed on text field, it will get focus automatically. This caused the entire value being selected.
I wish to avoid my newly inserted value, being selected. I had tried to shift the focus to other UI component
CKEDITOR.dialog.add('myDialog', function( editor ) {
editor.on( 'dialogShow', function( dialogShowEvent )
{
...
dialog.setValueOf('tab-xxx', 'seperator', ", ");
// Shift the focus, hopefully the text in 'seperator' will not be selected.
dialog._.buttons['ok'].focus();
});
However, that doesn't help. May I know what is the correct approach to do so?
I need a placeholder/variable that takes name, defaultValue, tooltip/description. I created a plugin and it is working fine in the editor/create mode. When placeholder is created, it is adding the following tags to source
<var class="cke_placeholder" name="varName" title="varToolTip">[[varDefaultValue]]</var>
Image that depicts create & edit mode differences
When I save the html content with placehoder in db and trying to load it back to ckeditor, I am not able to get the + symbol and hence not able to launch the editor.
Here is my ckeditor/plugins/var/plguin.js
'use strict';
( function() {
CKEDITOR.plugins.add( 'var', {
requires: 'widget,dialog',
icons: 'var', // %REMOVE_LINE_CORE%
hidpi: true, // %REMOVE_LINE_CORE%
onLoad: function() {
CKEDITOR.dialog.add( 'var', this.path + 'dialogs/var.js' );
},
init: function( editor ) {
this.registerWidget( editor );
editor.ui.addButton && editor.ui.addButton( 'Var', {
label: 'Create Variable',
command: 'var',
toolbar: 'insert',
icon: 'var'
} );
},
registerWidget: function(editor){
var that = this;
// Put ur init code here.
editor.widgets.add( 'var', {
// Widget code.
dialog: 'var',
pathName: 'var',
// We need to have wrapping element, otherwise there are issues in
// add dialog.
template: '<var class="cke_placeholder">[[]]</var>',
downcast: function() {
return new CKEDITOR.htmlParser.text( '<var class="cke_placeholder" name="'+this.data.name+'" title="'+this.data.description+'">[[' + this.data.defaultValue + ']]</var>' );
},
init: function() {
this.setData( 'defaultValue', this.element.getText().slice( 2, -2 ) );
this.setData( 'name', this.element.getAttribute("name") );
this.setData( 'description', this.element.getAttribute("title") );
},
data: function() {
this.element.setText( '[[' + this.data.defaultValue + ']]' );
this.element.setAttribute('name', this.data.name );
this.element.setAttribute('title', this.data.description );
}
} );
},
afterInit: function( editor ) {
this.registerWidget( editor );
/*var placeholderReplaceRegex = /\[\[([^\[\]])+\]\]/g;
editor.dataProcessor.dataFilter.addRules( {
text: function( text, node ) {
var dtd = node.parent && CKEDITOR.dtd[ node.parent.name ];
// Skip the case when placeholder is in elements like <title> or <textarea>
// but upcast placeholder in custom elements (no DTD).
if ( dtd && !dtd.span )
return;
return text.replace( placeholderReplaceRegex, function( match ) {
// Creating widget code.
var widgetWrapper = null,
innerElement = new CKEDITOR.htmlParser.element( 'span', {
'class': 'cke_placeholder'
} );
// Adds placeholder identifier as innertext.
innerElement.add( new CKEDITOR.htmlParser.text( match ) );
widgetWrapper = editor.widgets.wrapElement( innerElement, 'placeholder' );
// Return outerhtml of widget wrapper so it will be placed
// as replacement.
return widgetWrapper.getOuterHtml();
} );
}
} );*/
}
} );
} )();
Here is my ckeditor/plugins/var/dialogs/var.js
'use strict';
CKEDITOR.dialog.add( 'var', function( editor ) {
//var lang = editor.lang.var,
//generalLabel = editor.lang.common.generalTab,
var generalLabel = 'General',
validRegex = /^[^\[\]<>]+$/,
emptyOrInvalid = ' can not be empty. It can not contain any of following characters: [, ], <, >',
invalid = ' can not contain any of following characters: [, ], <, >';
return {
title: 'Variable properties',
minWidth: 300,
minHeight: 80,
contents: [
{
id: 'info',
label: generalLabel,
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'name',
type: 'text',
style: 'width: 100%;',
label: 'Name',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'name'+emptyOrInvalid ),
setup: function( widget ) {
this.setValue( widget.data.name );
},
commit: function( widget ) {
widget.setData( 'name', this.getValue() );
}
},
{
id: 'defaultValue',
type: 'text',
style: 'width: 100%;',
label: 'Default Value',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'Default Value'+emptyOrInvalid ),
setup: function( widget ) {
this.setValue( widget.data.defaultValue );
},
commit: function( widget ) {
widget.setData( 'defaultValue', this.getValue() );
}
},
{
id: 'description',
type: 'text',
style: 'width: 100%;',
label: 'Description',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'Description'+invalid ),
setup: function( widget ) {
this.setValue( widget.data.description );
},
commit: function( widget ) {
widget.setData( 'description', this.getValue() );
}
}
]
}
]
};
} );
I want to override the image plugin in CKeditor. When I right click on an image I want to open my own dialog. Can anyone point me in the right direction. I've done a basic plugin which I copied from the CKeditor site - How do I swap this to replace the image editor.
CKEDITOR.plugins.add('myplugin',
{
init: function (editor) {
editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog'));
if (editor.contextMenu) {
editor.addMenuGroup('mygroup', 10);
editor.addMenuItem('My Dialog',
{
label: 'Open dialog',
command: 'mydialog',
group: 'mygroup'
});
editor.contextMenu.addListener(function (element) {
return { 'My Dialog': CKEDITOR.TRISTATE_OFF };
});
}
CKEDITOR.dialog.add('mydialog', function (api) {
// CKEDITOR.dialog.definition
var dialogDefinition =
{
title: 'Sample dialog',
minWidth: 390,
minHeight: 130,
contents: [
{
id: 'tab1',
label: 'Label',
title: 'Title',
expand: true,
padding: 0,
elements:
[
{
type: 'html',
html: '<p>This is some sample HTML content.</p>'
},
{
type: 'textarea',
id: 'textareaId',
rows: 4,
cols: 40
}
]
}
],
buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
onOk: function () {
// "this" is now a CKEDITOR.dialog object.
// Accessing dialog elements:
var textareaObj = this.getContentElement('tab1', 'textareaId');
alert("You have entered: " + textareaObj.getValue());
}
};
return dialogDefinition;
});
}
});
Hi the reason I wanted to do this was that we have our image editor control which for "usability" reasons we need to carry on using. It gets used in different bits of the site and two dialogs would confuse people. In summary what I did was
Remove the image plugin CKEDITOR.config.removePlugins = 'image, forms, div,flash,iframe,table';
Add extra plugins extraPlugins: 'tinsertimage,teditimage,teditlink,tinsertlink,teditimagelink' on creating the CKEditor
In the plugin run some JS which intercept the right click on the image
CKEDITOR.plugins.add('teditimage',
{
init: function (editor) {
editor.addCommand('tEditImage',
{
exec: function (editor) {
//This opens the custom editor
ZWSInlineEditor.openImageProperties(editor, false);
}
});
if (editor.addMenuItem) {
// A group menu is required
// order, as second parameter, is not required
editor.addMenuGroup('gImage');
// Create a manu item
editor.addMenuItem('gEditImageItem', {
label: 'Edit Image Properties',
command: 'tEditImage',
group: 'gImage'
});
}
if (editor.contextMenu) {
editor.contextMenu.addListener(function (element, selection) {
// Get elements parent, strong parent first
var parents = element.getParents("img");
// Check if it's strong
if (parents[0].getName() != "img")
return null; // No item
return { gEditImageItem: CKEDITOR.TRISTATE_ON };
});
}
}
});
I don't understand what's the point in what you're doing (or please explain us). Maybe you should rather customize dialogs than do things from scratch?