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>
Related
Can someone help me? I wrote simple code in javascript and it wont work for some reason. I tried to figure out but i cant see why. I have downloaded jquery and it is all ok with it, also i tried only javascript code and still same problem. Browser is ok it load jquery and javascript on file i made earlier but doesnt load on this.Here is code:
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js">
$('#btn').click(function f() {
console.log(1);
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
<head>
<title>Proba</title>
</head>
<body>
<button id="btn">Click</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(
console.log(1);
))
})
</script>
</body>
Try like this :)
You are binding your event handler, before the browser was able to parse your HTML. So #btn element is not in the DOM yet at this point.
Either wrap you code inside document.ready or move the script to the bottom of the body tag.
1st Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function() {
$('#btn').click(function f() {
console.log(1);
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
2nd Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$('#btn').click(function f() {
console.log(1);
});
</script>
</body>
Have you verified "jquery-3.3.1.js" really exists in the current directory? Try instead loading the script through a known host, like Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
EDITED: Added working code. Note button checking must be done when document has finally loaded.
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function() {
console.log(2);
});
})
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
I want to call a partial html page using jquery. I have seen this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.1.0.min.js"></script>
<script type="text/javascript"> $('#result').load('Ajax/test.html'); </script>
<title>Home</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
and in the path Ajax/test.html i have this test.html:
<h1>Hey World</h1>
The problem is it does not load the Hey World into the main page. Also, there is no error in console.
What is the problem?
As with $('#result'), jQuery is unable to find the element as DOM is not ready hence jQueryObject.load method is never invoked.
Wrap your script in $(document).ready or Place your <script> as last-child of <body>(Just before closing body tag(</body>))
There are also DOMContentLoad or window.onload events which makes sure that DOM is loaded but IMO, placing <script> just before </body> is easier option.
<div id="result"></div>
<script>
$('#result').load('test.html');
</script>
You are trying to append to an element that yet does not exists.
Try adding your code in a $(document).ready(), and just before the </body> closing tag.
Like this:
<script>
$(document).ready(function(){
$('#result').load('Ajax/test.html');
});
</script>
</body>
Try changing your <script> tag to include a document.ready:
<script type="text/javascript">
$(document).ready(function () {
$('#result').load('Ajax/test.html');
});
</script>
I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.
I created a plugin which open a tinyMCEPopup. The tinyMCEPopup is a html file with a form and i need to have a tinyMCE textarea in it. here is the structure of the popup:
<!DOCTYPE html>
<head>
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<textarea id="mceEditor"></textarea>
</form>
</body>
</html>
I tried to use:
tinyMCEPopup.execCommand('mceAddControl',false,'mceEditor');
or
tinyMCE.execCommand('mceAddControl',false,'mceEditor');
and the tinyMCE.init() function but it doesn't work.
Thanks in advance.
try
tinyMCE.execCommand("mceAddEditor", true, 'mceEditor');
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.