CKEditor - move skins folder somewhere else - asp.net-mvc

I'm using CKEditor for the first time and trying to do something that I thought would be very simple to do but so far I've had no success.
Essentially I want to place the editor.js, config.js and styles.js in a scripts folder but want the "Skins" folder that contains the css and images to appear within a separate "Styles" folder.
The application consists of a simple view that displays the editor on load.
The code to display the editor is a follows:
angular.element(document).ready(function () {
CKEDITOR.config.contentsCss = '/Styles/CKEditor/';
CKEDITOR.replace('editor');
});
The HTML within my view is as follows:
#section scripts
{
<script src="~/Scripts/ckeditor.js" type="text/javascript"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Main.js" type="text/javascript"></script>
}
<h2>Index</h2>
<textarea id="editor" name="editor"></textarea>
This is an MVC application and the scripts are rendered at the end of the body within the layout view.
The editor will not display in any browser. As I understand it setting the contentsCss property should do the trick.
If I place the skins beneath my script folder it works fine. I can see in the generated source that it is adding a link to the header pointing to /Scripts/Skins/moono..., but I want it to add a reference to /Styles/Skins/moono...
Is what I am trying to do feasable and if so what am I missing here? I was expecting this to be simple.
As a work around I could just add some routing rules that redirects the relevant request to a different location, but I'd rather get to the bottom of the issue before I do this.
Further information:
My application is an ASP.net 4.5/MVC 4 app.
I'm referencing angular because I'll be using that once I've sorted this issue. I have tried removing all references to angular but the problem still persists.
I've tried setting the contentsCss property in the following ways:
Directly using CKEDITOR.config.contentsCss
Within the config.js file. The sample assigns an anonymous function to CKEDITOR.editorConfig and in there you can manipulate congif entries.
Passing a config parameter when calling the "replace" method on the CKEditor object.
I've tried manipulating the contentsCss property both before and after the call to replace.
I'm using the latest version of CKEditor (4.2)

Thanks to #Richard Deeming, I've found the answer.
I'm using the default moono style, so I needed to set the CKEDITOR.config.skin property as follows:
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/'
My final code now looks like this:
angular.element(document).ready(function () {
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/';
CKEDITOR.replace('editor');
});
You have to set the url to the actual folder containing the skin itself (I thought CKEditor might append skins/mooono itself but it doesn't).
I also found that you must include the final '/' from the URL.

Looking at the documentation, you need to specify the path as part of the skin name:
CKEDITOR.skinName = 'CKeditor,/Styles/CKeditor/';

Related

How to add an image to be used in the customized css file - Swagger UI - Swashbuckle

I'm using Swagger(Swashbuckle) as the documentation tool for our Web API project. I'm able to customize index.html using customized css file.
Everything's works great, except, I want to add our company's specific logo in the index page & I couldn't get it to work.
Suggestions ??
I realize this is an older question, but I just ran into this today. If you want to embed an image file, you can do it similar to how you do for the css and index file.
Add a line in the SwaggerConfig like the following:
c.CustomAsset("mylogo", thisAssembly, "YourWebApiProject.SwaggerExtensions.mylogo.png");
You can then reference that file either in your modified css or custom index page by using <img src="mylogo" /> in your modified html or url(../mylogo) for the path if using it in your custom css file.
Similar to your index and css files, make sure it's set as an embedded resource.
What about including this in your CSS:
.swagger-section #header a#logo {
background-image: url(path/to/my/logo);
}

Add a .cshtml file to a Script Bundle in MVC

I have a cshtml file that has the following lines on top:
#{
Layout = null;
Response.ContentType = "text/javascript";
}
When referenced directly from _Layout.cshtml in a script tag, it works fine. But I am trying to add it to a bundle, I understand that Optimization recently made it possible, if that is true, can someone show me how?
So this works fine
#Html.JsInclude(jslocation + "ui.data.cshtml?"); // normal script tag
While these give an error: Illegal character when they encounter the #, apparently the file never gets executed.
bundles.Add(new ScriptBundle("~/scripts/uidata").Include(JsFolder + "ui.data.cshtml"));
#Scripts.Render("~/scripts/uidata");
i dont know what #Html.JsInclude is doing but normally asp.net MVC engine will not render views directly. instead it demands that you call an ActionMethod which then returns a view.
so even if you try loading a view using script tag with url of the view it typically shouldnt work or if you have allowed direct access to the views folder and added .cshtml mime type to files that are sent upon a request. all the contents of the file will be send which will include all the content even if it is inside #{}
also with all this there is no use of making a bundle consisting contents of your view as a bundle is a minified copy and is cached so if you want it to be cached why just not send a script file across.
you probably are trying to inject a script dynamically. in which case send across the script directly by the controller with the appropriate content-type header

