I have an ckeditor and added an button for inserting textfields
config.toolbar = [
...
{ name: 'forms', items: [ 'TextField' ] },
...
inserting works fine, but for editing i have to doubleclick the input and change the value in the dialog
is it possible to allow to edit the content just within the textfield?
Related
I have an editable custom widget that can be placed in CKEditor 4 by
clicking a button in the toolbar - works fine = does not allow nesting
drag & drop from outside of the editor - allows nesting
I do not want to let user to have nested content of the widget. On the other hand I do want users to able to edit the content of the widget.
NOTE
click the button to insert widget's content. Click inserted text and the button becomes not available for clicking. Click some other text and you would be able to insert again. This is desired behavior.
the widget button will not be present in the final version of the CKEditor application / widget. Only drag&drop way of inserting text will be available
Insert two widgets in the editor and try to drag&drop one inside the other one. It will not work. This is desired behavior.
Now try to insert a widget and then insert another one by drag&drop of the text "master or editable" into existing widget. It will be possible.
Could someone help me to set CKEditor a way so nesting is NOT possible?
Working jsfiddle.
init: function( editor ) {
editor.widgets.add( 'simplebox', {
button: 'Create a simple box',
template:
'<div class="simplebox">' +
'<h2 class="simplebox-title">Title</h2>' +
'<div class="simplebox-content"><p>Content<br>.<br>.<br>.</p></div>' +
'</div>',
editables: {
title: {
selector: '.simplebox-title',
allowedContent: 'br strong'
},
content: {
selector: '.simplebox-content',
allowedContent: 'p br ul ol li strong em'
}
},
allowedContent:
'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',
requiredContent: 'div(simplebox)',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'simplebox' );
}
} );
}
} );
Is it possible to add file attachment inside popup for grid row? Instead of filename - "file attachment"
For that, you have the custom template for edit.
You can use something like this:
editable: {
mode: "popup",
template: kendo.template($("#popup-editor").html())
}
You can build your own form in the popup-editor element
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.template
How can prevent block elements in ckeditor?
I want to don't let to ckeditor to accept block elements.
With prevent enter key i can do this but if i paste some text that's include enter key or several paragraph in ckeditor everything down.
In other word i want a textbox with ckeditor.
Quoting an official weekly blog post:
CKEditor core developer, Olek Nowodziński, was hacking the editor a bit in his spare time and here is the result...
Editable header that does not break with Enter key or pasted multi–line content: https://jsfiddle.net/540ckczt/
var editor = CKEDITOR.inline( 'editor', {
plugins: 'clipboard,floatingspace,toolbar,undo,basicstyles,link',
toolbar: [ [ 'Undo', 'Redo' ], [ 'Bold', 'Italic' ], [ 'Link', 'Unlink' ] ],
// Enter mode ill be set to BR automatically if editor was enabled on some element
// which cannot contain blocks (like <h1 for instance).
// If you want to enable editor on different elements, set BR mode here.
// Read the note below to learn why.
enterMode: CKEDITOR.ENTER_BR,
on: {
instanceReady: function() {
// Remove all "br"s from the data being inputted into the editor.
editor.dataProcessor.dataFilter.addRules( {
elements: {
br: function() {
return false;
}
}
} );
this.editable().on( 'keydown', function( evt ) {
var keystroke = evt.data.getKeystroke();
if ( keystroke == CKEDITOR.SHIFT + 13 || keystroke == 13 ) {
evt.data.preventDefault();
}
} );
}
}
} );
Note that the crucial part of this code is that the ACF filters out the rest of block tags (other than <br>). In the case above the ACF works in an automatic mode where it's configured by the enabled features. And since there's no Format dropdown or any other feature creating blocks, none of them is allowed. Read more in the Advanced Content Filter guide.
I expect that one could ask now: "Why can't we configure ACF to filter out <br>s too?"
The answer is that ACF must be able to normalise blocks which are not allowed to some content, and as CKEditor does not support "no enter" mode officially, it choses between normalising to <p>, <div> or <br>. The decision is made based on the enter mode, so that's why it's important to configure such editor to enter mode BR.
I've noticed that my custom Grid command is not working after a popup edit dialog is opened and closed (cancelled).
The command delrow is used to display a custom delete confirmation (I've simplified it in the fiddle to just use a standard JS confirmation).
I've setup a Fiddle that demonstrates the problem.
It works when the grid is initially loaded, but not after a cancelled edit. Not sure if this is a bug or something I'm doing wrong.
Any advice would be much appreciated. Thanks
Is the way you do it. You are binding the click event in the dataBound but when you cancel the edition the row is refreshed and you loose the bind.
You should define the action using click property as:
columns : [
{
command: [
{name: 'edit'},
{name:'delrow', click: delRow}],
title: ' ',
width: 100
},
{ field: "FirstName", width: 90, title: "First Name" },
...
Where delRow is the same code that you have as click event handler:
function delRow(e) {
var row = $(this).parents('tr:first');
var r=confirm("Are you sure you want to delete this row!");
if (r==true)
{
var g = grid.data('kendoGrid');
g.removeRow(row[0]);
}
}
See it in action here : http://jsfiddle.net/OnaBai/XNcmt/56/
I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.
I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '#=CourseType#',
width: 120
}
]
}
]
If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.
1) Add to your template a class that would allow us to find those cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
where I have include class="ob-edit-popup" to the template.
2) add to your grid definition the option editable: "popup".
3) add the following JavaScript code after the initialization.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid is the result of:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");