I have a custom ckeditor5 plugin that wraps a string with a custom tag and inserts an optional attribute. The tags can also be entered manually. Three possible forms are:
[<bbref ver="RSV">Mt 2:1 rsv</bbref>]
[<bbref ver="">Mt 2:2 null</bbref>]
[<bbref>Mt 2:3 none</bbref>]</p>
The editor recognises (upcasts) the first 2 but treats the third as just the plain text.
My upcast code:
// Conversion from a view element to a model attribute
conversion.for('upcast').elementToAttribute({
view: {
name: 'bbref',
attributes: ['ver']
},
model: {
key: 'bibleref',
// Callback function provides access to the view element
value: viewElement => {
let ver = viewElement.getAttribute('ver');
console.log('in upcast ver=['+ver+']');
return ver;
}
}
});
The viewElement callback does not even seem to be called for the third form.
Related
I'm using webix as my JavaScript front end.
I've created a form with a colorpicker view. In Webix, by default, the colorpicker only allows users to pick from a pre-selected range of colors, and returns the hex code of the color selected.
This behavior can be overridden to allow entering of any color by using the option editable: true. However, editable: true allows users to enter anything into the colorpicker as if were a free text field.
I'm trying to use a custom validation to work around this. I should be able to return false in the custom validation function to alert the user user of an invalid value and to prevent the form from being saved until it's fixed. However, the custom validation function never gets called when used on the colorpicker.
Here's a webix snippet of what I'm trying:
https://snippet.webix.com/28oadxzl
webix.ui({
view:"form",
id: "theForm",
name: "theForm",
elements:[
{
view:"colorpicker",
label:"color",
name:"color",
id: "color",
editable: true,
validate: webix.rules.iscolor,
on: {
onChange: function(newv, oldv) {
// this gets called every time the color picker is changed.
webix.message({text: "onChange: " + newv})
this.validate();
}
}
},
{
view:"button",
type:"form",
value:"ok",
width:200,
align:"right",
click: function() {
// this gets called when the "ok" button is clicked.
webix.message({text: "click"});
$$("theForm").validate();
}
}
],
rules: {
iscolor: function(value) {
// never gets called! Should be called on colorpicker change and on "ok" click.
return false; // replace with regex hexcode validation.
webix.message({text: "iscolor: " + value})
}
}
});
You were almost right: https://snippet.webix.com/4mw3mxk8
The thing is that:
as a key in rules, you must use the name of the control ("color" in your case)
webix.rules includes only predefined validation rules (isEmail, isNotEmpty, etc)
I need to use kendo-ui grid for data editing. Problem is that every possible item in returned response is string, but which contains other types of value (eg Value = "true" or Value = "32%" or Value = "[0:standard, 1:advanced]").
So I need to set up template on grid to correspond different data type within string.
So for true/false i have to have checkbox, for 32% it should provide text box but with percent validation, for array response it needs to be a drop down.
I managed to set up drop down and text box options using editor, but I cannot make checkbox to handle properly in any way. Checkbox is displayed as expected, but whatever I try it won't bind data to the grid after grid is saved. (it is always not checked, regardless of value)
Here is code snippet of column "value" and what I used for template (item.type === "3" is boolean).
field: 'value',
title: 'value',
headerAttributes: {
'class': 'table-header-cell'
},
template: function (item) {
if (item.type === "3") {
var boolValue = (/true/i).test(item.value);
item.value = boolValue;
return '<input id="' + item.name+ '" type="checkbox" #= value ? \'checked="checked"\' : "" # class="chkbx" />';
} else {
return ''; //this will follow for other types
}
},
Thanks in advance.
When the template definition is a function, you don't need to use the # markers to differentiate between markup and javascript like you do when you are defining a kendo template using kendo's template language or a string directly.
This is because inside the function it is always javascript and the # markers are only directives in the kendo templating language.
So, simplify your template to just:
template: function (item) {
return '<input class="chkbx" id="' + item.name + '" type="checkbox"' + (item.value ? 'checked="checked"' : '') + '/>';
}
I've left out the other datatype handling for simplicity.
Then, you need to add code to push the checkbox changes into the grid's datasource when they occur:
$("#grid").on("click", ".chkbx", function () {
var $checkBox = $(this),
checked = $checkBox.is(":checked"),
dataItem = grid.dataItem($checkBox.closest("tr"));
dataItem.set("value", checked);
});
This is a technique that I am currently using in production code.
Dojo example
It may also be possible to use the kendo MVVM bindings in your template for a more elegant solution instead of the explicit click handler, but I'd have to experiment more with that to figure it out.
I'm currently creating a 'smartobject' widget. In the widgets dialog, the user can choose a 'smartobject', which simply put, generates some html, which should be added to the editor. Here comes the tricky part: the html sometimes div elements and sometimes simply span elements. In the case of the div variant, the widget should be wrapped in a div 'template'. In the case of a span variant, the widget should be wrapped in a span and the html should be added 'inline'.
In the widgets API I see the following way to define a template:
editor.widgets.add('smartobject', {
dialog: 'smartobject',
pathName: lang.pathName,
template: '<div class="cke_smartobject"></div>', // <------
upcast: function(element) {
return element.hasClass('smartObject');
},
init: function() {
this.setData('editorHtml', this.element.getOuterHtml());
},
data: function() {
var editorHtml = this.data.editorHtml;
var newElement = new CKEDITOR.dom.element.createFromHtml(editorHtml);
newElement.copyAttributes(this.element);
this.element.setText(newElement.getText());
}
});
But in my case, the template is more dynamic: sometimes a div and sometimes the span will do the correct thing..
How can I fix this without needing to create two widgets which will do the exact same thing, with only the wrapping element as difference?
I've already tried to replace the entire element in the 'data' method, like:
newElement.replace(this.element);
this.element = newElement;
But this seemed not supported: resulted in undefined errors after calling editor.getData().
I'm using ckeditor v4.5.9
Thanks for your help!
It seems I got it working (with a workaround).
The code:
CKEDITOR.dialog.add('smartobject', this.path + 'dialogs/smartobject.js');
editor.widgets.add('smartobject', {
pathName: lang.pathName,
// This template is needed, to activate the widget logic, but does nothing.
// The entire widgets html is defined and created in the dialog.
template: '<div class="cke_smartobject"></div>',
init: function() {
var widget = this;
widget.on('doubleclick', function(evt) {
editor.execCommand('smartobject');
}, null, null, 5);
},
upcast: function(element) {
return element.hasClass('smartObject');
}
});
// Add a custom command, instead of using the default widget command,
// otherwise multiple smartobject variants (div / span / img) are not supported.
editor.addCommand('smartobject', new CKEDITOR.dialogCommand('smartobject'));
editor.ui.addButton && editor.ui.addButton('CreateSmartobject', {
label: lang.toolbar,
command: 'smartobject',
toolbar: 'insert,5',
icon: 'smartobject'
});
And in the dialog, to insert code looks like:
return {
title: lang.title,
minWidth: 300,
minHeight: 80,
onOk: function() {
var element = CKEDITOR.dom.element.createFromHtml(smartobjectEditorHtml);
editor.insertElement(element);
// Trigge the setData method, so the widget html is transformed,
// to an actual widget!
editor.setData(editor.getData());
},
...etc.
UPDATE
I made the 'onOk' method a little bit better: the smartobject element is now selected after the insertion.
onOk: function() {
var element = CKEDITOR.dom.element.createFromHtml(smartobjectEditorHtml);
var elementId = "ckeditor-element-" + element.getUniqueId();
element.setAttribute("id", elementId);
editor.insertElement(element);
// Trigger the setData method, so the widget html is transformed,
// to an actual widget!
editor.setData(editor.getData());
// Get the element 'fresh' by it's ID, because the setData method,
// makes the element change into a widget, and thats the element which should be selected,
// after adding.
var refreshedElement = CKEDITOR.document.getById(elementId);
var widgetWrapperElement = CKEDITOR.document.getById(elementId).getParent();
// Better safe then sorry: if the fresh element doesn't have a parent, simply select the element itself.
var elementToSelect = widgetWrapperElement != null ? widgetWrapperElement : refreshedElement;
// Normally the 'insertElement' makes sure the inserted element is selected,
// but because we call the setData method (to ensure the element is transformed to a widget)
// the selection is cleared and the cursor points to the start of the editor.
editor.getSelection().selectElement(elementToSelect);
},
So in short, I partially used the widget API for the parts I wanted:
- Make the html of the widget not editable
- Make it moveable
But I created a custom dialog command, which simply bypasses the default widget insertion, so I can entirely decide my own html structure for the widget.
All seems to work like this.
Any suggestions, to make it better are appreciated:)!
As suggested in this ckeditor forum thread, the best approach would be to set the template to include all possible content elements. Then, in the data function, remove the unnecessary parts according to your specific logic.
I am using kendo ui treeview. I am loading the treeview dynamically from the database. But my issue is i am getting the expand error if there are no child's to display. How can i remove the expand arrow.
Regards,
Sri
There is a configuration field of the HierarchicalDataSource schema.model object called hasChildren you can add a boolean property to your model which indicates if the your model has items.
This way when the TreeView creates its elements it will check that property (or call the function - you could for example return if the items.leght is greater than zero) and if the returned value is false it wont create the expand arrow in front of the item.
Check this demo.
for an example, I have declared my function like this in my Kendo Ui TreeView :
var inline = new kendo.data.HierarchicalDataSource({
data: #Html.Raw(dataSource),
schema: {
model: {
children: "Children",
hasChildren: function(e) {
var test = e.Children.length;
return test > 0;
}
}
}
});
And for my, it works perfectly !
I am using jqgrid inline editing with validation in grid using edit rules . i want to add class to highlight errors(eg: ui-state-error) for the input which fails in validation .
i can set class to highlight error using this
jQuery('#'+grid_id).jqGrid('setCell',row_id,errfields[a],'','ui-state-error',{color: 'blue'});
But it is not working in jqgrid when inbuilt validation fails .
How do i highlight the validation error triggered cell/input .
The demo shows how the probelm can be solved:
In the demo the columns "Amount", "Tax" and "Total" will be validated with the following validation rule:
editrules:{required:true,number:true}
On any validation error the first input field where the validation failed dditional class "ui-state-error" will be added. It is the standard jQuery UI CSS class. Addionally I set focus to the input field.
For the implementation I overwride (chain) the default implementation of the methods $.jgrid.checkValues and $.jgrid.hideModal. Here is the corresponding code:
var grid = $("#list");
grid.jqGrid({
// define all jqGrid options
});
var originalCheckValues = $.jgrid.checkValues,
originalHideModal = $.jgrid.hideModal,
iColWithError = 0;
$.jgrid.checkValues = function(val, valref,g, customobject, nam) {
var tr,td,
ret = originalCheckValues.call(this,val, valref,g, customobject, nam);
if (!ret[0]) {
tr = g.rows.namedItem(editingRowId);
if (tr) {
$(tr).children('td').children('input.editable[type="text"]').removeClass("ui-state-error");
iColWithError = valref; // save to set later the focus
//error_td_input_selector = 'tr#'+editingRowId+' > td:nth-child('+(valref+1)+') > input.editable[type="text"]:first';
td = tr.cells[valref];
if (td) {
$(td).find('input.editable[type="text"]').addClass("ui-state-error");
}
}
}
return ret;
};
$.jgrid.hideModal = function (selector,o) {
var input, oldOnClose, td,
tr = grid[0].rows.namedItem(editingRowId);
if (tr) {
td = tr.cells[iColWithError];
if (td) {
input = $(td).children('input.editable[type="text"]:first');
if (input.length > 0) {
oldOnClose = o.onClose;
o.onClose = function(s) {
if ($.isFunction(oldOnClose)) {
oldOnClose.call(s);
}
setTimeout(function(){
input.focus();
},100);
};
}
}
}
originalHideModal.call(this,selector,o);
};
In my project, I combine to use jqgrid and jquery validation plugin to examine and highlight errors, to provide unified look and feel in the entire application. You can use rowId_columnName as id to find the editor (input, select, etc.), e.g. $('#1_name') for name column in row 1 and then use the jquery object to add a rules, e.g. $('#1_name').rules('add', {required:true}) to add a rule to enforce that the cell is required, then calling $('#1_name').valid() to force a validation pass when value is submitted, e.g. before calling jqgrid saveRow method. Open the link for the plugin to know more about rules method and valid method.