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.

pass object literal from function into json array

I have a javascript function from creating localized strings as follows...
let strings = new LocalizedStrings({
en:{
sites:"Sites",
addSite:"Add a new site",
online:"Online"
},
it: {
sites:"Siti",
addSite:"Aggiungi un nuovo sito",
online:"in linea"
}
});
I use this in my page like this..
<p>
{strings.sites}
</p>
My question is how do I pass this into my JSON because I need to update the column headings in my table which uses JSON to define this (see the 'name' heading)...
const columns = [
{
name: 'Id',
selector: 'id',
sortable: true,
hide: 6000,
},
{
name: '{strings.online}',
selector: 'cloudAccessEnabled',
sortable: true,
minWidth: '10px',
center: true,
cell: row => (
<MDBIcon icon="circle"
className={row.cloudAccessEnabled === true ? 'green-text' : 'red-text'} />
)
},

I would suspect that something like strings.online without the quotes or curly braces should work.
Or invoking the function strings.getString("online")
But this is only an assumption, because I think you are using React but I am not sure.

Zend_Dojo_Form Elements aren't proper working

Now I tried a bit around with Zend_Dojo_Form. The elements do not work like expected. The only element which is working is the checkBox.
To see for everybody here a screenshot:
Here a snippet of my formclass:
$this->addElement('DateTextBox','datum',array(
'label' => 'datum',
'datePattern' => 'dd-MM-yyyy',
'required' => 'true'
));
$this->addElement('TimeTextBox','zeit',array(
'label' => 'Uhrzeit',
'timePattern' => 'HH:mm',
'required' => 'true'
));
$this->addElement('CheckBox','test',array(
'label' => 'ja Nein',
'checkedValue' => 'yes',
'uncheckedValue' => 'nein',
'checked' => 'true'
));
$this->addElement('editor','test1',array(
'label' => 'Editor',
'plugins' => array('redo',
'undo','|','bold','italic','underline'),
'editActionInterval' => 2,
'height' => '100px'
));
My form extends Zend_Dojo_Form
I want to use date and time, don't mind I tried the others also to see if Zend_Dojo is found.
The date and time elements don't drop down on click, they just show like in the screenshot an X and a second row.
EDIT:
I have the dojo like follows in my application.ini
resources.view.helperPath.Zend_Dojo_View_Helper = "Zend/Dojo/View/Helper"
In my layout.phtml:
if ($this->dojo()->isEnabled()){
$this->dojo()->setCdnBase(Zend_Dojo::CDN_BASE_GOOGLE);
$this->dojo()->setCdnDojoPath(Zend_Dojo::CDN_DOJO_PATH_GOOGLE);
//$this->dojo()->requireModule('dijit.form.DateTextBox');
echo $this->dojo();
}
Do I need something else?

now it works, because I tried around to solve my errors the stylesheet was missing. So I added in my layout.phtml the stylesheet:
$this->dojo()->addStyleSheetModule('dijit.themes.tundra');

How to customize default data-confirm dialog box in Yii2 Gridview

I want to change the browser's default confirm dialog (data-confirm) box which comes on click of delete button.
I want to replace this with custom dialog box.
Following is my Gridview Code:
<?=
GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
//['class' => 'yii\grid\SerialColumn'],
'account',
'code',
[
'class' => 'yii\grid\ActionColumn',
'header' => 'Action',
'template' => ' {update} {delete}',
'buttons' => [
'update' => function ($url, $model) {
return Html::a('<span class="btn-xs btn-primary">Edit</span>', $url, [
'title' => Yii::t('app', 'Edit'),
]);
},
'delete' => function ($url, $model) {
return Html::a('<span class="btn-xs btn-danger">Delete</span>', $url, [
'title' => Yii::t('app', 'Delete'),
//'data-confirm'=>'Are you sure you want to delete this item?',
'data-method'=>'POST'
]);
}
]
],
],
]);
?>
My JQuery code:
confirm: function (message, title, okAction) {
$("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"Ok": function () {
$(this).dialog("ok");
okAction();
},
"Cancel": function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
},
resizable: false,
title: title,
modal: true
}).text(message);
}
});
$(document).ready(function () {
$(".delete-row").click(function () {
$.confirm("Are you sure you want to delete this item?", "Production Control WF");
});
});
However the confirm dialog box appearing after implementation of this code but simultaneously its redirecting as well without clicking on any button.
Any help would be appreciated.

