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.
Related
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.
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.
Currently, when someone 'likes' a link and creates a Facebook post (via the like button), it will only grab the one image that I specify in the meta tag (via the og:image property).
What is the best way to allow people to post a dynamic image with dynamic description? In my case, I have several items (with image & description) listed on a page that the user should be able to 'like' and post on their wall. Any advice would be much appreciated.
Thanks!
Change the meta tag on click: use this example and modify it to your needs.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<title>Title Of Page</title>
</head>
<body>
<input type="button" value="Click Me" onclick='$("title").html("Changed Dynamically");'/>
</body>
</html>
i'm trying to create dynamic PDF's using ABCPdf and i'm having no success. I copied their sample code and tried it and i receive an error:
Unable to render HTML. No MSHTML document is available.
I'm trying to figure out how to use the Gecko engine to reder the page instead of IE and can't find how. Any help is greatly appreciated... thanks all!!!
damien
Please see https://stackoverflow.com/a/11504285/1411950. This example uses the 1 rectangle for html->pdf output on each page. The rectangle is filled with raw html / html from url. It also can use Gecko engine.
If you want to make dynamic pdf, you should use raw html for its content. Note, that it should be wrapped into something like
const String HtmlWrapper = #"<!DOCTYPE html>
<html>
<head profile='http://www.w3.org/2005/10/profile'><title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<style type='text/css'>
</style>
</head>
<body>
{0}
</body>
</html>";
where all css goes in script tags in the header or is referenced to
I have an Umbraco 5 MVC3 project where i discovered that there where white spaces here and there. When investigating i discovered that my HTML looked really bad when "viewing generated source" in firefox web developer tool. For example it removes my doctype declaration and moves my meta-tags and stuff out of the head. Simplified code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="#Url.Content("~/Content/Styles/style.css")"/>
</head>
<body id="" class="default">
<div id="wrapper">
<header id="banner" class="body">
<a class="ir logo" href="/"><h1>Christian </h1></a>
<ul class="share">
<li id="facebook"><a class="ir" href="http://www.facebook.com/sharer.php?u=#Request.Url.AbsoluteUri">Facebook</a></li>
<li id="twitter"><a class="ir" href="http://twitter.com/share?text=Christian">Twitter</a></li>
</ul>
#Html.Partial("nav")
</header>
<section id="content" class="body">
#RenderBody()
</section>
</div>
<script src="#Url.Content("~/Scripts/plugins.js")"></script>
<script src="#Url.Content("~/Scripts/script.js")"></script>
</body>
</html>
And the output begins like this
<html class="no-js" lang="en"><head></head><body id="" class="default">
If you want to check on the HTML generated by your server, you should use View source (CTRL + U).
Generated source is more like a reconstruction of the HTML based on the DOM and includes for example nodes created on the client side with javascript, once the page is loaded.
Alright, i solved it. Took me a while. After Marapet suggested not to use "generated source" i tried normal "view source" in a bunch of browsers and got different results in all of them. When i tried to validate my source i got some weird complaints:
Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
Element head is missing a required instance of child element title.
And my personal favourite
Cannot recover after last error. Any further errors will be ignored.
Looked like there was something up with the doctype. Opened up notepad and pasted in there to "wash" the code from metadata, the way i do sometimes when pasting stuff in to tinyMCE. The text got formatted weird even in notepad. The doctype declaration had a smaller font size then the rest of the html.
So i opened it in notepad++ too and there i got a bunch of questionmarks in front of the declaration. I removed them and copied it back in to Visual Studio, saved and now everything works.
I think the reason i got this problem was that i copied snippets directly from the HTML5 Boilerplate on github.
// Sherlock