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
};
Related
I am new to working with ag-grid. I am working through some of the documentation, and ran across something I am unclear on. In the Column Filtering section, I see the examples, and I put together some code that I believe duplicates what is done in the example. The code works, and I can filter, but the filter popup I see is not the same as what I see in the examples on the page. Specifically, I see a filter that has a text entry area, and, once text has been entered, an area that shows And/Or buttons (with the buttons on top of the text) and a second text entry area. In the examples in the documentation, I see clear popups with a dropdown starting with "Contains" (and having other options) and a text entry area below. What am I doing wrongly/missing? Is this expected behavior?
My column defs look like:
var columnDefs = [
{headerName: "Title", field: "title"},
{headerName: "Alias", field: "alias"}
];
And my grid options are:
var gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
enableColResize:true,
rowSelection:'single',
rowDeselection:true,
onRowSelected: onRowSelected,
onSelectionChanged: onSelectionChanged
};
I am getting the rows from fetch, so rowData is not defined.
The images (first is the one I see in the demo, the second is what I see in my app):
The filter I see in the demo app
The filter I see in my app
From the comments:
I see your screenshots, and I don't have a clue what's happening. At a
guess, I would say you have some strange CSS that's affecting the
ag-grid filter. Try temporarily removing all CSS that isn't native to
ag-grid. If you need more help, you'll have to provide a demo that
reproduces the problem.
It seems that materialize.css was the source of the problem:
#thirtydot spot on. the "select" elements had been undisplayed in some
other css, and the inputs had been resized. The culprit here seems to be materialize.css.
You probably need some CSS like this:
.ag-root-wrapper select {
display: inline-block !important; /* might not need !important */
/* and any other needed CSS to make selects display normally */
}
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.
Question: I would like add custom styles to the dropdown in ckeditor, e.g. to show a Button style adding an a tag with class btn. Is there a way to do so within Bolt CMS?
(source: jonathanschmid.de)
Attempt: I was hoping to be able to add styles via the general.wysiwyg.ck config key, but there doesn't seem to be a suitable option. I managed to achieve what I wanted by editing bolt-public/view/js/ckeditor/styles.js – but I guess it's not update-safe.
Does anyone know of a safe way to achieve this within Bolt CMS? If not, I'll try forking to suggest adding general.wysiwyg.ck.styles to config.
There's an official guide about styles.
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Button', element: 'a', attributes: { 'class': 'btn' } }
] );
and
config.stylesSet = 'my_styles';
Then if you put the selection into a link, you can apply the style.
However, if you'd like to create a link from scratch, use CKEDITOR.editor.insertHtml within a custom command and expose it as a button in the toolbar. Styles combo does not insert new elements.
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"
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