Webix: Text editor integration issue with tabview - ckeditor

There seams to be an issue with tabview and text editor integration. The editor displays and works fine as long as the user does not switch tabs. When the user switches tab and comes back to the tab where the text editor is integrated, the contents of the editor disappears and becomes irresponsive (can't type text in it).
I have tested this with the following editors with different results:
ckeditor - value is reset, component becomes irresponsive
tinymce - value is reset, component becomes irresponsive
mercury - value is reset but component works (you can type text anew).
nicedit - Works!
Here is sample code definition.
webix.ui({
container: 'richtext-div',
view: "tabview",
cells:[{
header: 'Tab 1',
view: 'form',
elements: [{
view: 'ckeditor',
width: 800,
height: 500,
value: 'This is a test value for the rich text component'
}]
},{
header: 'Tab 2',
rows: [{
template: 'This is the second tab'
}]
}]
});
Anyone has resolved this issue before, please advise. Tnx.
Lefteris

You can the keepView property
http://docs.webix.com/api__ui.multiview_keepviews_config.html
It changes the logic of multiview, to preserve iframe based views ( such as ckeditor and others )
view: "tabview",
multiview:{ keepViews:true },
cells:[{
Here is a spippet http://webix.com/snippet/8b9f24ea

Do you know how Webix handles the switching of tabs?
I suspect that when the tabs are switched that its accidentally destroying the TinyMCE underlying DOM element and making a new one when you return?
If you are leaving the "tab" with TinyMCE you likely need to remove() TinyMCE before leaving the tab. When you return to the tab you need to init() the editor again. This is a common problem with web UIs that show/hide or destroy DOM elements while the editor is open.

Related

Configuring/Removing individual buttons in CKEditor's 'Source' group

I've read many posts regarding the lack of documentation for button lists in CKEditor 4, and I've found posts where individuals even posted a list of button Items based on their testing.
However, what my client has asked is to remove specific buttons within the Source group - the Comment, Uncomment and HTML Tag Autocomplete buttons.
Does anyone know the correct button names for these buttons that will work with removeButtons()?
I've tested the obvious - Comment,Uncomment,Autocomplete - but they have no effect.
Thanks.
I know it is late for the OP, but for anyone interested, the default configuration for the CodeMirror plug-in toolbar is (Sourcedialog included):
{ name: 'document', items: [ 'Source', 'Sourcedialog', 'autoFormat', 'CommentSelectedRange', 'UncommentSelectedRange', 'AutoComplete' ] }
To remove specific buttons with the removeButtons() function you can add each button name to the array, so for the case in question:
removeButtons: 'CommentSelectedRange,UncommentSelectedRange,AutoComplete'
Notice the names of the buttons are case-sensitive.
For whomever stumbles upon this later on.
The buttons are added by the codemirror plugin. Codemirror has configuration to not include these buttons.
CKEDITOR.config.codemirror = {
// Whether or not to show the search Code button on the toolbar
showSearchButton: false,
// Whether or not to show Trailing Spaces
showTrailingSpace: true,
// Whether or not to show the format button on the toolbar
showFormatButton: false,
// Whether or not to show the comment button on the toolbar
showCommentButton: false,
// Whether or not to show the uncomment button on the toolbar
showUncommentButton: false,
// Whether or not to show the showAutoCompleteButton button on the toolbar
showAutoCompleteButton: false
};

How to ensure that ckeditor has focus when displayed inside of jquery-ui dialog widget

I have used CKEDITOR.appendTo( "my_div" , null , my_string ) to create an instance of ckeditor ... no problem.
however, the LINK button opens a non-interactive LINK dialog box.
So, is there some config setting that it supposed to be manually set to true, perhaps?
EDIT 1 ... I will explain what I meant by non-interactive LINK dialog box ...
When I click the ckeditor's LINK button (the one that looks like a chain-link), it opens a LINK dialog box which has a input field for me to enter a URL, plus a pulldown to choose protocol, plus a couple of other form elements.
However, none of these are use-able ... if I try to type in the url input field, nothing happens (the field will not accept focus); likewise the pulldowns do not open if I click them.
EDIT 2 ... added screenshot
When the modal option is set to true for the dialog, the dialog blocks any interaction with elements outside of it. (https://github.com/jquery/jquery-ui/blob/master/ui/dialog.js#L818)
You can override this to allow interaction with elements inside ckeditor.
Just include this somewhere after jquery ui and it should work:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
If you want to allow interaction with any element outside of the dialog, include this instead:
$.ui.dialog.prototype._allowInteraction = function(event) {
return true;
};
Add this:
$(document).on('focusin', function(e) {e.stopImmediatePropagation();});
I was using:
jquery-1.8.2
jquery-ui-1.10.3
ckeditor 4.3.1
then I replaced: jquery-ui-1.10.3 with: jquery-ui-1.9.0 and it seems to work as expected.
If reverting back to jquery-ui 1.9 is not good for you, also look at:
jquery-ui forum ... "can't edit fields of CKEditor in jQuery UI modal dialog"
jquery-ui bugs ... "Dialog: CKEditor in Modal Dialog is not editable"

Is there a fix or work around for jqGrid executing script tags when performing a save of an inline-edit

I have found a comment by zbacsi on jqgrids site under inline editing.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#how_is_the_data_organized
"zbacsi, 2010/08/02 20:23
There is an escaping bug with special characters. Try insert alert('hello') into a field. It should be displayed as common text, but its executed..."
I was able to reproduce this issue, on my own grid setup, using the below versions of jqGrid and jQuery.
jqGrid version - > 4.4.4, jQuery version - > 1.7.1.
This can also be reproduced on the inline editing demo pages for jqGrid, located at:
http://www.trirand.com/blog/jqgrid/jqgrid.html
Once there navigate to:
Functionality -> Formatter Actions and begin editing a row.
Inside of the column labeled 'Notes' insert the value: <script>alert('hi')</script>
Hit enter or click the 'Save' icon.
The alert('hi') gets executed rather than 'Notes' containing <script>alert('hi')</script>
Any additional information would be much appreciated, thank you.
It's not a bug. You can fix the problem by usage option
autoencode: true
which I personally strictly recommend you to use the option in all grids.
jqGrid have many options. I personally find default values of some options (see values in "Default" column on the page documentation) not optimal. One from such options is autoencode which default value is false. It means that all data used to fill the grid cells will be interpreted as HTML code fragments. Scripts are the only problem which one have, but inserting the text like a>b, </tr> or <-- could really break the page.
jqGrid allow to overwrite the default by extending $.jgrid.defaults. So I include on every HTML page JS file with my own default preferences. In the file there are lines like
$.extend($.jgrid.defaults, {
autoencode: true,
gridview: true,
height: "auto"
datatype: "json",
loadui: 'block',
...
});

Column header sort buttons in jquery.tablesort table disappear in IE8

This may be a really simple question as I'm relatively new to coding, but I'm using jquery.tablesorter to sort my table. So far it works just fine on Chrome and Firefox, but in Internet Explorer 8 the sort arrow disappears once I've clicked on it. You can still click on the actual column header box and it sorts the data, but the arrow doesn't show until you've clicked on another column. Then that button disappears instead! There doesn't seem to be anything about this anywhere.
Here is the code that I've got in my html file, but all of the js downloads are separate files of course:
$(function() {
$("table")
.tablesorter({debug: false, sortColumn: 'Rank 2012', sortReset: false, widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")})
.tablesorterFilter({filterContainer: $("#filter-box"),
filterClearContainer: $("#filter-clear-button"),
filterColumns: [0,1,2,3,4,5,6,7,8],
filterCaseSensitive: false});
You should verify that your implementation of IE8 works with the TableSorter Demo.
If that works, which it should, then it is likely something in your CSS that is forcing the arrows off of the current selected column header.
Strip your page down to just the tablesorter css file if possible, and see how that looks.

S5 Accordion Menu ( Mootools) changes

I'm using S5 Accordion Menu on my Joomla site.
http://jalousie.al-soft.ru/o-programme
What I need is to make it not slide down, when I reload page. It needs to work like accordion only when you click on it items, but not when the page reloads.
However it will be great, if it will be possible to save its open state for current page, but without accordion effect when page loads, just load it opened.
Sorry for my english. Let me know if you have any ideas.
Here is the source
http://jalousie.al-soft.ru/modules/mod_s5_accordion_menu/js/s5_accordion_menu.js
if you use the Accordion class that ships with mootols/more/FX just use the initialDisplayFx option to disable the initial animation. Something like the following code should work.
var s5_accordion_menu = new Accordion($('s5_accordion_menu'),
'h3.s5_am_toggler',
'div.s5_accordion_menu_element', {
opacity: true,
allowMultipleOpen: true,
display: s5_am_openElement,
alwaysHide: true,
initialDisplayFx: false
});
The signature of the class you use does not match the "official" one but maybe it is just a wrapper otherwise the answer is not, you can't disable the effect

Resources