How to remove an Editor when duplicated CKEditor - javascript

I'm using Editor in my web, I want to replace old Editor by new Editor by CKEditor
Those are my js:
<-- js of old editor -->
<link rel="stylesheet" type="text/css" href="../../css/test_style.css">
<script type="text/javascript" src="./se2/js/HuskyEZCreator.js" charset="utf-8"></script>
<script type="text/javascript" src="./se2/js/smarteditor_etest_util.js" charset="utf-8"></script>
<!-- js of new editor -->
<script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script>
This is my HTML:
<table border="0">
<tr>
<td width="640" height="650">
<!-- naver smart editor -->
<!-- <textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"></textarea> -->
<div class="container">
<!-- <h2><label for="editor1">Developer Site Editor</label></h2> -->
<textarea name="ir1" id="ir1"> </textarea>
</div>
<script>
CKEDITOR.replace( 'ir1', {
// Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
// The standard preset from CDN which we used as a base provides more features than we need.
// Also by default it comes with a 2-line toolbar. Here we put all buttons in a single row.
toolbar: [
{ name: 'document', items: [ 'Source' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'CodeSnippet', 'Image', 'Mathjax' ] }, { name: 'styles', items: [ 'Format', 'Styles' ] }
],
...
</script>
<!-- end of naver smart editor -->
</td>
</tr>
</table>
my script:
<script>
var qtype = "<%=qtype%>";
var excount = <%=excount%>;
var cacount = <%=cacount%>;
function OnSave()
{
var form = document.writeForm;
var s = seu_getEditorValidContent('ir1', "Input question.");
if (s) {
form.contents1.value = s;
} else {
return;
}
if(qtype == "2" || qtype == "3") {
if ( excount >=3 ) {
s = seu_getEditorValidContent('ir2', "Please enter example 1.");
if (s) {
form.contents2.value = s;
} else {
return;
}
s = seu_getEditorValidContent('ir3', "Please enter example 2.");
if (s) {
form.contents3.value = s;
} else {
return;
}
}
form.contents10.value = seu_getEditorContent('10');
form.contents11.value = seu_getEditorContent('11');
form.contents12.value = seu_getEditorContent('12');
}
When I use id="ir1" in textarea it still display old editor. How to remove old editor and replace new Editor(CKEditor)?
I deploy and run throught script
Thank you !!

Related

How to display a confirmation Modal with columns data on button click using Datatables

Having the DataTable below, I would like to display a dynamic popup or modal whenever a button is clicked which will serve as a confirmation modal.
The modal should contain data coming from the columns in the respected row in which the button was clicked.
#section scripts
{
<script>
$(document).ready(function() {
var table = $('#visitorsTable').DataTable({
"ajax": {
...
},
"columns": [
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Email" },
{ "data": "PhoneNumber" },
{ "data": "WifiCode" },
],
columnDefs: [
{
targets: [4],
render: function(wifiCode, b, data, d) {
if (wifiCode) {
var content = '<span>' + wifiCode + '</span>';
if (data.Email && data.PhoneNumber) {
content +=
'<button type="button" class="btnResendByMail>Email</button>'
return content;
}
}
}
]
});
$(document).on('click',
'.btnResendByMail',
function() {
$.ajax({
....
});
});
});
</script>
}
I've seen on DataTables site the "responsive" plugin.
However, on their example the modal is triggered always by clicking on the first column, and they display all the data of the row, not specific columns.
Any idea ?
...if I got your question properly, I believe, that's what you're trying to achieve:
srcData = [
{name: 'Albert', lastname: 'Einstein', email: 'emc2#gmail.com', code: 'XOIUE#WL'},
{name: 'Nikola', lastname: 'Tesla', email: 'firebolt#hotmail.com', code: 'OUWelks'},
{name: 'Rudolf', lastname: 'Hertz', email: 'radiohead#yahoo.com', code: 'joi23.xs'},
{name: 'James', lastname: 'Maxwell', email: 'magneto#gmail.com', code: 'Moiu23s'},
];
var dataTable = $('#mytable').DataTable({
sDom: 't',
data: srcData,
columns: [
{title: 'Name', data: 'name'},
{title: 'Lastname', data: 'lastname'},
{title: 'e-mail', data: 'email'},
{
title: 'Wi-Fi code',
data: 'code',
render: (data) => data+'<button style="float:right">e-mail</button>'
}
]
});
$('#mytable').on('click', 'button', event => {
let rowData = dataTable.row($(event.target).closest('tr')).data();
alert(`Are you sure you wanna send wi-fi code "${rowData.code}" to that sneaky bastard ${rowData.name} on his e-mail (${rowData.email})?`);
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>

Ckeditor event handle

I have a table, I want each cell can be editable.
I each cell can be editable when user click on a cell.
My code can done the job well, I want the updated data can be updated to server database when the editing complete, so I capture the blur event to do so, the problem is when I select text color in toolbar, the blur event is triggered also, so, would you tell me to fix the issue? Or is there any other method to get the job done.
Here is my code:
<html>
<head>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script language="javascript" src="ckeditor/ckeditor.js"></script>
<script language="javascript" src="ckeditor/adapters/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
$("[id^='editor']").ckeditor().on("blur",function(){alert($(this).ckeditor().editor.getData());return false;}); </script>
</head>
<body>
<table border=1>
<tr>
<td>
<div id="editor1" contenteditable="true">
<h1>Inline Editing in Action!</h1>
<p>The "div" element that contains this text is now editable.</p>
</div>
</td>
</tr>
<tr>
<td>
<div id="editor2" contenteditable="true">
<h1>Inline Editing in Action!</h1>
<p>The "div" element that contains this text is now editable.
</div>
</td>
</tr>
</table>
</body>
</html>
Here is my config.js
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for a single toolbar row.
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'forms' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'others' },
{ name: 'about' }
];
// The default plugins included in the basic setup define some buttons that
// are not needed in a basic editor. They are removed here.
config.removeButtons = 'Anchor,Underline,Strike,Subscript,Superscript,Link,Unlink,Styles,About,HorizontalRule,Blockquote,Italic,SpellChecker,SpecialChar,Format';
// Dialog windows are also simplified.
config.removeDialogTabs = 'link:advanced';
config.extraPlugins = 'onchange';
};
thank you very much

Attributes of custom nodes not shown in JSON

I have already created a diagram and a custom node following this example.
The problem is, when I try to get the JSON from the diagram, the attributes I've added to the custom node are not shown, although they appear on the lateral panel.
Here's an example:
<html>
<head>
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<style>
.diagram-node-custom .diagram-node-content {
background: url(http://www.saltlakemailing.com/wp-content/uploads/2012/03/process_icon.png) no-repeat scroll center transparent;
}
</style>
<script>
var Y = YUI().use('aui-diagram-builder',
function(Y) {
Y.DiagramNodeCustom = Y.Component.create({
NAME: 'diagram-node',
ATTRS: {
type: {
value: 'custom'
},
customAttr: {
validator: Y.Lang.isString,
value: 'A Custom default'
}
},
EXTENDS: Y.DiagramNodeTask,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
}
});
Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;
Y.diagramBuilder = new Y.DiagramBuilder(
{
boundingBox: '#myDiagramContainer',
fields: [
{
name: 'name1',
type: 'custom',
customAttr: 'VALUECUSTOM',
xy: [100, 100]
}
],
srcNode: '#myDiagramBuilder'
}
).render();
}
);
</script>
</head>
<body>
<div id="myDiagramContainer">
<div id="myDiagramBuilder"></div>
</div>
<button onClick="console.log('JSON: '+JSON.stringify(Y.diagramBuilder.toJSON()));">GET JSON</button>
</body>
</html>
And this is the JSON I get when I do Y.diagramBuilder.toJSON():
{"nodes":[{
"transitions":[],
"description":"",
"name":"name1",
"required":false,
"type":"custom",
"width":70,
"height":70,
"zIndex":100,
"xy":[100,100]
}]}
The new attribute needs to be added to the SERIALIZABLE_ATTRS array.
Something like that:
this.SERIALIZABLE_ATTRS.push('customAttr');
I created a JSFiddle example: http://jsfiddle.net/aetevpfn/

Kendo Grid command column - how to replace buttons with icons?

I have locked command column in the Grid (see image below).
I would like to replace default buttons with custom icons (or with set of icons supplied with Kendo).
How can I easily do it?
I tried to find something in documentation but without luck.
Thanks for any advice.
EDIT: added button code
command:
[
{
name: "destroy",
text: $translate.instant('REMOVE'),
className: "btn-destroy"
},
{
name: "detail",
text: $translate.instant('DETAIL'),
click: function(e) {
var clickedRow = this.dataItem($(e.currentTarget).closest("tr"));
var id = clickedRow.id;
GlobalHelperService.redirectTo("/milestone-sequences/detail/"+id);
return false;
}
}
],
You can also use imageClass or iconClass within the command. I'm not sure what the difference is, but either one seems to work.
Thanks OnaBai, for the working example that I could fork.
Note, I added the FontAwesome stylesheet to easily swap out the icon via a class.
$(document).ready(function(e) {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
command: [
{
name: "onabai",
text: " ",
imageClass: "fa fa-trash",
//iconClass: "fa fa-trash",
click: function (e) {
alert ("clicked");
}
}
]
}
],
dataSource: [ { name: "Jane Doe" } ]
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.web.min.js"></script>
<div id="grid"></div>
If you don't want to manipulate the HTML generated by KendoUI you can simply play with the definition and CSS.
If your command definition is something like:
columns: [
{
command: [
{
name: "onabai",
text: " ",
click: function (e) {
alert ("clicked");
}
},
...
]
},
...
You can define the following CSS for changing the button to only your custom icon:
.k-grid-onabai, .k-grid-onabai:hover {
background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
background-position: 192px -248px;
min-width: 32px !important;
min-height: 32px !important;
}
i.e. set text to an empty space ( ) and if the name of the command is onabai you need to define there the styles k-grid-onabai and k-grid-onabai:hover.
A running example following:
$(document).ready(function(e) {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
command: [
{
name: "onabai",
text: " ",
click: function (e) {
alert ("clicked");
}
}
]
}
],
dataSource: [ { name: "Jane Doe" } ]
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.web.min.js"></script>
<div id="grid"></div>
<style>
.k-grid-onabai, .k-grid-onabai:hover {
background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
background-position: 192px -248px;
min-width: 32px !important;
min-height: 32px !important;
}
</style>
The easy way : Just add the bootstrap icons on text property and override imageClass and iconClass with ""
command: [{
name: "destroy",
text: "<span class='glyphicon glyphicon-remove'></span>",
imageClass: "",
iconClass: "",
}]

JQWidgets jqxGrid with jqxDropDownList as editor

Could someone provide the proper implementation method for utilizing the jqxDropDownList with checkboxes enabled as a grid column?
The following code is modified from the jqwidgets grid demo code ‘cellediting.htm’.
I've implemented an independent dropdownlist with checkboxes with no problems.
I've implemented a grid with dropdownlist (with out checkboxes) with no problems.
however, as soon as i put checkboxes: true in the initeditor i get the following error:
Uncaught TypeError: Cannot read property ‘instance’ of undefined jqxlistbox.js:7
In certain ‘more complicated’ scenarios, the checkboxes property will succeed with ‘createeditor’, but fail with initeditor.
This leads me to believe there is probably some asynchronous loading going on and im building the editor too quickly.
The following code fails because of the ‘checkboxes: true’ property. remove that and it works great.
<head>
<title id='Description'>In order to enter in edit mode, select a grid cell and start typing, "Click" or press the "F2" key. You
can also navigate through the cells using the keyboard arrows or with the "Tab" and "Shift + Tab" key combinations. To cancel the cell editing, press the "Esc" key. To save
the changes press the "Enter" key or select another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will toggle the check state.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data =
[
{ firstname: 'joe', lastname: 'smith', sex: 'm' },
{ firstname: 'john', lastname: 'doe', sex: 'm' },
{ firstname: 'jane', lastname: 'doe', sex: 'f' }
];
var source =
{
localdata: data,
datatype: "array",
updaterow: function (rowid, rowdata, commit) {
commit(true);
},
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'sex', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 685,
source: dataAdapter,
editable: true,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
{ text: 'Last Name', columntype: 'textbox', datafield: 'lastname', width: 80 },
{ text: 'Sex', columntype: 'dropdownlist', datafield: 'sex', width: 195,
createeditor: function(row, cellvalue, editor)
{
var mydata =
[
{ value: "m", label: "Male" },
{ value: "f", label: "Female" }
];
var mysource =
{
datatype: "array",
datafields:
[
{ name: 'label', type: 'string' },
{ name: 'value', type: 'string' }
],
localdata: mydata
};
var myadapter = new $.jqx.dataAdapter(mysource, { autoBind: true });
editor.jqxDropDownList({ checkboxes: true, source: myadapter, displayMember: 'label', valueMember: 'value' });
}
}
]
});
// events
$("#jqxgrid").on('cellbeginedit', function (event) {
var args = event.args;
$("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
$("#jqxgrid").on('cellendedit', function (event) {
var args = event.args;
$("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid"></div>
<div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
<div id="cellbegineditevent"></div>
<div style="margin-top: 10px;" id="cellendeditevent"></div>
</div>
</div>
</body>
</html>
Can anyone offer assistance?
Extra help!!
Additionally, it seems like once i select a value in the dropdown, the actual ‘value’ gets changed to the display ‘label’. i.e., (“Male” or “Female”), but in this example, the only valid data for the sex field would be ‘m’ or ‘f’.
I've asked the same question on the jqwidgets official forums (here: http://www.jqwidgets.com/community/topic/dropdownlist-with-checkboxes-as-grid-column-editor/), and will post any answer they send here if they beat the community to it.
As far as I know, there is no DropDownList with Checkboxes Editor in the jQwidgets Grid. If there was such, I think that jQWidgets would at least have a sample about it so I suppose that you cannot use the DropDownList in such way in the jqxGrid widget.
I know that this is a rather old post, but still...
I'm surprised to see the response from the JQWidgets team, since they themselves have such an example on their website, using a dropdownlist with checkboxes as a grid editor.
It is available at http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellcustomediting.htm
where the editor is used in the Products column.
Mihai

Categories