I am working with CKEditor 4.4.5 and its plugin Stylesheet Parser 4.4, but I get empty list from the style drop-down.
To make my question easier to understand, please try this code (download from its example site: http://sdk.ckeditor.com/samples/styles.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Stylesheet Parser plugin</title>
<script src="http://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor2" name="editor2" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor2', {
extraPlugins: 'stylesheetparser',
height: 300,
// Custom stylesheet for editor content.
contentsCss: [ 'http://sdk.ckeditor.com/samples/assets/stylesheetparser/stylesheetparser.css' ],
// Do not load the default Styles configuration.
stylesSet: []
} );
</script>
</body>
</html>
It doesn't really work. But the sample on that site works well.
I also find another sample site:
http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/stylesheetparser/stylesheetparser.html
I tried to copy all the sources code from this demo site, but get no luck.
Did anyone else have the same problem?
How can I make the codes above work? It basically uses the source codes from CDN site so I don't think the version of source code matters.
You should try with this version: http://ckeditor.com/addon/stylesheetparser-fixed
The official plugin has some problems since very long ago but they don't seem to plan to fix them.
This problem is caused by Cross-domain request. The CSS file is in HTTP server, and my application is running with a port number. So they are treated as cross domain request.
I also tested the HTML page and CSS file in the local files. However, file://...path is still treated as Cross Domain request in Chrome, but FF and IE works with that properly though.
When I tried this in server, it works properly with Chrome. Unfortunately, there seems no way to make cross domain request work in Chrome and Firefox.
Related
When I implemented google recaptcha for my site using the instructions given by Google everything works fine but the div itself renders a bit oddly:
I am using the standard DIV code recommended by Google:
<div class="g-recaptcha" data-sitekey="my-site-key" data-callback="enableBtn" data-expired-callback="disableBtn"></div>
I have tried to adjust the padding for the DIV but nothing seems to work. Has anyone else had this problem and solved it?
UPDATE: I tried with the most basic site possible, no css and I still get the same rendering.
<!DOCTYPE html>
<html>
<body>
<div class="g-recaptcha" data-sitekey="my-secret-site-key"></div>
<script src="https://www.google.com/recaptcha/api.js">
</script>
</body>
</html>
UPDATE 2. Works fine in Microsoft Edge. Seems to be a Firefox problem...
I have a local server running on Tomcat.
There is currently a single landing page, which is some HTML with a simple CSS style.
My problem is, when I try to send the CSS file as a resource from my JAX-RS server, it shows up in the browser, however, it is not used by the browser to style the HTML.
Here is how it looks:
As you can see, the CSS is there, it's really simple, but it doesn't change the background.
Now, I tried to do the simplest version possible, where I just put the HTML and CSS in the same folder, and exclude the localhost request, just link it together, and it worked.
I send script files via this function:
#GET
#Path("/{scriptName}")
#Produces(MediaType.TEXT_HTML)
public InputStream getScript(#PathParam("scriptName") String scriptName) {
return ScriptService.getScript(scriptName);
}
In my HTML, the way I put it together in the <head> part is this:
<head>
<title>Home</title>
<link rel="stylesheet" href="http://localhost:8080/WebProject/scripts/mycss.css" type="text/css">
</head>
<body>
<div class="hello">
This is some text
</div>
<div class="hello2">
It is nice to meet you sir.
</div>
</body>
Do you guys have any idea on why this is happening?
Btw, as a side note, I use the same code to fetch my Vue.js scripts, and they work perfectly fine.
Is it possible to run ckeditor on an IFrame so that can encapsulate a full html page? I have tried various methods but nothing seems to work.
What I am looking for is to have a ckeditor wrapper page say Editor.htm which contains an editable IFrame linked to my real html page say test.htm. Something line:
Editor.htm
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.ckeditor.com/4.5.10/standard-all/ckeditor.js"></script>
</head>
<body>
<iframe contenteditable="true" src="test.htm" id="editor1" name="editor1"></iframe>
</body>
</html>
You can set ckeditor to use "fullPage" mode, allowing you to edit everything from the opening tag to the closing tag. See the official sample here.
You will still need to get the content into the editor (e.g. the html page you want to edit) and save the result on the server, but this is something specific to your site, language, platform etc.
I'm trying to embed a Vimeo video using fancyBox 2. I'm able to make the lightbox pop up, but all I get is a spinning loading icon that lasts forever.
I did a bunch of searching on similar Vimeo questions here on StackExchange, but implementing things others suggested has not solved the issue.
I've now even created a fresh test site (plain HTML doc with linked files in local directory), and then used the code listed in the fancyBox documentation section on using Media Helpers (Extended Functionality) line-for-line, but that's not working either. Same loading spinner, stuck forever.
Does anyone have any ideas why this is not working? Testing in both Safari 7 and Chrome. In Safari I get the stuck loading spinner. In Chrome I get an error page within the lightbox that says "The file or directory could not be found."
Here's my code:
<!DOCTYPE HTML>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Add fancyBox media helpers -->
<script type="text/javascript" src="js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a class="fancybox-media" href="https://vimeo.com/78112273">Video</a>
</body>
All I get with that is a stuck spinner and an error page.
Any help and suggestions are greatly appreciated! Thank you!
Ensure your page has a valid DOCTYPE and most importantly, note that the case seems to impact on whether the video actually gets loaded when the popup is displayed. (You need lowercase 'html' in the doctype declaration)
ie. Using:
<!DOCTYPE html>
<html>
<head>
fixed it for me... This is probably why your example works in jsfiddle.
I'm trying to embed a pde made with processing into a vanilla html page:
Here is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/javascript" src="processing-1.4.1.min.js"></script>
</head>
<body>
<canvas width="700" height="821" data-processing-sources="jailmap2012capacity.pde"></canvas>
</body>
</html>
When the page is loaded, nothing appears.
I'm not getting any errors showing in the console for Firefox, but I am getting an error in Chrome that says, "Uncaught TypeError: Cannot call method 'addListener' of undefined" for client.js on line 6, but I don't think this is related to the problem.
The processing pde renders correctly within the Processing IDE.
Ideas? Suggestions? Thoughts? Thanks!
EDIT: Changed "source" to "src" in script link.
SOLUTION:
It appears that the default .pde produced in the Processing IDE does not include preloading tags necessary for use on the web.
For reference: http://processingjs.org/reference/preload/
Image and fonts will need to be preloaded on the very first line of the .pde, like so:
/* #pjs preload="path/image_1.gif, path/image_2.gif"; font="path/font_1.eof, path/font_2.eof"; */
javascript is not "application/javascript", it's "text/javascript", and if you're using , leave off the type. It's not necessary. On which note: add at the top. With that covered, if running that using localhost or online and that doesn't fix things (you cannot reliably run from file:/// unless you tell your browser to allow file XHR from file), check your console log, and report back what the errors are.