jQuery UI Widgets › Forums › Editors › Editor › Abount Customization Tool
Tagged: Button, createCommand, custom tool, editor, initContent, Input, jqxButton, jQxEditor, jqxinput, jqxwindow, Tooltip, type, val, value, window
This topic contains 3 replies, has 4 voices, and was last updated by Dimitar 9 years, 3 months ago.
-
Author
-
I want to add new command using createCommand.
When I click the new command button, It first popup a dialog. User can input something in the dailog.
The content from the popup dialog is inserted into content area after a clicking ok button in previous popup dialog.I found a demo the docment, but it can not support my requirement.
$(‘#editor’).jqxEditor({
height: 400,
width: 800,
tools: ‘datetime | print clear | backcolor | font bold italic underline’,
createCommand: function (name) {
switch (name) {
case “datetime”:
return {
type: ‘list’,
tooltip: “Insert Date/Time”,
init: function (widget) {
widget.jqxDropDownList({ placeHolder: “Insert Custom HTML”, width: 160, source: [‘Insert Time’, ‘Insert Date’], autoDropDownHeight: true });
},
refresh: function (widget, style) {
// do something here when the selection is changed.
widget.jqxDropDownList(‘clearSelection’);
},
action: function (widget, editor) {
var widgetValue = widget.val();
var date = new Date();
// return object with command and value members.
return { command: “inserthtml”, value: widgetValue == “Insert Time” ? date.getHours() + “:” + date.getMinutes() : date.getDate() + “-” + date.getMonth() + “-” + date.getFullYear() };//it should popup the dialog first. but how can i insert content later???????
}
}Hello qvbhsskg,
You can get inserted value from the popup dialog and set it to jqxEditor. Here is an example:
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function () { $("#jqxwindow").jqxWindow({ height: 100, width: 300, theme: 'energyblue', autoOpen: false, isModal: true, initContent: function () { $("#input").jqxInput({ placeHolder: "Enter text", height: 25, width: 200, minLength: 1 }); $("#ok").jqxButton({ width: 50, height: 30 }); } }); $('#editor').jqxEditor({ height: 400, width: 800, tools: 'datetime | print clear input | backcolor | font | bold italic underline', createCommand: function (name) { switch (name) { case "input": return { type: 'button', tooltip: "Content", init: function (widget) { widget.jqxButton({ height: 25, width: 60 }); widget.html("<span id='content' style='line-height: 24px;'>Content</span>"); }, refresh: function (widget, style) { // do something here when the selection is changed. }, action: function (widget, editor) { $("#jqxwindow").jqxWindow('open'); $('#ok').on('click', function () { var value = $('#input').jqxInput('val'); $("#editor").jqxEditor('val', value); $('#jqxwindow').jqxWindow('close'); }); } } case "datetime": return { type: 'list', tooltip: "Insert Date/Time", init: function (widget) { widget.jqxDropDownList({ placeHolder: "Insert Custom HTML", width: 170, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true }); }, refresh: function (widget, style) { // do something here when the selection is changed. widget.jqxDropDownList('clearSelection'); }, action: function (widget, editor) { var widgetValue = widget.val(); var date = new Date(); // return object with command and value members. return { command: "inserthtml", value: widgetValue == "Insert Time" ? date.getHours() + ":" + date.getMinutes() : date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() }; } } case "print": return { type: 'button', tooltip: 'Print', init: function (widget) { widget.jqxButton({ height: 25, width: 40 }); widget.html("<span style='line-height: 24px;'>Print</span>"); }, refresh: function (widget, style) { // do something here when the selection is changed. }, action: function (widget, editor) { // return nothing and perform a custom action. $('#editor').jqxEditor('print'); } } case "clear": return { type: 'button', tooltip: 'Clear', init: function (widget) { widget.jqxButton({ height: 25, width: 40 }); widget.html("<span style='line-height: 24px;'>Clear</span>"); }, refresh: function (widget, style) { // do something here when the selection is changed. }, action: function (widget, editor) { // return nothing and perform a custom action. $('#editor').val(''); } } case "backcolor": return { type: 'colorPicker', tooltip: 'Background', init: function (widget) { widget.jqxDropDownButton({ width: 170 }); widget.jqxDropDownButton('setContent', '<span style="line-height: 24px;">Choose Background</span>'); }, refresh: function (widget, style) { // do something here when the selection is changed. }, action: function (widget, editor) { // return nothing and perform a custom action. var color = widget.val(); editor.css('background', color); } } } } }); }); </script> <textarea id="editor"> </textarea> <div id='jqxwindow'> <div>Content</div> <div> <input type="text" id="input" /><br /> <input type="button" id="ok" value="OK" /></div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/I am looking to do something similar. I think the problem line in the solution is $(“#editor”).jqxEditor(‘val’, value); Overwriting the content isn’t what I’m looking for. What I think is really needed is a way to execute an inserthtml command on the editor object. I want to launch some code on the button event and then at some point insert html from an external source, not with an inline object being returned on the event.
Hello mattjh,
Unfortunately, there is no such functionality in jqxEditor. If you wish, you can combine your external HTML with the current value by getting it with val and then concatenating it with the new HTML before updating the editors value again with val.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.