I am doing a project in ckeditor.i want to add divs to the textarea of ckeditor and it should be draggable and dropable.I have already added a div and style to div.But jquery click event is not working on the div inside text area.The code i have used is below and it works on focus event.
Thanks in advance
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="ckeditor.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var editor = CKEDITOR.replace( 'content' );
CKFinder.setupCKEditor( editor, '/ckfinder/' ) ;
var ckeditor = CKEDITOR.instances['content'];
ckeditor.on('focus', fnHandler);
});
function fnHandler(){
alert("Working");
}
</script>
</head>
<body>
<textarea class="ckeditor" name="content" id="content" cols="20" rows="40">
<div id="makeMeDraggable"> </div>
</textarea>
</body>
</html>
Test it on their demo page first, to see if what you want to do works there!.
http://ckeditor.com/demo
You may have to take it up with the ckeditor developers, and ensure you have the latest version of it installed, as well as the latest libraries that it relies on it, like jQuery.
If it still does not work, then you may have to customize the Javascript libraries, or find another plugin that works, like ones they use in DotNetnuke or any other mainstream CMS system.
Related
Still a bit new with jQuery so I may be making a basic error.
I just completed the jQuery introductory course and now am trying to do some of my own basic work, but have hit a slight road block.
Essentially it seems the jQuery file script.js isn't getting called properly.
When I ran it inserting it into stackoverflow it seems to work fine. However,
when I pull the html file in the browser it only displays the html elements in the file and not any of the jQuery code.
Any help would be appreciated!
$(document).ready(function() {
$("body").append("<p>I\'m a paragraph!</p>");
/* write 'Hello World! to the first div' */
$("#first").append('<h1> Hello World!</h1>');
//a clickable 'Hello World!' example
$("#link").click(function() {
$('#greeting').append("<h1>Hello Again!</h1>");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Hello World - jQuery Style</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<div id="first"></div>
<div id="second">
Click Me! <br /> <span id="greeting"></span>
</div>
</body>
</html>
You should declare your current javascript file after you get the jquery.min.js
If you look in your console ( right click and inspect ) You will notice that it cannot understand $ jquery sign.
Solution should be just swap these two lines in your html :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Try switching the order of the tags for script.js and jquery.min.js so that jquery is initialised first
I have added jQuery Library 2.1 as javascriptResource in the project. As shown in the picture.
In the index.html, the autocomplete for ready works but, ready function is not called.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello");
});
</script>
</head>
<body>
What could I be missing?
Having it available under JavaScript Resources makes it known to the tools, and available for Content Assist at edit-time. It doesn't change the behavior at runtime in the browser--something still has to reference the jQuery file from your web page, like a script tag.
Try to include the jquery script. Example:
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
Source : http://www.w3schools.com/jquery/jquery_get_started.asp
Hope it helps.
I'm newbie with jQuery and I my facing the following problem.
I'm trying to use a mask, but the script doesn't work. At all.
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
</script>
</head>
<body>
<input type="text" id="date">
<input type="text" id="phone">
<input type="text" id="tin">
<input type="text" id="ssn">
</body>
</html>
What's wrong?
I'm using the plugin from this site: http://digitalbush.com/projects/masked-input-plugin/
I checked the code. And I used this latest jQuery Mask Plugin. It works.
Here are some examples , they might help.
Only change I did is
<script src="jquery.mask.min.js" type="text/javascript"></script>
You may have put your files in wrong location.
You can check those using the built in inspect element functionality (right click and you can see it) in Google chrome. If the console indicate missing .js files you can correct them.
There are ways for other browser to check those also.
It looks like maskedinput.js either not be found or there is something wrong in this script
change from
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
to
<script src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js" type="text/javascript"></script>
I can't get jQuery to work on my page. so I used jsfiddle.net to test if my jQuery code works, and it does. However, when I copy and paste the same code unto my document, it doesn't work. So I'm assuming that there's an error with linking the jQuery external file on my html document. I'm using TextWrangler as my text editor.
html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
css
#left {
float:left;
margin-left:200px;
}
jQuery
$(document).ready(function () {
$("#left").mouseenter(function () {
$("#left").fadeTo("fast", 0.25); });
});
Thanks for the time in answering and reading this. I'm currently stuck, I've reached a dead end, and I can't wait to overcome this problem!
I agree with other people that it's most likely a typo in the name of your jQuery file. I created a web page using your exact code except that I spelled the jquery file correctly. It worked fine.
And even though using the BODY element is proper and important, it didn't affect the outcome of my testing your code.
Please, use the "Inspect Element" (tools of chrome ) or Firebug (tool of Firefox and Chrome) for find the error.
Now for me the possible errors are:
Name not declared correctly for example <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
you can change the script with external files (libraries of google) <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
Now I create the DEMO on JSFIDDLE with your code and seems that it works
You have a typo in your HTML referencing the jQuery document:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<!---Typo was here--->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
</body>
I'm having a hard time using setReadonly of CKEDITOR. I want to use setReadonly when the Editor is already loaded and ready to be used. I tried using instanceReady:
var editor;
CKEDITOR.on( 'instanceReady', function( ev ){
editor = ev.editor;
editor.setReadOnly( true );
});
but this does not work, I tried using buttons like the sample is using and it works fine. Is there anyway to setReadonly automatically when the editor is ready to be used?
Thanks
It might be better to create it as readOnly instead of waiting for it to finish and then tell it to restart as readOnly.
For example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="messageid" id="messageid">
abc
</textarea>
<script type="text/javascript">
CKEDITOR.replace('messageid', {readOnly: true} );
</script>
</body>
</html>
Fiddle demo
Here you can see how does it work!! For me works right.
http://ckeditor.com/latest/samples/readonly.html
It's simple, use disabled tag in textarea.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="messageid" id="messageid" disabled="disabled">
abc
</textarea>
<script type="text/javascript">
CKEDITOR.replace('messageid');
</script>
</body>
</html>