I need Multiple CKEditor in IFRAME Yii.
I have followed the
link
its works for Without IFRAME but I have a popup dialog with an IFrame
Iframe works with Single instance editor but i need it mulipte
Code for Single Instance :
<?php echo $form->textArea($model, 'message', array('id'=>'question_editor','maxlength'=>508)); ?>
<script src="<?php echo Yii::app()->baseUrl.'/assets/ckeditor/ckeditor.js'; ?>"></script>
<script type="text/javascript">
CKEDITOR.config.toolbar_MA=[ ['Format','Bold','Italic','Underline','-','Superscript','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','NumberedList','BulletedList','-','Outdent','Indent'] ,{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },{name: 'insert',items:['Table','Image']},['Templates']];
CKEDITOR.replace( 'question_editor', { toolbar:'MA', height:'140px',width: '95%' } );
</script>
Please anyone help me to proceed for Multiple CKEditor instance in IFRAME
Create another text area using Yii code or HTML, change the name and id per your naming convention
<textarea name="question_editor2" id="question_editor2" rows="10" cols="80">
This is second editor.
</textarea>
Replace the textarea with CKEDITOR
<script>
CKEDITOR.replace( 'question_editor2' );
</script>
Related
I am trying to create an input tag for an HtmlTemplate function for each file in a folder on my google Drive.
This input tag works, but I'm trying to use variables to set the team (BAL) and the src id:
<input type="image" class="teamLogo" onClick="getTeam('BAL');" src="https://drive.google.com/uc?id=12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h">
This is the scriptlet in my html file:
<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
<input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+"">
<? } ?>
And this is the getTeamLogos function I am calling:
function getTeamLogos(){
var getLogos = DriveApp.getFolderById('redacted').getFiles();
var logos = []
while (getLogos.hasNext()) {
var logo = getLogos.next();
var teamAbbrv = logo.getName();
var logoId = logo.getId();
logos.push([teamAbbrv,logoId])
}
logos.sort()
console.log(logos)
return logos
}
Here's the console.log from the getTeamLogos function:
[ [ 'ANA', '1A8UJAYuKCter4V0gvd6nYP7z8G_QpWzK' ],
[ 'BAL', '12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h' ],
[ 'BOS', '1AVMrn7E3fOlgFc_slCFPGQjFG2eauAKF' ],
[ 'CLE', '1yY76xP_axJfbCmEZoSx2nDlILOaoKIBg' ],
[ 'CWS', '1ZCPbHLQ_iIB8WSQ_sPYELiSw3p23uzc2' ],
[ 'DET', '1GMmqhGr1eeCfoRgNMqliHFehwTopLVQE' ],
[ 'HOU', '1iN-78qrvkT_E7K-CCUZbfdZV_o1vokPk' ],
[ 'KC', '1vd_0mby6wV9qxSA4lvzBNPFi5bLnFsf3' ],
[ 'MIN', '1HP5gArugPbXBlsCKrtYs0cPmIcff-Uf0' ],
[ 'NYY', '1VIAYsnGgIKIG9VIIkcOVib446Wh2Ue1D' ],
[ 'OAK', '1dYECC_EJwc2_e2WGJ_H5W0hvOAmv3w7V' ],
[ 'SEA', '1jRotoBam7UFoCxpOxfBncdr6-JEcsnhq' ],
[ 'TB', '10UlOIjit_K7Vmyna85aAztRuXzULnpb_' ],
[ 'TEX', '1MgZfakotrGTrOotDVCNpehAKlWo7O4wp' ],
[ 'TOR', '1RwmaPY8o5oPYs_hJCiEvvVe3NEE9Kuth' ] ]
But I keep getting a malformed HTML content error:
Exception: Malformed HTML content: <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+""> .
I've tried every combination of single quote, double quote, plus sign, ampersand, can't get the syntax quite right.
I thought that in your HTML, the scriptlets are required to be modified as follows.
From:
<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
<input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+"">
<? } ?>
To:
<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
<input type="image" class="teamLogo" onClick="getTeam('<?= logos[i][0] ?>');" src="https://drive.google.com/uc?id=<?= logos[i][1] ?>">
<? } ?>
The scriptlets are replaced the HTML template with the values of Google Apps Script. Please be careful about this.
Note:
As additional information, in the current stage, when the loop process is used with the HTML template, the process cost will become high. Ref (Author: me) So, in your situation, I thought that the following modification might be able to be used.
HTML side
<?!= values ?>
Google Apps Script side
const html = HtmlService.createTemplateFromFile("index");
html.values = getTeamLogos().map(([a, b]) => `<input type="image" class="teamLogo" onClick="getTeam('${a}');" src="https://drive.google.com/uc?id=${b}">`).join("");
const htmlOutput = html.evaluate();
// You can use htmlOutput to Web Apps, sidebar, dialog, and so on.
Reference:
HTML Service: Templated HTML
Where I am appending my dynamic checkbox items within a loop, I tried adding the additional suffix as seen below:
checkBoxTree.append({ text: plc + " (" + id + ")"}).attr("data-id", id).className = "id-item class";
I get no errors, but the attribute and two classes are not added anywhere. How Is this done?
the attempted above adding this at the end of where I'm writing the new checkbox elems'.attr("data-id", id).className = "id-item class";'
You should not play with Kendo's DOM, it's constantly redrawn. I suggest using template and wrapping the item content's inside a div. Then add any class or data attribute you would need over that div, instead of the item's li. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<script>
let tv = $("#treeview").kendoTreeView({
template: "<div data-id='#= item.id #' class='id-item class'>#= item.text # (#= item.inStock #)</div>",
dataSource: [
{ text: "foo", inStock: 7, items: [
{ text: "bar", inStock: 2 },
{ text: "baz", inStock: 5 }
] }
]
}).data('kendoTreeView');
tv.append({ text: 'abc', id: 10, inStock: 1000 });
</script>
</body>
</html>
Dojo
If you inspect above tree's abc node, you will see...
I have the following function to open the Wordpress Media Uploader within the main php file of a Wordpress plugin. The problem is getting the javascript to fire:
function media_uploader_enqueue() {
wp_enqueue_media();
wp_register_script( 'media-uploader', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array( 'jquery', NULL, false ) );
wp_enqueue_script( 'media-uploader');
}
add_action( 'admin_enqueue_scripts', 'media_uploader_enqueue');
and the following in media-lib-uploader.js
jQuery(document).ready(function($){
var mediaUploader;
$('#upload_image_button').click(function(e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#background_image').val(attachment.url);
});
mediaUploader.open();
});
});
This is the html for the settings page:
<input type="text" id="background_image" name="background_image" value="<?php echo get_option('background_image'); ?>" /><input id="upload_image_button" class="button" type="button" value="Upload Image" />
I cannot find the error within the code. I have even tried;
wp_deregister_script
Have I registered and enqueued the javascript correctly? Or is there a problem with the javascript itself?
Fixed the issue once I defined this function ahead of all others in my main plugin php file. Simple!
So I have an app that shows expenses of a person. I made the view to add a new expense, but I don't know how to make the save button so it saves the expense in the db and redirects to the list of expenses.
The view has many fields like this:
<div id="selBxChSt" data-bind="dxLookup: {
dataSource: dsExpenses,
valueExpr: 'NAME',
displayExpr: 'NAME',
title: 'Expense',
searchEnabled: true,
value: selectedExpense
}">
</div>
And not only dxLookup, also dxTagBox,dxDateBox and dxTextArea.
I made the reset button, to set all fields to their default value. But I don't know how to save them to the firebird db.
This is the html for the button:
<div class="Column" data-bind="dxButton: {icon: 'todo', text: 'Save', type: 'normal', onClick: expenseSave}"></div>
So now I have to make a function in knockoutJS to save all the things the user chooses from the lookups.
I have no idea how to do this, I'm new to knockout.js and devexpress, so any idea or tips would be amazing, thank you!
To implement "old-school" form that submits data to a server-side go this way:
Wrap all editors and submit button with the form tag.
Use the useSubmitBehavior option for dxButton.
Set the name option for editors.
Your code should be like below:
<form action="your-action" method="post" data-bind="event: { submit: onFormSubmit }">
<div data-bind="dxTextBox: { name: 'login' }"></div>
<!-- other editors... -->
<div data-bind="dxButton: { text: 'Submit', useSubmitBehavior: true }"></div>
</form>
View model:
viewModel.onFormSubmit = function() {
// Here you can implement a custom logic before submit. Validate editors, for instance.
};
Refer this sample, as well.
I'm totaly net to javascript and ExtJS. So maybe someone can help me.
I want to display ExtJS made form on Web page when I call javascript method.
The code is:
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Car Wiki</title>
<link rel="stylesheet" type="text/css" href="extJSLib\extjs-4.1.1\resources\css\ext-all.css">
<script type="text/javascript" src = "extJSLib\extjs-4.1.1\ext-all-dev.js"></script>
<link rel ="stylesheet" type="text/css" href="mainPageStyle.css">
<script type = "text/javascript" src="mainPageScript.js"></script>
</head>
<body>
<div class="mainForm" >
<div id="mainPanel">
<script>mainModule.testMethos();</script>
</div>
</div>
</body>
</html>
mainPageScript.js
(function(exports){
exports.testMethos = function()
{
var formPanel = Ext.create('Ext.form.Panel',{
title: 'Search Form',
width:300,
height:200,
layout: 'anchor',
defaults:
{
anchor:'80%'
},
renterTo: document.body,
items:[
{
xtype: 'textfield',
fieldLabel: 'Car Name',
name: 'carName',
labelAlign: 'top',
cls: 'field-margin',
flex:1
},
{
xtype: 'textfield',
fieldLabel: 'Car Model',
name:'carModel',
labelAlign:'top',
cls:'field-margin',
flex: 1
}
]
});
};
} )(this.mainModule = {});
where is my mistake? (do not say, that in my genetic code :D)
First mistake is your use of Ext.onReady as this is an event which gets fired when the framework has finished loading.
Trying to use it within a function call like you have makes no sense, so just remove this altogether and just keep your form code.
Alternatively, you can still use Ext.onReady but it should be used in the main script block of your html file, that and your form code should be moved there.
I have got your form to display using this approach, you can see this working here
Fiddle above