We Keep Coding

tinyMCE 6 insert link to server side content

I'm upgrading an old internal system used in my academic department. The page that I'm rewriting allows users to modify webpages containing information and content relevant to a course. The old system is using cleditor which I am replacing with the free version of tinyMCE 6.2.0.
One of the functionalities that needs to be replaced is a custom button that brings up a list of URLs to uploaded content and then turns the highlighted text into a link to the selected content (example of this in current system). I have been able to create my own custom button, and I have found the panel and selectbox features, but I haven't found how to populate the list in selectbox using a URL like one can for link_list.
Below is an example of the javascript that I have:
tinymce.init({
selector: '.course_page_editor',
toolbar: 'custContentLink',
setup: (editor) => {
editor.ui.registry.addButton('custContentLink', {
text: 'Insert Content Link',
onAction: (_) => insert_content_link_dialog(tinymce.activeEditor)
});
}
});
function insert_content_link_dialog(editor)
{
editor.windowManager.open({
title: 'Insert Content Link',
body: {
type: 'panel',
items: [{
type: 'selectbox',
name: 'content_list',
label: 'Choose the file that the link should point to:',
size: 5,
//TODO: generate list of uploaded content URLs
items: [
{text: 'Primary', value: 'primary style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
flex: true
}]
},
onSubmit: function () {
//TODO: replace highlighted text with selected link
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Add content link',
type: 'submit',
primary: true,
enabled: true
}
]
});
};
How do I create a popup list of links to server side content

My original process was overly complicated. TinyMCE has the link_list functionality which does exactly what I'm looking for. I then created a page to return a JSON array of link items as outlined in this other question I asked.

explicitly release sweetalert popup after ajax call

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()

CKEditor only show dialog window once

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!

tinyMCE plugin accessing element

I'm trying to write a tinymce plugin, so I checked out the tutorial "Creating a plugin" on http://www.tinymce.com/. Inserting and Replacing Content is no problem, everything works fine.
Now i want to change the value of the textbox automatically after changing the value of the listbox. As an example, after changing the listbox element, the value of the active element should be written to the textbox above. How can I access this element?
tinymce.PluginManager.add('myexample', function(editor, url) {
// Add a button that opens a window
editor.addButton('myexample',
{
text: 'Example',
onclick: function()
{
// Open window
editor.windowManager.open({
title: 'Example Plugin',
body: [
// Text
{type: 'textbox', name: 'title', label: 'Text', value: 'temp'},
// Listbox
{type: 'listbox', name: 'test', label: 'Ziel',
'values':
[
{text: 'Eins', value: '1'},
{text: 'Zwei', value: '2'}
],
onselect: function(v)
{
console.log(this.value());
// CHANGE THE VALUE OF THE TEXTBOX ...
// ????
}
}
],
onsubmit: function(e)
{
console.log(e.data.title, e.data.test);
}
});
}
});
});

I know this is an old question, but I was facing the same issue and I found this answer in another forum that saved my day.
The standard tinymce way to do this is to save the popup window in a variable:
var win = editor.windowManager.open({ //etc
And then for accessing the element:
win.find('#text'); // where text is the name specified
I hope this can help someone else in the future.

Now I found a solution. The best method is not to use the internal form-designer. You can use an IFrame with an external html-page, then you can work with document.getElementById(...)
Here you can find an example

Added an enter event to EXT JS Application search text box to fire search

Hi I have the code below my my enter event is never triggering, any help will be appreciated.
items: [{
xtype: 'textfield',
id: 'idhere',
name: 'namehere',
fieldLabel: 'lablehere:',
width: 500,
handler: {
key:13,
fn : function () {
if (e.getKey() == e.ENTER) {
alert("You pressed an enter button in text field.");
}
}
}
},{
xtype: 'button',
text: 'texttodisplay',
handler: function() {
//my function.
}
}]
I actually solved this by using:
listeners: {
specialkey: function (f,e) {
if (e.getKey() == e.ENTER) {
loadData();
}
}
}

I am not sure why Sencha never included Ext.ux.form.SearchField in the API docs but the component has been included in all versions of the framework I've used. It is set-up to fire a submit and a cancel event and includes the appropriate search and cancel buttons attached to the field.
You can find it in your framework files at: [extjs-root]\examples\ux\form\SearchField.js
I would recommend using that component instead of trying to create your own searchfield. I usually override the default search function to fit my own needs but there have been a few scenarios where I did not need to also.
If you add a requires statement at the top of your component JS you can create it like any other (non-UX) component:
E.g:
Requires statement:
Ext.define('MyApp.view.SomeComponent', {
extend: 'Ext.grid.Panel',
alias: 'widget.mycomponent',
requires: [
'Ext.ux.form.SearchField'
],
...
Creating a search field in the panel's bottom toolbar:
bbar: {
items: [{
text: 'A Button'
}, {
text: 'Another Button'
}, '-', {
xtype: 'searchfield', // <- can use this xtype with requires stmt
itemId: 'search',
width: 250,
emptyText: 'Enter first and last name to search...'
}]
},
...
If you have trouble with the requires statement you could also just create it like this:
var search = Ext.create('Ext.ux.form.SearchField', {
itemId: 'search',
width: 250,
emptyText: 'Enter first and last name to search...'
});

Just to supply how to add such a listener. There is a specialkey event that can be used for such a case
fieldinstance.on('specialkey', function(f, e){
if (e.getKey() == e.ENTER) {
// your action
}
});
Anyway I recommend to use the ux component that #Geronimo mentioned