I have created a small mvc application using Ckeditor that should use some css files that are stored on a local server
<head>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/new/all.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/new/templates.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/colors.css?v=1" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/paged_test.css?v=2" media="paged" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/main.css?v=1" rel="stylesheet" type="text/css" />
<style type="text/css">html { -ro-editable: true; }
</style>
</head>
At the initialization of the editor i call setData and pass in a string with that html block to apply the remote css files to the content of the editor. However they are not being applied correctly
if i set config.fullPage = true then the html block gets put in between the body tags and thus can be deleted if the user presses the backspace key enough.
I have also tried setting config.fullPage =false, this inserts the content fine however it strips the head tags from the block so it can also be deleted by the user if they press backspace.
Is there anyway of getting this html block to go specifically in the head section so that it cannot be edited?
I recommend to use the config.contentsCss property in your ckeditor config, to set a specific css file or a list of css files.
See API Docs: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
Since version 4.4 it is also possible to add more than one stylesheet during runtime to the editor instance with editor.addContentsCss(), see http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-addContentsCss for more info.
May the source be with you. Have Fun.
Related
For some reason I can't link my files and external stylesheet, external JS files to my index.php file.
I have linked index.php to style.css from the directory akobuy > styles folder:
I tried several options but it doesn't seem to load the stylesheet:
1. <link rel="stylesheet" type="text/css" href="styles/style.css">
2. <link rel="stylesheet" type="text/css" href="/styles/style.css">
3. <link rel="stylesheet" type="text/css" href="./styles/style.css">
4. <link rel="stylesheet" type="text/css" href="../Akobuy/styles/style.css">
Same is happening with JS and images:
I tried several other editors same issues.
Try this:
<link rel="stylesheet" type="text/css" href="../styles/style.css">
Related with your images. ../ mean back to parent.
I want to make a calendar view in javascript. I'm using this plugin, but the theme won't show, just trying to use standard theme. Does anyone know why?
https://fullcalendar.io/docs/theming
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
<script>
$(function() {
$('#calendar').fullCalendar({
themeSystem : "standard",
dayClick: function() {
alert('a day has been clicked!');
}
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
https://jsfiddle.net/03d1ahwy/
The problem is that
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
must be changed to
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css" media="print">
(i.e. you must add the attribute media="print" to the link tag)
otherwise you'll always get the print layout, even on-screen. See here for more details about the "media" attribute.
Once you add that, it tells the print CSS to only take over when the user is trying to print the page, and lets the standard theme be used in the in-browser version.
Demo: https://jsfiddle.net/40f1z3ts/
P.S. If you just want to use the standard theme, you don't actually need to write themeSystem : "standard", in your code at all - this is the default value, so you can just omit it.
P.P.S. Of course if you want to use any other themes you have to set the theme system appropriately and include the relevant CSS files in your page.
looks like you are having problems with the libraries
download full calendar from here:
https://fullcalendar.io/download
make a folder and name it "lib" add fullcalendar.min.css, fullcalendar.print.min.css and moment.min.js inside it and use the next headers
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='lib/fullcalendar.min.css' rel='stylesheet' />
<link href='lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/fullcalendar.min.js'></script>
Edit:
for bootstrap 4 theme add:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
for jquery-ui theme add:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
Error I recieve:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'
The minute I apply the links for the fullcalendar, modals break.
Any reason for this?
I also did verify modals only broke when the javascript/stylesheets were added [I tested the calendar without and modal ran]
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
If I define my calendar links before all my bootstrap it breaks the calendar saying it isn't supported as well.
So something with bootstrap and the fullcalendar either fights or overwrites each other.
My other local files
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<script src="CSS/font-awesome-free-5.0.6/on-server/js/fontawesome-all.js"></script>
<link href="CSS/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/maxcdn.bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/ajax.jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/JavaScript.js"></script>
<link href="CSS/Main.css" rel="stylesheet" />
<script src="Scripts/Splitter.js"></script>
<link href="CSS/Oxygen.css" rel="stylesheet" />
<link href="CSS/passionOne.css" rel="stylesheet" />
<link href="CSS/netdna_3.2.0_bootstrap.min.css" rel="stylesheet" />
<link href="CSS/4.2.0_font-awesome.min.css" rel="stylesheet" />
I think i remember having this issue a long time ago. I actually went into my conflicting file and looked for similar words. I think I would try naming everything in full calendar that is named modal, to modaltwo. Just a find and replace on the entire file. See if that works for you.
So a warning to people like me who like to call modal.show() from vb.net code... the required lib jquery file can't be referenced with fullcalendar.
The bootstrap jquery files are all you need.
At this very moment I can't determine why the lib jquery file caused this bootstrap modal javascript break.
so I did the following links for fullcalendar [plus all my bootstrap files]:
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script> <!-- need to calendar title -->
<%--<script src='lib/jquery.min.js'></script>--%>
<script src='fullcalendar.min.js'></script>
so that I could use a javascript function call to show a modal like so
<script type="text/javascript">
function openmodal() {
$('#myModal').modal('show');
}
</script>
I an unable to access the few of CSS and JS files in my SPring MVC project. Below are the code in jsp page.
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/demopage.css" />
<link rel="stylesheet" type="text/css" href="/css/demo_table.css" />
<link rel="stylesheet" type="text/css" href="/css/demo_table_jui.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.24.custom.css" />
<script src="/javascript/jquery.js" type="text/javascript"></script>
<script src="/javascript/jquery_dataTables.js" type="text/javascript"></script>
It is able to access style.css and jquery.js files where as other files are not found but they have been kept with the these files only.
Recheck your paths. if it's dynamic, you probably need spring MVC specific linking.
I have deployed my ASP.NET on the production server. It has been working properly but recently I came to know that in one of the client machine with IE9 (of same version as mine) the site is not rendering properly - does not load up the CSS and javascripts.
When I got the screenshot of F12 (dev tool in IE9) from client, I found that all the CSS errors had this message - "css was ignored due to mime type mismatch" and the javascript showed - 'SCRIPT1002: Syntax Error'
Any suggestion is highly appreciated. I have tried all that came to my mind... I am lost now/
here is the response HTML that is recieved at client -
Site
<script src="/Utility/global.js?Version=2.1.61120.2" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.1.min.js?Version=2.1.61120.2" type="text/javascript"></script>
<script src="/Scripts/global.js?Version=2.1.61120.2" type="text/javascript"></script>
<style type="text/css"> body { font-size: 84%; } </style>
<link rel="stylesheet" href="/Themes/default/style/Global.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/Common.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/common_print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/Themes/default/style/forum.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/forum_print.css" type="text/css" media="print" />
<script src="/Utility/global.js?Version=2.1.61120.2" type="text/javascript"></script>
<link rel="stylesheet" href="/Themes/default/style/projects.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/sticky-footer.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/blog.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/menu.css" type="text/css" media="screen" />
Is CSS inline (inside <style> tags), imported (#import inside <style>) or external (<link>)? If imported or external, is it on CDN and what is the "Content-Type" HTTP response header sent? If internal, does your <style> contains the "type" attribute?
Check the headers with curl
curl -I http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
Next go to AWS S3 console, go to the file > properties > metadata and confirm they are set.
IE can be very particular about content types.