I try to use the ckeditor but if I put e.g. the colorbutton plugin, the textarea disappears.
Here is how I tried:
CKEDITOR.replace( 'editor1', {
extraPlugins: 'colorbutton',
} );
I tried other plugin but it was OK.
The colorbutton plugin works fine if I try to put only a file which is only a form with a textarea.
But the above I try to put in my site where are a more complex form and after that, the textarea disappears...
why? Something wrong with my solution?
Are you using CKEditor 4?
If yes, then there is a chance that the colorbutton plugin (or one of its dependencies) is simply missing in your package.
Check what errors do you have in Firebug. Is the plugin is missing, you should see something like
[CKEDITOR.resourceManager.load] Resource name "colorbutton" was not found
Related
I use Swashbuckle to add Swagger documentation to my ASP.NET Web API project. How can I hide default header (with swagger logo) from documentation page without injecting CSS?
When I injected JS as suggested above, header was blinking at the page loading. It was shown for a second and then was disabled by script.
There is approach that works better for me. https://github.com/domaindrivendev/Swashbuckle/issues/476
You can inject CSS instead of JS:
#header {
display:none;
}
Unfortunately I think you can do it olny by javascript right now.
In your SwaggerConfig.cs you can inject a .js file like this:
.EnableSwaggerUi(c =>
{
c.InjectJavaScript(thisAssembly, "yournamespace.yourscript.js");
});
So in this script you can do whatever you want, like hide the header:
document.querySelector("#header").style.display = "none";
This post shows how to customize the header putting two text boxes on it.
Edit:
The approach suggested in #dimaKudr's answer is better. Inject a CSS style is enough to hide the menu (JS is not necessary).
When I first ran into this I started injecting css/js but each time it was a struggle and kind of "hackish" to hide stuff with injected css. So after a while I simply replaced the index file with a modified version of this index.html
You can modify it as you like. Removing the div with the id=header will remove the header. Also this makes things such as replacing the logo etc much simpler. For the logo part you could set the logo src to en 64-bit encode as shown here encode image. Also removing the linked favicon in the tab is as simple as removing the line. Also adding links to other pages etc is trivial. Injecting the index in you swaggerconfig as this
c.CustomAsset("index", thisAssembly, "Path.To.index.html");
Remember to set your index to embedded resource.
Even if you hide by doing CSS or JS tricks, you cant actually hide it when you try it out.
CSS alternate is as folows;
.server {display: none;}
I want to increase the size of the Calendar view because the default size is too small for my web application. I've tried to add a cssClass to the datetimepicker tag but it doesn't work, even if I change the width or height the only thing it changes is the field, not the calendar itself.
I'll put an image so you can understand better the problem that I have:
The thing is that the text from the field is correctly viewed, but when I click the calendar button, it shows that tiny view and it's extremelly difficult to pick one date.
The code for the datetimepicker is this:
<sx:datetimepicker name="start_date" displayFormat="dd-MMM-yyyy" value="%{'today'}" />
Any guess?
Ok, It's finally solved:
First I tried to find the file named datefilepicker.ftl inside the struts2-core.jar but I didn't find anything similar.
So after a few hours trying to find which was the correct template of datetimepicker without any luck, I tried to solve my problem using JQuery because when I was searching for the answer I found out a datepicker tutorial using this library.
There's a plugin called Struts2-JQuery that provides you with ajax functionality and therefore with multiple customizations in different widgets.
It's quite easy to install, I just had to download the correct .jar which for me it was Version 3.5.1 ( jQuery 1.8.3, jQuery UI 1.9.2 ). Once I'd downloaded the file, I just had to paste it in the lib folder inside my project. After doing that, I added this line at the beginning of the .jsp file:
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
With these steps I had jquery functionality inside my .jsp file, so the only thing left to do is to add the datepicker widget:
First I chose the jquerytheme I wanted for my widget, just like this:
<head>
<sj:head jquerytheme="flick"/>
...
</head>
And then, I added my datepicker widget:
<sj:datepicker name="start_date" displayFormat="dd-MM-yy" value="today"/>
And that's it.
If you want to resize the datepicker calendar see the answer of this post:
How to resize the jQuery DatePicker control
<sx:datetimepicker name="start_date" displayFormat="dd-MMM-yyyy" value="%{'today'}" />
It is a dojo tag, so you should be changing the template file corresponding to this tag
Freemarker changes
check for something like datetimepicker.ftl in your workspace. That would be the file rendering your calendar. Any presentation related changes will be done in that file only.
debug using firebug
Another approach can be using firebug in Mozilla firefox and manually try to change the html rendered by the tag. There might lie some CSS solution to your problem
I'm using the ckeditor plugin for grails (:ckeditor:3.6.2.2) and I'd like to reuse the File Chooser used to select images inside the rich text editor. I'd like to use it in a form for selecting images.
The plugin documentation makes me assume this is possible:
"If you just need the link to the file browser there is a fileBrowserLink tag:
Open file browser
If you want get back the path of the selected item in the file browser simply define a javascript function called ckeditorFileBrowserItemSelected in the page containing the opening link.
<script type="text/javascript" charset="utf-8">
function ckeditorFileBrowserItemSelected(path) {
// do whatever you want with path
alert(path);
}
</script>"
http://stefanogualdi.github.com/grails-ckeditor/docs/ref/Tags/fileBrowser.html
Unfortunately I'm not getting it to work. If I use the above approach to create a link, I'm getting an exception:
errors.GrailsExceptionResolver MissingMethodException occurred when processing request: [GET] /Admin/courseTemplate/create
No signature of method: Users_antonepple_NetBeansProjects_Eppleton_Relaunch_Admin_grails_app_views_courseTemplate_create_gsp.fileBrowserLink() is applicable for argument types: (java.util.LinkedHashMap) values: [[type:Image, userSpace:userone]].
I also tried using the fileBrowser Tag like this:
<ckeditor:fileBrowser type="Image" userSpace="userone">Open file browser</ckeditor:fileBrowser>
As a result the File Manager opens instead of the FileChooser I'm looking for. The File manager doesn't allow to select an image.
What am I doing wrong, and what can I do instead to reuse the File Chooser?
OK, I figured out how to do it. The documentation has a typo instead of this:
Open file browser
it should be:
Open file browser
An advanced grails user would probably have spotted this earlier :-). The second problem was, that there was no way to select an image in the file manager. But as soon as the FileManager is opened in a separate window it has an additional action in a files context menu allowing me to choose an image. So I just need to:
Open file browser
...or open fileBrowser in a dialog and this action becomes available...
I am using ckeditor for my textareas and I am able to see the editor when I run the application locally, however, when I publish the application to the live server the editor is not visable.
I just see the label for the textarea and then there is a space where the editor should be.
I am using the class attribute to replace my textareas like so
#Html.TextAreaFor(model => model.PostContent, new { #class="ckeditor" })
And this is rendering the html correctly
<textarea class="ckeditor" cols="20" id="PostContent" name="PostContent" rows="2">
I am using ckeditor 4.0 and have tested this in IE as well as chrome.
I have been able to resolve this by removing the reference to the bundle for ckeditor and replacing it with a direct link to the ckeditor.js
You still can add this script to bundle, however ckeditor loads all additional needed scripts, css, language files by itself, based on path for main script file. Puting it into bundle changed the path and plugin couldn't find needed content.
to make it work you need to override base path for editor:
http://cdn-source.docs.ckeditor.com/#!/guide/dev_basepath
If you are going tu use the text area like that:
#Html.TextAreaFor(model => model.PostContent, new { #class="ckeditor" })
The javascript call should look like that:
CKEDITOR.replace('PostContent');
CKEDITOR replace looks for the name attribute of the text area, not the class.
Hope it helps :)
EDIT:
This solution is only for explicit editor replace, not automatic replace.
source: http://rev.ckeditor.com/ckeditor/trunk/7664/_samples/replacebyclass.html
(thanks to AlfonsoML)
I'm trying to add the gem client_side_validations to my application. It works pretty fine if I go to something like controller/new, but, inside a bootstrap modal, it simply does nothing.
I inspected the HTML and it does not add the data-validate attribute. What should I do to fix this?
I just figured it out. In my coffeescript call, I do something like:
$('.modal').on 'shown', ->
$(this).find('input:visible:first').focus().end().find('form').enableClientSideValidations()
This focus the first visible input, and enable the client side validations on the form.
The above solution did not work for me however the following did! Not sure why but if you find the same as me it might be your answer...
$(document).on('shown.bs.modal', function () { $(ClientSideValidations.selectors.forms).validate(); });