I'm using CKEditor in my Rails app (via the 'ckeditor' gem).
I've customized the toolbar as below. As you can see, I only want the minimum amount of features.
[
{ name: 'basicstyles', items : [ 'Bold','Underline' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'links', items : [ 'Link' ] },
{ name: 'insert', items : [ 'Smiley','SpecialChar' ] },
{ name: 'colors', items : [ 'TextColor' ] },
];
This works fine, but the buttons provide much more functionality than I need.
For example, the Link button triggers a popup that allows the user to choose details like link type and target. I want to restrict my users to exactly one kind of link. (ie. when they click the link button, all they need to do is enter the link, and they see no options and have no decisions to make.)
For Text Color, I just want two or three colors, instead of the 50+ that are provided.
How can I make these changes?
Would appreciate it if you could provide input, or point me to some resources. Thanks!
To make these changes, you'll need to rewrite the desired plugins in order to customize their funcionality.
You can find further info about it here: http://docs.ckeditor.com/#!/guide/plugin_sdk_intro
In order not to break compatibility with newer versions, I suggest you to create new plugins based in the ones you want to modify instead of doing that directly in their source code.
You can try the Advanced Content Filter that we introduced in CKEditor 4.1. Based on content rules which you can define editor data is filtered and the same happens to UI - only "allowed" buttons and fields in dialogs are displayed. It all happens automatically, so the result may not be perfect, but we have really positive feedback about this feature.
Check the ACF sample and release note.
Related
I have built a small web application using Laravel 8 and I was requested to integrate AdminLTE to it.
I am new to AdminLTE and part of the requirements is to translate the pages content, but I had no idea of how to create such menu.
The idea is to come to this:
Here I want explain how I got there. It took me some hours to understand how this works so I think someone else could benefit from my work.
I am assuming you have already successfully integrated the AdminLTE dashboard to your Laravel application.
The key is to open the file C:\your_web_app_folder\config\adminlte.php with your preferred text editor.
Find the "Menu Items" section and add the following text inside the 'menu' => [] element:
[
'text' => 'Language',
'topnav_right' => true,
'icon' => 'flag-icon flag-icon-us',
'submenu' => [
[
'text'=>'English',
'icon' => 'flag-icon flag-icon-us',
'url'=> '#'
],
[
'text'=>'Khmer',
'icon' => 'flag-icon flag-icon-kh',
'url'=> '#'
]
]
],
Such text can be inserted after the search textbox or wherever you consider it more convenient to you.
The 'text' sets the text that will be shown on your link (optional).
The 'topnav_right' indicates that the language menu will be located on the right side of the navigation bar.
The 'icon', in this case, is going to contain the CSS class that will display the desired icon flag. For this to work, it is necessary to load the respective CSS file which is located in the folder \public\vendor\flag-icon-css\css\flag-icon.css, assuming you previously published those assets using the artisan commands specified in the documentation (https://github.com/jeroennoten/Laravel-AdminLTE/wiki/5.-Artisan-Console-Commands)
Proceeding like this you will have all those CSS/JS/images copied to your \public\vendor folder for easier reference.
There is nothing else to do to create those menus you see on the top nav (notifications, messages, languages, etc). All of them can be built in the same way.
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 */
}
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'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
};
In the search_config documentation page, I see that there's something that looks like it would allow me to specify a default value (defaultValue) to populate the search field with, but I can't get it to work. I specified a default value, but when I pull up the search box, nothing is filled. Also, I'm using multipleGroup: true, so it's the advanced advanced search module, if that makes any difference.
I figured this out by looking through the source code, and since I can't seem to find the feature documented on the wiki or anywhere else, I'll answer my own question. jqGrid DOES have a way of creating default search templates to use, and it's pretty useful. Hopefully my explanation will be useful for someone else.
When creating the searchGrid part of jqGrid $('#gridDiv').jqGrid('searchGrid', options); (or in the searchGrid options section when creating the navGrid part $('#gridDiv').jqGrid('navGrid', '#navDiv', {}, {}, {}, {}, searchOptions); ) there are two options that we care about, tmplNames and tmplFilters.
tmplNames is simply an array of strings of what the template names should be. These will appear as the text in the template select box that will show up. Something like ["Bob's Template", "Joe's Template"].
tmplFilters is also an array of strings, but these strings are the JSON encoded string that jqGrid sends to the php script when searching for something. (tmplFilters may also work as an array of the objects themselves, but I haven't tried) So something like this.
{
"groupOp":"AND",
"rules":
[
{"field":"comnumber","op":"ge","data":"19000"},
{"field":"expStatus.expStatID","op":"eq","data":"4"}
]
}
So all of this is pretty easy actually, except that this still doesn't cover setting a default template. This is only good for setting additional templates to choose from. jqGrid has a predefined default template, which is what appears when you initially open the search. To change this, after creating the jqGrid, you need to use setGridParam and change the postdata property
$('#jqGrid').setGridParam({
postData: {
filters: defaultFilter
}
});
where defaultFilter is the same type of JSON'ed query string as before. Additionally, if the 'reset' button is clicked, this default template goes away, so you'll need to set it again when this happens, which is easy enough to accomplish by adding an onReset function to the initial jqGrid call:
onReset: function () {
$('#jqGrid').setGridParam({
postData: {
filters: defaultFilter
}
});
}
And that's it! With some use of AJAX and some new buttons, I was also able to read templates from a local file rather than having them defined in the javascript and was also able to take the current query and create/overwrite templates in the file. Then they became really useful.