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)
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 am using MVC.NET and CKEditor and want to prefill the textarea so on edit forms the text is already loaded.
I try with:
<%= Html.TextBox("Message", Model.Message) %>
I can see that the textarea contains the correct text, but since CKEditor alters the html, it isn't inserted into the editor. Is there a way to hack it so I can insert the text into the form?
It was a stupid error, a simple:<%= Html.TextAreaFor(model => model.Message) %> made it work.
CKEditor is desined for WebForms and its designed in such a way to depend on the external dependencies like request and response.
Unless the CKEditor company provides the helper extension for MVC you will not be able to do that. You can also search if there is any extension points provided like interfaces.
I'd like to have a link generated with BlueCloth that opens in a new window. All I could find was the ordinary [Google](http://www.google.com/) syntax but nothing with a new window.
Ideas?
Regards
Tom
Here is a complete reference for markdown: http://daringfireball.net/projects/markdown/syntax
And since there is no mention of how to set the target attribute, I would believe it is not directly possible, but the reference also says:
For any markup that is not covered by
Markdown’s syntax, you simply use HTML
itself. There’s no need to preface it
or delimit it to indicate that you’re
switching from Markdown to HTML; you
just use the tags.
Source: http://daringfireball.net/projects/markdown/syntax#html
So I would suggest you have to use the html syntax for links like this
update
if you wrap the markdown generated content in a div with a specific id like this:
and you use jQuery, you can add the following javascript:
$('#some_id a').attr('target','_blank');
Or you can save the BlueCloth output in a variable before outputting.
markdown_generated_string.gsub!(/<a\s+/i,'<a target="_blank" ')
I have a wysiwyg editor ckeditor. It has a textarea. Okay, everything works fine, but until I'm trying to load content which already has inputs elements (textarea). So, we have:
<textarea id="ckeditor">
... Loadable content ...
<textarea id="some_other"></textarea>
</textarea>
As you see loadable textarea is closing ckeditor-area, and another content is outside editor. Any suggestions to make another textarea in my ckeditor-area?
Escape it:
<textarea>...</textarea>...</textarea>
There are functions for that in every language, e.g. htmlspecialchars in PHP.