Hello I have been stuck on this for the past day.
I made a plugin for the CKEditor, when a user clicks the record button, a dialog opens up with language selection. Once the user selects the language they begin recording their speech. The problem is when the user ends the speech recognition and they want to record sometime later they are again prompted by the dialog window to select a language again. I want to make it so when the user selects a language and they click record, the dialog window doesn't pop up again.
CKEDITOR.plugins.add('speechtotext', {
init: function(editor) {
editor.ui.addButton('RecordButton', {
label: 'Speech to Text',
command: 'record',
toolbar: 'insert',
});
//Button to end recording
editor.ui.addButton('StopButton', {
label: 'End Speech to Text',
command: 'stop',
toolbar: 'insert',
});
//Command to end Speech to Text Recording
editor.addCommand('stop', {
exec: function() {
//stopRecording();
}
});
//Register the "recordDialog", returns the Dialog object
CKEDITOR.dialog.add('recordDialog', function() {
//The definition of the Dialog(the dialog window itself).
return {
title: 'Speech to Text Language Selection',
contents:
[{
elements:
[{
type: 'select',
id: 'languageSelect',
label: 'Select Language',
items:
[
//items
],
default: 'english',
onChange: function() {
languageOption = this.getValue();
console.log(languageOption);
languageSelected = true;
}
}]
}],
//The code that will execute ok button of the dialog window is pressed.
onOk: function() {
//start recording(){}
}
};
});
if(languageselected === false){
//opens up dialog window to prompt user for language selection
editor.addCommand('record', new CKEDITOR.dialogCommand('recordDialog'));
}else{
editor.addCommand('record', {
exec: function() {
//startrecording without prompting user to select language again
}
});
}
}
});
Whenever i select a language i say languageSelected = true;
so that next time i'm not prompted for another language selection but this does nothing its like it never runs.
I'm starting to think that maybe I somehow have to destroy the plugin instance and reload it again so that next time it calls the 'record' command without the dialog.
if(languageSelected === false){
//opens up dialog window to prompt user for language selection
editor.addCommand('record', new CKEDITOR.dialogCommand('recordDialog'));
}else{
editor.addCommand('record', {
exec: function() {
//startrecording without prompting user to select language again
}
});
}
Any suggestions on how to get this working? Thanks!
Related
Actually, I want to show the attributes of clicked/selected element in the dialog, first, it does properly but when I close the dialog and open for any other element its show the prev attributes list because let listAttrElements = getListOfItems(elAttributes);
this line won't run again until reloading the page.
I just want to update the list whenever the modal opens for a single element, close open again for another element then values should be as per another element.
// Our dialog definition.
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
let selection = editor.getSelection();
let element = selection.getStartElement();
let elAttributes = Object.keys(element.getAttributes());
let listAttrElements = getListOfItems(elAttributes);
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Attributes',
minWidth: 400,
minHeight: 200,
// Dialog window content definition.
contents: [
{
// Definition of the Basic Settings dialog tab (page).
id: 'basic',
// label: 'Basic Settings',
// The tab content.
elements: listAttrElements
}
],
// Invoked when the dialog is loaded.
onShow: function() {
console.log('here in on show');
},
// This method is invoked once a user clicks the OK button, confirming the dialog.
onOk: function() {
CKEDITOR.dialog.getCurrent().reset();
},
onLoad: () => {
console.log('loaded')
}
};
});
function getListOfItems (attrObj) {
return attrObj.map ((el, index) => { return {
// Text input field for the abbreviation text.
type: 'checkbox',
id: index,
label: el,
// Called by the main setupContent method call on dialog initialization.
setup: function( element ) {
console.log('new setuop require')
this.setValue( element.getText() );
},
// Called by the main commitContent method call on dialog confirmation.
// set value onchange
commit: function( element ) {
element.setText( this.getValue() );
}
}});
}
Thanks in advance for the help!
https://github.com/ckeditor/ckeditor4/issues/4906#issuecomment-927666316
This is how I solved it:
editor.on('dialogHide', function (evt) {
if (evt.data.getName()=== 'abbrDialog') {
editor._.storedDialogs['abbrDialog'] = false
}
});
I use MessageBox of ExJS framework to show dialog with "Ok" button.
// app.js
function showNoteMessage (title, message, fn, scope) {
return Ext.Msg.show({
title: 'Title example',
message: 'Message text',
buttons: Ext.MessageBox.OKCANCEL,
promptConfig: false,
fn: function () {
if (fn) {
fn.apply(scope, arguments);
}
},
scope: scope
});
}
// index.html
<button onclick="showNoteMessage()">Open dialog several times</button>
Steps to reproduce:
Open dialog with provided two buttons "Ok" and "Cancel".
Click on the "Ok" button
Open dialog one more time.
When you click on "Ok" one more time, the dialog gets stuck on the screen and unlock all content behind it.The buttons inside the dialog are disabled.
Current version Ext.js 2.4.2.571.
After click on "Ok" button or "Cancel", gray background disappears and dialog gets stuck with unlocking content under it. I try to wrap Ext.Msg.show into setTimeout but it looks like it works only locally.
Update
I continue working on this bug and found out that issue can be in this function:
// MessageBox.js
...
onClick: function(button) {
if (button) {
var config = button.config.userConfig || {},
initialConfig = button.getInitialConfig(),
prompt = this.getPrompt();
if (typeof config.fn == 'function') {
button.disable();
this.on({
hiddenchange: function() {
config.fn.call(
config.scope || null,
initialConfig.itemId || initialConfig.text,
prompt ? prompt.getValue() : null,
config
);
button.enable();
},
single: true,
scope: this
});
}
}
this.hide();
},
...
For some reason on the step with broken click it skips this part of code:
this.on({
hiddenchange: function() {
config.fn.call(
config.scope || null,
initialConfig.itemId || initialConfig.text,
prompt ? prompt.getValue() : null,
config
);
button.enable();
},
single: true,
scope: this
});
The issue was related to the old version of ExtJS. I was not able to update it, so found a workaround: to disable animation like this:
// app.js
...
Ext.Msg.defaultAllowedConfig.showAnimation = false;
Ext.Msg.defaultAllowedConfig.hideAnimation = false;
...
I am using angular-silkgrid with angular 7. I am using inline editing feature. I am using single select editor for inline edit. Currently I want to achieve this functionality:
As soon as user click on the editable field , the select drop down will be visible.On select any option from select dropdown the inline mode should exist and column value should be updated.
currently I need to click on other field to exit from inline mode(I want to achieve this on select option select)
editor: {
// display checkmark icon when True
enableRenderHtml: true,
// tslint:disable-next-line:max-line-length
collection: [{
value: 1,
label: 'Sucessful'
}, {
value: 2,
label: 'Unsucessful'
}],
model: Editors.singleSelect, // CustomSelectEditor
elementOptions: {
autoAdjustDropPosition: false,
onClick: (event, rr) => {
// here i want to write some code which can trigger to grid to start update
}
}
}
Thanks All for the answers. I have solved my issue as below:
editor: {
enableRenderHtml: true,
collection: [{ value: CCLStaus.Sucessfull, label: 'Sucessful' }, { value: CCLStaus.UnSucessfull, label: 'Unsucessful' }],
model: Editors.singleSelect,// CustomSelectEditor
elementOptions: {
onClick: (event) => {
const updateItem = this.angularSilkGrid.gridService.getDataItemByRowIndex(this.rowInEditMode);
updateItem.status = +event.value;
this.angularSilkGrid.gridService.updateItem(updateItem, { highlightRow: false });
this.angularSilkGrid.gridService.renderGrid();
}
}
}
Generally,
grid.getEditorLock().commitCurrentEdit()
will commit and close the editor.
Also, any of
grid.navigateRight()
grid.navigateLeft()
grid.navigateDown()
grid.navigateUp()
grid.navigateNext()
grid.navigatePrev()
will commit and exit gracefully. In the select2 editor, you'll notice:
this.init = function () {
...
// Set focus back to select2 element on closing.
$input.on('select2:close', function (e) {
if ((e.params.originalSelect2Event && e.params.originalSelect2Event.data)
|| e.params.key === 9) {
// item was selected with ENTER or no selection with TAB
args.grid.navigateNext();
} else {
// closed with no selection
setTimeout(function () {
$input.select2('focus');
}, 100);
}
});
};
this.destroy = function () {
$input.select2('destroy');
$input.remove();
};
, noting that args.grid.navigateNext() will commit and close the editor, including calling the destroy() method at the appropriate time.
From the Angular-Slickgrid Editor Example there's a checkbox in the example to auto commit and that is a setting to you need to enable in your Grid Options
this.gridOptions = {
autoEdit: true,
autoCommitEdit: true,
}
The lib will internally call grid.getEditorLock().commitCurrentEdit() like Ben wrote in his answer, in Angular-Slickgrid you can just set the autoCommitEdit flag that I added.
I'm using sweetalert to ask user for an input to rename a tag. And then I make an ajax call to change the tag on server. If succeeded, I call a small callback function(postAction) which will update the UI and renamed the tag on UI. It works fine as long as little call back function has a statement "swal("done!");", so user clicks on this little confirmation message box, and sweetalert message box is released. I'm trying to see if there is a function I can call to release the input sweetalert pop up without the additional "swal("done")" statement, so user will have 1 less click. Is there an easy way to do this?
All I can find now is to add a timer in the second pop up. swal("Done!", {timer: 500}); It's OK but not ideal.
renameTag = function(tagId)
{
swal({
title: "Rename Gallery Tag",
text: 'Please provide a new tag name',
content: "input",
button: {
text: "OK",
closeModal: false,
},
})
.then(name => {
var tagName = name.trim();
if (tagName.length == 0)
{
swal({
title: "Rename Gallery Tag Failed",
text: "Tag name cannot be empty",
icon: "error",
button: "OK",
});
return;
}
else
{
ajaxAction("POST"
, "/User/RenameGalleryTag"
, { 'index': tagId, 'name': tagName }
, "rename gallery tag"
, {
'reload': false
, postAction: function () {
$(".selected-tag").text(tagName);
swal("done!");
}
});
}
})
}
You should be able to close it like this
swal.close()
Please any one help me. I need the tinyMCE popup textbox validation. how to validate the textbox when click on ok Here i use the code below.
tinymce.PluginManager.add('weblink', function(editor, url) {
editor.addButton('weblink', {
text: 'Web Link',
icon: false,
onclick: function() {
editor.windowManager.open({
title: 'Web Link',
body: [
{type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
{type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
],
onsubmit: function(e){
var weblinkTxt = "href='"+e.data.weburl+"'";
if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
{
editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
}
else
{
editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
}
}
});
}
});
});
I just came across the need to validate the input from a dialog in TinyMCE as well. Unfortunately, it seems there is no native way to do it. However, I found a way to do it, using e.preventDefault().
The idea is to use the e.preventDefault() right after the submit function starts, and manage the dialog window afterwards. This way, it is possible to validate the input:
If it is not valid, then show a warning to the user and do nothing to the dialog window. It will be kept open, and the user will have to insert a new value;
If it is valid, then close the window dialog and continue the method to do whatever you want.
Applied to you example, it would be like this:
tinymce.PluginManager.add('weblink', function(editor, url) {
editor.addButton('weblink', {
text: 'Web Link',
icon: false,
onclick: function() {
editor.windowManager.open({
title: 'Web Link',
body: [
{type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
{type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
],
onsubmit: function(e){
//this will prevent TinyMCE from closing the window dialog
e.preventDefault();
/*here you apply your validations to e.data.weburl
and to e.data.caption*/
if(isNotValid){
/*The validation failed, so let's tell the user about it.
The empty function is to let TinyMCE know that it should
do nothing when clicking on the "OK" button. Without it,
I experienced different behaviour when clicking on
"OK" and when pressing "Enter".*/
editor.windowManager.alert('Invalid input!', function(){});
} else {
/*It is valid, so let's first close the
dialog window, and then do what you want*/
editor.windowManager.close();
var weblinkTxt = "href='"+e.data.weburl+"'";
if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
{
editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
}
else
{
editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
}
}
}
});
}
});
});
Hope this can still help you or anyone also facing this problem!