I put the following (copied from the cdn website) in a file then opened it in FireFox A textarea is displayed rather than ckeditor. Is that expected behavior?
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
Try this tutorial on how to setup and configure CKEditor in different environments, or get the demos' source code straight from github
Related
I need to render iframe in my Electron application:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe sandbox='allow-scripts' src='frm.html'></iframe>
</body>
</html>
where the frm.html links the local file script foo.js which is part of my Electron application
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="foo.js"></script>
</head>
<body>
<p>Inside iframe</p>
</body>
</html>
When I run the application in Electron I can see this error in devtools console
Not allowed to load local resource: file:///C:/electron/app1/foo.js
Is it possible such scenario in Electron?
This is a security feature of the iframe. Here is a similar question that talks about loading linked files into an iframe: Displaying local htm file in iframe?.
That being said, have you considered using the webview tag instead? http://electron.atom.io/docs/v0.30.0/api/web-view-tag/. The webview tag is very similar to an iframe, but gives you more ability to control the security around it. I tested loading a local file into a webview in the same way you attempt to load frm.html into the iframe and it works flawlessly.
I believe i have everything coded right ,as Dreamweaver shows no Syntax errors, however the fullcalendar UI is not displaying either in Dreamweavers' preview pane, it does however display the div, or in Mozilla Firefox.
<!doctype html>
<html>
<head><link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<script src="fullcalendar/fullcalendar.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/moment.min.js"></script>
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
all files are local
Dreamweaver CC 2014 1.1 and Firefox 36.0.4
You are missing one css file fullcalendar.print.css please include it. you can use the cdn path //cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css
Check console there might be error of jquery not defined. Include the file in that case.
cdn path https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js
For full download fullcalendar Click here..
Include your files in this sequence.
Moment js
jQuery js
Fullcalendar js
P.s: And make sure each of the file is included properly.
I have created a jsfiddle link on the left menu click on external sources. Click here for jsfiddle
I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.
If you could help me I would really appreciate it it - a lot!
I have done this so far (mocking up the example from codecademy)
What I want:
What I did so far
Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the js/vendor folder
jquery.js (v2.1.1)
bootstrap.js (v3.1.1)
bootstrap-markdown.js (v2.5.0)
he.js (v0.4.1)
to-markdown.js (no version number)
markdown.js (no version number)
index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).
But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?
So far I can get it this way
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
Which is good. But I want to be able to access via the Post button instead.
I tried without luck:
var post;
$(".status-box").markdown( post = e.getContent() );
e represent the markdown edit only inside the onSave function.
So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)
If you want to access it inside your post click function you have to access it in this way:
get the markdown element
get the markdown instance via data('markdown')
use the parseContent function
Code:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
Demo: http://jsfiddle.net/IrvinDominin/fdpM4/
Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.
UPDATE
HI #Norfeldt,
For This you have to follow Below Instructions.
1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.
2.Maintain Correct root Directory path.
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
must be
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
3. Which version of bootstrap-markdown.js lib you are using.
Check this one
Version Compatibility with Bootstrap
Bootstrap Markdown v2.x only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x only compatible with Bootstrap 2.x
Note: Download bootstrap files from Here add add to your html file.
Change path of these js file
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
To
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Hope this will help you...
My HTML isn't linking to the Bootstrap CSS. I've downloaded bootstrap and copied the CSS, FONTS, and JS folders to a folder 'called bootstrap' on my desktop. I created and index.html file in the same folder containing the CSS, FONTS, and JS. Here is the HTML:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstap.css">
</head>
<body>
<form class="well">Something goes here</form>
<script src="js/bootstrap.js"></script>
</body>
</html>
If I use 'inspect element' the JS and CSS files show up with the full correct file path .../desktop/bootstrap/css/bootstrap.css.
I'm at a loss as to what is going on.
You spelt bootstrap wrong.
css/bootstap.css
I've used colorbox in my project to show some details in a jQuery popup window. But the target page does not appear.
This is the code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/colorbox.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});
});
</script>
</head>
<body>
Click here
</body>
</html>
You can see at Here.
What's the problem ?
You are trying to display google.com in an iframe which is not as easy as with other sides.
It should work the way you did it with almost any other side.
Read this for more information: How to show google.com in an iframe?
I'm not sure with your purpose but if you want to embed google search on your website with iframe, you can try http://www.google.com/custom.
You can see demo here http://jsfiddle.net/devchill/LVunZ/
Click here
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});