I am using ckeditor , and I have added 1 dialog where on button click i want to check whether cursor is inside table in ckeditor dialog ?
this is dialog code where on click of button i need to check the above condition
CKEDITOR.dialog.add( 'NDFSRSDialog', function( editor ) {
return {
title: 'Formula Editor',
contents: [
{
id: 'tab-basic',
label: 'Basic condition',
elements: [
{
type: 'text',
id: 'NDFSRS',
label: 'FIELD',
validate: CKEDITOR.dialog.validate.notEmpty( " field cannot be empty" )
},
{
type: 'button',
id: 'title',
label: 'CONDITION',
validate: CKEDITOR.dialog.validate.notEmpty( " field cannot be empty" ),
onclick : function( )
{
alert(0);
}
}
]
}
],
onOk: function() {
var dialog = this;
dialog.getElement('tab-basic', 'NDFSRS' ).hide();
}
};
});
Like this ?
if($("#ckeditor").is(":focus")){
//do stuff here
}
$( '#save' ).on( 'click', function () {
var editor = CKEDITOR.instances.ficeditor,
sel = editor.getSelection(),tbchk;
tbchk = sel.getStartElement();
while(tbchk!=null){
if(tbchk!=null && tbchk.getName()=="table"){
console.log("inside table");
}
tbchk=tbchk.getParent();
}
});
Related
I am trying to upload the file via Media Library from Inspect Control in Gutenberg. I am using this code currently in JS :
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
MediaUpload = wp.components.MediaUpload,
InspectorControls = wp.editor.InspectorControls;
And here I am registering the block type :
registerBlockType( 'myplugin/about-section', {
title: 'About Section',
icon: 'megaphone',
category: 'widgets',
edit: function( props ) {
return [
el( ServerSideRender, {
block: 'malinda/about-section',
attributes: props.attributes,
} ),
el( InspectorControls, {},
el( MediaUpload, {
label: 'Background Image',
value: props.attributes.bgimg,
// I think something need to be done here..
} ),
),
];
},
save: function() {
return null;
},
} );
But for some reason it's not working for me. In console it's giving me this error :
Error: Minified React error #130; visit
https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=
for the full message or use the non-minified dev environment for full
errors and additional helpful warnings.
and when I click on block it says :
The editor has encountered an unexpected error.
Can anyone please help me in that?
You need add attributes field for save image link. Then you need add MediaUpload element and add callback on click. And after save value. You can integrate my code in your
decision. I am add image select to inspector controls area.
( function( editor, components, i18n, element ) {
var el = element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.editor.InspectorControls;
var MediaUpload = wp.editor.MediaUpload;
registerBlockType( 'designa/image-block', {
title: 'Image block',
description: 'Image block.',
icon: 'video-alt3',
category: 'common',
attributes: {
mediaURL: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
}
},
edit: function( props ) {
var attributes = props.attributes;
var onSelectImage = function( media ) {
return props.setAttributes({
mediaURL: media.url
});
};
return [
el( InspectorControls, { key: 'inspector' },
el( components.PanelBody, {
title: 'Image block',
className: 'image-block',
initialOpen: true,
},
el( MediaUpload, {
onSelect: onSelectImage,
type: 'image',
render: function( obj ) {
return el( components.Button, {
className: 'components-icon-button image-block-btn is-button is-default is-large',
onClick: obj.open
},
el( 'svg', { className: 'dashicon dashicons-edit', width: '20', height: '20' },
el( 'path', { d: "M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z" } )
),
el( 'span', {},
'Select image'
),
);
}
}),
),
)
];
},
save: function( props ) {
var attributes = props.attributes;
return (
el( 'div', {
className: props.className
},
el( 'img', {
src: attributes.mediaURL
})
)
);
},
} );
} )(
window.wp.editor,
window.wp.components,
window.wp.i18n,
window.wp.element,
);
I try to write a plugin for the CKEditor (Version 4.x), with a Dialog UI element.
the definition of the dialog looks like:
CKEDITOR.dialog.add('abbrDialog', function(editor) {
return {
title: editor.lang.abbr.title,
label: editor.lang.abbr.title,
minWidth: 400,
minHeight: 200,
contents: [{
id: 'abbreviation-dialog',
label: editor.lang.abbr.label,
elements: [
{
id: 'abbreviation-found-label',
type: 'html',
label: editor.lang.abbr.found,
html: '<span id="foundLabelId">'+ editor.lang.abbr.found + '<\/span>'
},
{
id: 'abbreviation-current-item',
type: 'html',
label: editor.lang.abbr.currentLabel,
html: '<span id="currentLabelId">'+ editor.lang.abbr.currentLabel + '<\/span>'
},
{
id: 'abbreviation-replace-button',
type: 'checkbox',
label: editor.lang.abbr.replaceButton,
onClick : function() {
replaceAbbreviation(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
}
},
{
id: 'abbreviation-next-button',
type: 'button',
label: editor.lang.abbr.nextButton,
onClick : function() {
nextAbbreviation(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
}
},
{
id: 'abbreviation-all-button',
type: 'button',
label: editor.lang.abbr.allButton,
onClick : function() {
replaceAllAbbreviations(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
//alert('Replace all!!');
}
}]
}],
buttons: [CKEDITOR.dialog.okButton],
onShow: function() {
initDialog(editor.lang.abbr.found, editor.lang.abbr.currentLabel);
},
onOk: function() {
// nothing to do
}
In one function i try to disable a button. This looks like:
CKEDITOR.dialog.getCurrent().getContentElement("abbreviation-dialog", "abbreviation-replace-button").disable();
Unfortunately this button gets not disable (but the additional CSS-class cke_disabled is added).
Also strange: if i turn that abbreviation-replace-button into a checkbox, this checkbox gets disabled (with no further code modifications).
My Questions:
How can i disable a button on a plugin dialog?
Why gets the checkbox disabled but the button not?
Where is my mistake?
I think you need to call a special method to disable buttons,
i.e. `disableButton('btn')
you can disable ok or cancel button by following way
CKEDITOR.dialog.getCurrent().disableButton('ok')
CKEDITOR.dialog.getCurrent().disableButton('cancel')
in your case you can try
CKEDITOR.dialog.getCurrent().disableButton('abbreviation-next-button')
I have CKEditor and I added a dialog with 2 text areas in my own plugin.js folder, but I can't take text inputs when ok button pressed at dialog.
CKEDITOR.dialog.add('ticketDialog', function (editor) {
return {
title: 'Ticket Properties',
minWidth: 100,
minHeight: 100,
maxWidth: 100,
maxHeight: 100,
contents:
[
{
id: 'general',
label: 'Ticket from',
elements:
[
{
type: 'text',
id: 'Ticket',
label: "Write the company's name that you bought from",
'default': "Thy,Pegasus etc."
},
{
type: 'text',
id: 'Price',
label: "Price for single ticket",
'default': "0.00TL"
}
]
}
]
};
});
I have mvc view page and I replace my textarea with CKeditor by using javascript and I need to handle dialog's ok event here.
<script type="text/javascript">
var editor = CKEDITOR.instances['editor1'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace('editor1', {
enterMode: CKEDITOR.ENTER_BR,
extraPlugins: 'ticket',
toolbar: 'Full',
language:'English'
});
CKEDITOR.on('dialogDefinition', function (e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
dialog.on('ok', function () {
var elementPrice = e.data.definition.dialog.getElement('Price');
var rawValue = elementPrice.getInputElement().$.value; // here I am trying to take the value of Price area input.
alert(rawValue);
//CKEDITOR.instances['editor1'].insertHtml(rawValue);
});
});
</script>
Thank you.
Here is the answer for the other people to see well.
CKEDITOR.on('dialogDefinition', function (e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
dialog.on('ok', function () {
var elementPrice = dialog.getContentElement('general','Price');
});
});
I'm doing a plugin in CKeditor with a select [ 'Description', 'Value'].
ckeditor root/
plugins/
span/
icons/
span.png
dialogs/
span.js
plugin.js
plugin.js
> CKEDITOR.plugins.add( 'span', {
> icons: 'span',
> init: function( editor ) {
> editor.addCommand( 'span', new CKEDITOR.dialogCommand( 'spanDialog' ) );
> editor.ui.addButton( 'Span', {
> label: 'Insert Reserved Word',
> command: 'span',
> toolbar: 'insert'
> });
> CKEDITOR.dialog.add( 'spanDialog', this.path + 'dialogs/span.js' );
> } });
dialogs/span.js
CKEDITOR.dialog.add( 'spanDialog', function( editor ) {
return {
title: 'Palavras Reservadas',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'select',
id: 'span',
label: 'Reserved Words Available',
items: [ [ 'example 1', '#exanple1#' ], [ 'example 2', '#example2#' ] ],
validate: CKEDITOR.dialog.validate.notEmpty( "Field can not be empty." ),
setup: function(a) {
this.setValue(a.getAttribute("value") || "")
}
}
]
}
],
onOk: function() {
var dialog = this;
var span = editor.document.createElement( 'span' );
span.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
editor.insertElement( span );
}
};
});
At function onOK()
onOk: function() {
var dialog = this;
var span = editor.document.createElement( 'span' );
span.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
editor.insertElement( span );
}
I would like to add to the reader the following
<span>#example1#</span> //if I select a Exemple 1
Any tips on how to do this?
See this span with the text set ...
thank you for now
Resolved ;)
span.js
setup: function( element ) {
element.setText( this.getValue() );
},
commit: function( element ) {
element.setText( this.getValue() );
}
.... var selection = editor.getSelection();
var element = selection.getStartElement();
if ( element )
element = element.getAscendant( 'span', true );
if ( !element || element.getName() != 'span' ) {
element = editor.document.createElement( 'span' );
this.insertMode = true;
}
else
this.insertMode = false;
this.element = element;
if ( !this.insertMode )
this.setupContent( this.element );
},
onOk: function() {
var dialog = this;
var abbr = this.element;
this.commitContent( abbr );
if ( this.insertMode )
editor.insertElement( abbr );
}
Is there an event equivalent to onEditComplete for Kendo Grid where the event fires only after the content of the cell has been edited?
Documentation mentions "edit" event, but this fires as soon as the cell goes into edit mode (So this is equivalent to onBeginEdit).
The closest event with the desired behavior I found was the "save" event, but this event only fires when the content of the cell has been changed. I want an event that fires as soon as the cell goes out of the edit mode.
The grid's editmode is set to incell.
Use the Save event
(fired when the focus is moved outside of the cell being edited and
before the cell is closed)
http://www.kendoui.com/forums/kendo-ui-web/grid/is-there-an-event-that-first-after-a-user-edits-a-cell-but-before-they-save-in-a-grid-with-batch-edit-and-incell-editing-.aspx.
So due to the comment i've removed my previous answer - using the blur event on the input boxes (or other elements) seems to work :
On the grid.edit event, use jquery to bind to the textbox (or any other inline edit control)'s blur event which is fired when focus is lost. Append this to the grid definition...and obviously replace the alert with your code.
edit: function (e) {
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function () {
alert('blur event called');
});
},
I've tested this by modifying the sample inline edit code here
My full local source of the edit - see only the edit event on the grid def:
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
// added in hook to here to bind to edit element events.
// blur is fired when an element loses focus
edit: function (e) {
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function (e) {
alert('blur event called');
});
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px" }],
editable: "inline"
});
});
</script>
</div>
Why are you not using the "blur" event?
http://www.kendoui.com/forums/ui/window/possible-to-close-window-when-it-loses-focus-.aspx
$("#window").blur(function(){
if ($(document.activeElement).closest(".k-window").length == 0) {
$("#window").data("kendoWindow").close();
}
});
http://api.jquery.com/blur/
Have you tried the Change Event
"change
Fired when the user selects a table row or cell in the grid."
Example - get the selected data item(s) when using cell selection
<div id="grid"></div>
<script>
function grid_change(e) {
var selectedCells = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedCells.length; i++) {
var dataItem = this.dataItem(selectedCells[i].parentNode);
if ($.inArray(dataItem, selectedDataItems) < 0) {
selectedDataItems.push(dataItem);
}
}
// selectedDataItems contains all selected data items
}
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
selectable: "multiple, cell"
});
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
</script>