My answer contains two parts:
Replacing the default confirm-dialog
Using SweetAlert as the replacement
In the first part I explain the procedure to replace the default confirmation-dialog. This is the official and proper way to replace the Yii2-confirm-dialog globally.
In the second (optional) part I show how to use SweetAlert in Yii2 to replace the dialog.
Replacing the default confirm-dialog
Its pretty easy actually since the yii.js was overhauled since the launch of Yii2. You have to create a JS-file which you deploy to your web folder. This is done as follows:
1. Create folder for JS-File
In your web folder create a folder named js (or whatever name you wish)
2. Create the actual JS-File
In the folder from step 1 create a JS-file named for example yii_overrides.js
In this file you override the yii.confirm variable with your own handler-method.
My yii_overrides.js looks like this:
/**
* Override the default yii confirm dialog. This function is
* called by yii when a confirmation is requested.
*
* #param string message the message to display
* #param string ok callback triggered when confirmation is true
* #param string cancelCallback callback triggered when cancelled
*/
yii.confirm = function (message, okCallback, cancelCallback) {
swal({
title: message,
type: 'warning',
showCancelButton: true,
closeOnConfirm: true,
allowOutsideClick: true
}, okCallback);
};
The swal function calls the SweetAlert-Projects beautiful alert-box. Feel free to use whatever confirmation-style or -extension you want. SweetAlert looks awesome though...
3. Add JS-File to your Yii2-asset-bundle
Open assets\AppAsset.php and add your JS-File to assure it will be added to your HTML-header. Your file should look something like this now:
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
//HERE!
'js/yii_overrides.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
//additional import of third party alert project
'app\assets\SweetAlertAsset',
];
}
Also make sure to include the asset of your custom alert-library if necessary. You can see this on the last line of the $depends-variable in the code above.
Adding SweetAlert
If you want to use SweetAlert as well, here is how you do it. There is a yii2-extension available providing you with an asset-bundle, but it is not current and uses old filenames. It therefore doesn't work. But its VERY easy to do it yourself.
1. Add dependency to SweetAlert
In your composer.json add
"bower-asset/sweetalert": "1.1.*"
to the required section and trigger composer update. You now have the necessary files.
2. Create SweetAlertAsset
Create a file named SweetAlertAsset.php next to your AppAsset in the assets-folder of your project. This is the content:
<?php
namespace app\assets;
class SweetAlertAsset extends \yii\web\AssetBundle
{
public $sourcePath = '#bower/sweetalert/dist';
public $css = [
'sweetalert.css',
];
public $js = [
'sweetalert.min.js'
];
}
Reference it within AppAsset as seen further above.
3. Done
Easy, wasn't it!?

Based on Sweet Alert 2.0 updates
i've modify the answer by PLM57
SweetAlert has changed callback functions to promises.
Here is the example override code for promise implementation:
/**
* Override the default yii confirm dialog. This function is
* called by yii when a confirmation is requested.
*
* #param string message the message to display
* #param string ok callback triggered when confirmation is true
* #param string cancelCallback callback triggered when cancelled
*/
yii.confirm = function (message, okCallback, cancelCallback) {
swal({
title: message,
icon: 'warning',
buttons: true
}).then((action) => {
if(action){
okCallback()
}
});
}
For more info on update from 1.x to 2.x, refer to this

Short and simple way.
[
'class' => 'yii\grid\ActionColumn',
'template' => '{view} {update} {delete}',
'buttons' => [
'delete' => function ($url, $model, $key) {
return Html::a('<span class="glyphicon glyphicon-trash"></span>', $url, [
'data-method' => 'post',
'data-pjax' => 0,
'data-confirm' => 'Your message text'
]);
},
]

i think you only need to change $url to #
return Html::a('<span class="btn-xs btn-danger">Delete</span>', "#", [
'title' => Yii::t('app', 'Delete'),
//'data-confirm'=>'Are you sure you want to delete this item?',
'data-method'=>'POST'
]);

extJS login window + rails

I have cotnrol_admin:
def login
if request.post?
if params[:full_name] == "mg" && params[:password] == "123"
data = { :success => 'true', :msg => "Welcome, #{params[:full_name]}"}
#redirect_to :action => :welcome
#render :action => :welcome
else
data = { :failure => 'true', :msg => "Username or Password wrong !"}
end
render :text => data.to_json, :layout => false
end
end
I have this login.js
var loginForm = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 75,
url:'/admin/login',
defaultType: 'textfield',
items: [{
fieldLabel: 'Login',
name: 'full_name',
anchor:'90%' // anchor width by percentage
},{
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
anchor: '90%' // anchor width by percentage
}],
buttons: [{
text: 'Login',
handler: function() {
loginForm.getForm().submit(
{
method: 'POST',
waitMsg:'Submitting...',
reset : false,
success : function() {
loginWindow.close();
},
failure: function(form, action){Ext.Msg.alert('Error',action.result.text)}
});
}
}]
});
var loginWindow = new Ext.Window({
title: 'Login',
width: 300,
height:140,
closable:false,
minWidth: 300,
minHeight: 140,
layout: 'fit',
plain:true,
modal:true,
bodyStyle:'padding:5px;',
items: loginForm
});
Ext.onReady(function(){
loginWindow.show(this);
});
So my questions is: everythings work pefectly. But when i press refresh button this login form comes again, how i can avoid this? I think about session. right? but how to integrate session in extJS or rails?

Yup, you though correctly, you need to use session. If you are beginner read about session management. RoR related session details can be found here.
When you login for the first time, if the user provided the correct information.. you need to create a session and store some info into it(for validating the session). When the use hit the URL again, first you need to check if the session is valid or not. If valid, you can simply forward the user to the application home page. Otherwise, the login page is displayed again.