How to dynamically import css with backbone?

I'm developing a app, using backbone, underscore, and jquerymobile. Following jqmobile's way, I have an index page which loads every visited page in special divs tags, flagged with the attribute data-role="page". For each page, i have its corresponding style file (or code snippet embedded in a style html tag). My problem is that the names of my stylable stuff started to collide. Other thing is that I would not like unnecessary style files loaded for each page. Is there any way of dynamically import only the required css for the current page?
I am accomplishing exactly what you ask using RequireJS and the RequireCSS plugin.
Here is a snippet from one of my views:
define([
'jquery',
'underscore',
'backbone',
'views/company/form',
'text!templates/company/company.html',
'css!../../../css/company/company',
], function($, _, Backbone, Form, pageTemplate) {
var Page = Backbone.View.extend({
...
});
return Page;
});
Line 7, 'css!../../../css/company/company' is where the css file becomes a requirement for loading this view.
Once the company.css stylesheet is loaded, it's in the browser even when other "pages" load because there are no actual page refreshes. Thus I have my main page views toggle a class on the <html> element:
// remove any old route-* classes existing on the html element
$('html').removeClassRegEx(/^route-.*/);
// add in the company's top-level class name
$('html').addClass('route-company');
And all my page-specific styles for the company page are scoped to the .route-company class.
You can find the jQuery plugin removeClassRegEx here.
One way of doing that is with jquery (which you 90% are already using with backbone), and its load or get ajax functions, or whatever, plus callbacks.
Then you can call such functions from your backbone app if you need to, and simply inject that css inside <style> tags into your document, as a template.
Or I think there are also specialized jquery functions.
Another way I can think of doing that would be with require.js and it's plugins (it has text plugin, I believe, which will also enable you to load your javascript templates).

Display html file inside iframe

How to display a HTML file from my system in iframe using rails?
I will explain my issue...
I have a view file that has an iframe which calls an action through <iframe src="controller/action?param=somevalue"></iframe> and the action renders a HTML file based on the params.
The HTML file called has reference to stylesheets and javascripts in the format <script type="text/javascript" src="../common/About.js"></script>
When viewed in browser the HTML file displays correctly with the styles and javascript but when viewed in the application the styling and scripts are not working from the external file. On viewing the source code for the external files i get "Unknown action" error.
What is that i am doing wrong in this?
(reacting to yr last comment): you need to specify css and js files in the iframed html page separately. html in an iframe is rendered completely independent from the surrounding page.
This is not a rails-related question imho.
I found the mistake I made. Its because of routes being not defined properly. When I give relative urls in the html file, the rails views assumes the full path to be some thing like src="controller/common/About.js". As there is no action defined by the name common I was getting the Unknown action error. I have redefined my routes and its working fine now.

In MVC view page javascript file url not resolving

I have one MVC view page in which I show different links and I am using ThickBox to show a different page when ever one of these links is clicked. In these pages, I am using jQuery functions to do some changes, but I am not able to resolve the jquery file path on the view pages. I need to give absolute path something like "http://test.com/js/jquery.js". But is there any way to make it relative?
I also tried getting the host url and using <%=%> and <%# %> but none is working.
Any help?
Thanks
Ashwani
This is when you run the MVC app from visual studio? If so set you're MVC application's virtual path to start at "/" instead of the default that is probably your project name.
This can be done by right-clicking on the MVC project in the solution explorer > Click Properties > Click the Web tab > Type "/" (without the quotes) in the Virtual path textbox. Then use Andrew Florko's suggestion of leading it with a slash <script src="/js/jquery.js"> </script>
alt text http://img707.imageshack.us/img707/3765/virtualpath.jpg
What about trying something like:
<script src="<%=Url.Content("~/js/jquery.js")%>" type="text/javascript"></script>
Maybe you should try
<script src="/js/jquery.js" ...
instead of intellisence-generated path with ".."
<script src="../../js/jquery.js" ...

Resources