When using the Custom Text Format Definition (https://ckeditor.com/docs/ckeditor4/latest/examples/format.html) it is possible to add attributes to tag definition like this :
config.format_tags = 'p;h1';
config.format_p = { element: 'p'};
config.format_h1 = { element: 'h1', attributes: { 'class': 'lorem-ipsum' } };
My issue is that when applying h1 from the dropdown, the lorem-ipsum class is added, OK, but when going back to pthe lorem-ipsum class is not deleted. I tried with attributes: false, attributes: null, attributes: {} but nothing make them disapear when switching between tags.
The issue is visible on the CKEDITOR demo : https://ckeditor.com/docs/ckeditor4/latest/examples/format.html under the Custom Text Format Definition title. When change the tags their class stays.
So how to erase classes when change tag from the format dropdown ?
This workaround works (I checked it in ver. 4.6.2):
config.format_p = { element : 'p', attributes: {'class' : ''} };
In this case if you switch to p the attribute disappears.
Related
Is it possible to use a dropdown column in a HandsOnTable without the editable textbox?
I know you can set the type to dropdown and it will validate/highlight red when you enter an invalid value, but is there a way to completely disable text entry for dropdown columns? It seems just using the readOnly property on the column blocks the dropdown altogether.
As you said, the readOnly option will disable you dropdown. So I believe the closest solution you can use is the allowIndvalid = false (true by default) :
allowInvalid: true (optional) - allows manual input of value that does not exist in the source. In this case, the field background highlight becomes red and the selection advances to the next cell
allowInvalid: false - does not allow manual input of value that does not exist in the source. In this case, the ENTER key is ignored and the editor field remains opened.
Documentation Link
You can use this JSFiddle to quickly check this option
I have the same issue and was able to resolve it with such steps. Maybe this could help:
1 when creating columns add a special className to the necessary column type:
{
data: 'priceUnitsName',
type: 'dropdown',
invalidCellClassName: 'colored',
source: Object.keys(unitNames),
width: 100,
className: 'disable-edit',
}
2 Subscribe to events to handle cancel editing:
private targetCell: HTMLTableCellElement;
public settings: GridSettings = {
// your settings
afterOnCellMouseDown: (event: MouseEvent, coords: CellCoords, TD: HTMLTableCellElement) => {
this.targetCell = TD;
},
afterBeginEditing: (row: number, column: number) => {
if (this.targetCell.classList.contains('disable-edit')) { // this handle only necessary columns with special class
setTimeout(() => {
const inputCollection: HTMLCollection = document.getElementsByClassName('handsontableInput');
Array.from(inputCollection).forEach((input: HTMLTextAreaElement) => {
input.blur(); // this calls blur on element manually
});
});
}
},
Maybe this is not the best decision, but by default, handsontable can't make dropdown elements readonly with leaving open-close dropdown functional and I can't find any workable suggestion with this.
Checked on 'dropdown' and 'date' types, and it works.
I'm wondering how to add a rule to the dataProcessor like it was possible in the old htmlarea.
In my case I want to add a fixed class to the "ul"-tag.
I tried something like that (tried to adapt the js configuration from ckeditor)
editor:
config:
format_p:
- { element : 'p', attributes : { 'class' : 'ul' }}
...but it does not work.
I did it now via TypoScript like this:
### Set default class for ul from rte
lib.parseFunc_RTE {
externalBlocks := addToList(ul)
externalBlocks {
ul.stripNL = 1
ul.callRecursive = 1
ul.callRecursive.tagStdWrap.HTMLparser = 1
ul.callRecursive.tagStdWrap.HTMLparser.tags.ul {
fixAttrib.class.default = ul
}
}
}
It does basically what I want, BUT still I think this is not optimal. The class is not stored in the DataBase, so if you need to export the content for some reason you will loose this class. And you can not style it in the BE RTE-field (at least not without providing some extra hack css)
So I'm still interested if there is a proper way of doing it in the ckeditor-config.
I have redirected the contents.css file for my CKEditor 3.6 to my site's stylesheet:
CKEDITOR.config.contentsCss = '/css/style.css';
Now I'd like to add some styles from that stylesheet into the dropdown box for users to select when editing content. The previous developer created this:
CKEDITOR.addStylesSet( 'cms_styles',
[
{
name : 'Page Header',
element : 'h2'
},
{
name : 'Page Text',
element : 'p'
},
It appears to work, but makes very little sense to me. Where do these get their style from given that a class name cannot have spaces? Why is an element being specified if we're just adding styles to the dropdown? Google turned up no good results for addStylesSet, and the developer guide I found (http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles) really wasn't very specific.
I do not want to display all available classes; just a few that we define.
The name property on the style objects is only used for display purposes, it does not make it into the content in any way. What the previous developer created works because those styles are just specifying the element, and the css likely has styling defined using those element specifiers.
The element property is being set so that CKEditor knows how to apply that style to the content. If you have a style with the element property having a value of p then that style will become a block style and will apply to the currently active p block in the content. If the element property has a value of span then the style would be applied to the selected text only (it would be surrounded with a span element if one didn't already exist).
To get styles in the dropdown to represent classes in your external css you need to add the style objects to the styles set and have it set the class attribute of the element the style is being applied to. By setting properties on the attributes property of the style object you can have CKEditor add or modify attributes on the element that it is applying the style to. For our purposes we want to set the class property of the attributes property in order to have the class defined in your css applied.
CSS:
p.myBlockStyle {
font-size: 32px;
}
CKEditor stylesSet array:
[
{
name: "My Block Style",
element: "p",
attributes: {
"class": "myBlockStyle"
}
}
]
Note that the class property has it's name quoted because class is a reserved keyword.
I have found some answers that explain how to remove the Kendo UI kendoDatePicker widget from a textbox here http://www.kendoui.com/forums/ui/general-discussions/method-for-removing-controls.aspx and here http://www.kendoui.com//forums/ui/date-time-pickers/datepicker-becomes-static.aspx
Unfortunately the above examples do not seem to help when i try to remove the property of a NumericTextBox. I ended up with the source below.
var numericTextBox = $(selector).data("kendoNumericTextBox");
var element = numericTextBox.wrapper[0] ? numericTextBox.wrapper
: numericTextBox.element;
// unwrap element
var input = numericTextBox.element.show();
input.removeClass("k-input").css("width", "12.4em");
input.removeClass("numerictextbox");
input.insertBefore(numericTextBox.wrapper);
numericTextBox.wrapper.remove();
input.removeAttr("data-role");
input.removeAttr("role");
I finally end up with a text box that looks like a simple textbox but i am still not allowed to add anything else than just numbers.
Furthermore i tried adding also the line input.removeData("kendoNumericTextBox"); which is close to what is suggested on the links i have posted above, but i could not identify what this line does.
Instead of playing with the widget decoration converting from text to numeric and viceversa it's much easier having both and have always one of them hidden. You just need to add a class / remove a class and get the correct one visible.
Lets say that I have the following CSS definition:
.ob-hide {
display: none;
}
The following HTML:
<div id="combobox"></div>
<div id="number"></div>
<div id="text"></div>
Then my JavaScript would be:
$("#combobox").kendoDropDownList({
dataSource: {
data: [ "string", "number" ]
},
value : "string",
change : function (e) {
console.log("change");
if (this.value() === "string") {
console.log("string");
$("#number").closest(".k-numerictextbox").addClass("ob-hide");
$("#text").closest(".k-autocomplete").removeClass("ob-hide");
} else {
console.log("number");
$("#number").closest(".k-numerictextbox").removeClass("ob-hide");
$("#text").closest(".k-autocomplete").addClass("ob-hide");
}
}
});
$("#number").addClass("ob-hide").kendoNumericTextBox({});
$("#text").kendoAutoComplete({});
Ext JS 4. I have a tree.Panel where I want to display custom HTML in each node, generated from that node’s model data. I can do this by setting the node’s text when loading the store, but it is not the model’s job to do markup. So I created a custom Column that renders my HTML.
My problem is: unless I derive from Ext.tree.Column, it doesn’t show up properly (no outline, plus/minus icons etc.). If I do, everything is fine, but Ext.tree.Column is marked as private to Ext JS.
Is there some officially supported API to do what I want?
I have written a blog post about how to customize ExtJS 4 tree panel, I hope it will help:
http://hardtouse.com/blog/?p=24
The idea is to use renderer combined with A LOT OF css magic:
columns : [{
xtype : 'treecolumn',
dataIndex : 'name',
renderer : function(value, record){
return Ext.String.format('<div class="tree-font">{0}</div>', value);
}]
Thanks for your answer above. Here is another example showing a few more options for formatting:
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
// see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
var tooltipString = "Hello";
metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
}
}]
You might also want to add
hideHeaders : true,
to your tree panel config to remove the "grid" header that appears as a result of using a treecolumn.
Murray