Is there a nice and easy quick way to add an onchange event to the CKeditor.
I would like to do something when ever the text changes? Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="js/ckeditor/adapters/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
var config = {
toolbar:
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList']
],
width: 600,
height: 400,
resize: false
};
$('.jquery_ckeditor').ckeditor(config);
CKEDITOR.instances[0].on('change', function () {
alert("test");
});
});
//]]>
</script>
</head>
<body>
<textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
</body>
</html>
Edit. Excuse me, my previous version of answer was not correct.
As I have found out it's no a standart onchange event for CKEDITOR. Instead of it you can emulate it with help of another events for textarea. For example, you can use the event 'keydown'.
Try it by changing the code for CKEDITOR to the next one:
CKEDITOR.instances[idOfTextarea].document.on('keydown', function() {alert('text')});
More info
There is an error in your code:
CKEDITOR.instances[0]
instances is an object, and you can get value (editor) by the key.
Replace it with
CKEDITOR.instances[yourInstanceName]
CKEDITOR.instances.editor1.on('change', function() {
console.log("TEST");
});
CKEditor provides various events which is mentioned in their Documentation.
Change Event: Fired when the content of the editor is changed.
Due to performance reasons, it is not verified if the content really changed. The editor instead watches several editing actions that usually result in changes. This event may thus in some cases be fired when no changes happen or may even get fired twice.
If it is important not to get the change event fired too often, you should compare the previous and the current editor content inside the event listener. It is not recommended to do that on every change event.
Please note that the change event is only fired in the wysiwyg mode. In order to implement similar functionality in the source mode, you can listen for example to the key event or the native input event (not supported by Internet Explorer 8).
CKEDITOR.instances.editor1.on('change', function () {
// operations
});
Here editor1 is the id of the textarea or the instance of the element.
Related
I have a weird issue that i am hoping someone can help resolve.
Problem
When i load html dynamically via .load() function, if any aspect of html in the loaded fragment tries to access the javascript query functions in original HTML page, it doesn't work. Example code below:
Main HTML page (main.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<!--javascript load functions etc... standard header stuff -->
</head>
<body>
<div id="dynamic_section_fragment"></div>
Load Fragment
<script type="text/javascript">
// <![CDATA[
function loadFragment() {
$("#dynamic_section_fragment").load("/api/fragment/");
};
$(".checkvalue").click(function () {
$.getJSON("/api/checkvalue", {term: $(this).attr('value')}, function () {
console.info("submitted for checking");
})
});
// ]]>
</script>
</body>
</html>
FRAGMENT File (fragment.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
</head>
<body>
<div th:fragment="check_value">
<br/>
Check the value in the attribute field
<br/>
<a href="javascript:" th:attr="value='123'" class="checkvalue">Check This<a/>
</div>
</body>
</html>
SPRING MVC Controller Method
#RequestMapping("/api/checkvalue")
public String getFragment(Model model) {
return "fragment :: check_value";
}
So a run down of actions:
-Main.html page loads
-User clicks on Load Fragment hyperlink
-Javascript dynamically loads the relevant fragment into the div
-User clicks on Check This hyperlink, nothing happens
Is there something i am missing or something i need to be aware?
It is as if Thymeleaf has preregistered all the possible scenarios of events and doesn't allow any others.
Only way i have been able to get it to work is by injecting the "checkvalue" javascript within the fragment, which as you can agree is a bad way of doing things.
Help is appreciated.
You are applying the click event listener to all existing objects with the checkvalue class.
$(".checkvalue").click(function ()
What you rather wish to do (to make the click event apply to all the existing and any new added, dynamically) is to set a event on a parent in the dom tree (parent both to the existing and to all that will be added).
In your case, the body tag would probably be the safe bet.
The following should suffice:
$('body').on('click', '.checkvalue', function() { ...
Simplified, the code will apply a listener on the body element instead of the .checkvalue objects, and whenever a object with the .checkvalue class is clicked (wether dynamically or statically loaded), the event will fire.
edit
I would also suggest that you, in your javascript, don't use jquery before you know for certain that it is loaded.
The jquery lib have a way of fixing this for you, by using the $( document ).ready() function:
$( document ).ready(function() {
// All jquery dependant code here.
});
I use inline Ckeditor to edit content. I want to bind a keypress event to the div i edit. I mean, i need an event that will fire when i change the content of div.
Here is an example of how i do that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
</head>
<body>
<div id="ckediv" contenteditable="true">Editing with CKEDITOR</div>
<br>
<script type='text/javascript'>
$( "#ckediv" ).keypress(function() {
alert('cke key pressed');
});
</script>
</body>
</html>
The problem is that keypress is not fired in ie and chrome when i press enter ordelete keys. If i make a div with contenteditable="true" but without Ckeditor then the event works well.
Here is a jsfiddle with code that shows how it works now http://jsfiddle.net/uAc7c/4/ .I don't know why, but for some reason this jsfiddle(keypress event) doesn't work in ie. When i tested locally with above source, it worked.
And here is a jsfiddle without Ckeditor that shows how it should work http://jsfiddle.net/mPM4J/4/
JQuery Documentation says:
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
So i guess IE and Chrome are two of the unsupported browsers.
Therefore try using the keyup event instead like this:
$( "#ckediv" ).keyup(function() {
alert('cke key pressed');
});
For more info, see here:
KeyUp Documentation in the JQuery API
I want to capture when a user pastes data into a text input field using mootools event system.
Anyone have experience of this?
The paste event has become better supported in recent times: IE has had it since around 2000 (IE 5.5, I think), Firefox since 3.0, WebKit for a couple of years (not sure exactly when). You should use it where possible and fall back to detecting ctrl-v or shift-ins in other cases, or polling the input box's value using a timer.
The function will get fired whenever the keys 'ctrl+v' are pressed.
Mootools docs : http://www.mootools.net/docs/more/Interface/Keyboard
EDIT : HTML and JS Code
<html>
<head>
<script type='text/javascript' src='core.js'></script>
<script type='text/javascript' src='more.js'></script>
<script type='text/javascript'>
function keyPressed(e)
{
var evt = Event(e);
evt.stop();
}
window.addEvent('domready', function()
{
var myKeyboardEvents = new Keyboard(
{
eventType: 'keyup',
events:
{
'ctrl+v': keyPressed
}
});
myKeyboardEvents.activate()
});
</script>
</head>
<body>
<form id='myForm'>
<input type='text' name='some' id='username' value='stack#over.com'/>
</form>
</body>
</html>
I'm not sure what I'm doing wrong here:
index.html
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >
<head>
<script type="text/javascript" src="scripts/eventInit.js"></script>
</head>
<body>
<p id="javascriptWarning">This page will not work with JavaScript disabled.</p>
</body>
</html>
eventInit.js
window.onload = function () {
alert("check"); // works
var jsWarning = document.getElementById("javascriptWarning");
jsWarning.onclick = function () {
alert("hi"); // works
};
jsWarning.onload = function () {
alert("loaded"); // fails
};
}
And yet, nothing happens. What am I doing wrong? I've tried other events, like onmouseover and onload.
I'm doing this in Visual Studio, and intellisense isn't giving me options for setting any event handlers. Is that because I'm doing this wrong?
I have confirmed that JS is working on my setup; just putting alert("hi") in a script and including it does work.
It might be important to note that I'm doing this in JScript, since I'm using Visual Studio 2010, so perhaps event handling is different?
Updated to remove '-' from the ID name, but it still doesn't work.
Updated added the window.onload block. Now onclick works, but onload doesn't.
You are trying to set a load event on a paragraph. Only objects which load external data (window, frame, iframe, img, script, etc) have a load event.
Some JS libraries implement an available event (such as YUI) — but you know the paragraph is available, since you're setting an event on it, and you couldn't do that if it was unavailable.
maybe you forgot to have the code block inside a
window.onload = function() {
// btn click code here
}
You have to wait for the document to be parsed before you can go looking for elements by "id" value. Put your event handling setup into an "onload" function on the window object.
The browser won't fire an "onload" event on your <p> tag. You won't need that anyway if you do your work in the "onload" handler for the window as a whole.
[soapbox] Use a framework.
The script is executed before the desired element exists. Additionally, I don't think, p has an onload-Event. Windows, frames and images, yes, but paragraphs?
You should use <body onload="init();"> or window.onload=function(){ … } or a library function, if you use a library. Example:
index.html
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >
<head>
<script type="text/javascript" src="scripts/eventInit.js"></script>
</head>
<body>
<p id="javascriptWarning">This page will not work with JavaScript disabled.</p>
</body>
</html>
scripts/eventInit.js
window.onload=function(){
alert('JS is working!');}
Edit: Okay, I am very sure, p makes no use of an onload event handler. And it's no wonder, you don't need it. If you want to execute JS code just after the paragraph is finished, do this:
<p>
<!-- stuff -->
</p>
<script type="text/javascript">
/* stuff */
</script>
Instead of this:
jsWarning.onload = function () {
alert("loaded"); // fails
};
try this
if(jsWarning) alert("loaded");
I think someone above mentioned checking for the existence of the element. At this stage the element should be present but it does no harms to check for it.
I think you have to make sure your JavaScript is binding.
Is your javascript before or after your paragraph element, for some reason my brain is aiming towards that.
I would look into using something like jQuery, it will help.
using jQuery your code would be (with the relevant jQuery files included of course):
$(document).ready(function()
{
$("#javascript-warning").click(function(){
alert("HELLO");
});
});
I don't think hyphens are valid in class names when used in conjunction with JavaScript. Try an underscore instead.
onload is a window event.
I want to get alerted whenever I press a key.
I've tried:
$('body').live('keyup', function() {
alert('testing');
});
But it doesn't work, could it be because of the selector?
UPDATE:
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TODO supply a title</title>
<script type="text/javascript" src="../system/media/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').live('keyup', function() {
alert('testing');
});
});
</script>
</head>
<body>
<p>
TODO write content
</p>
</body>
</html>
It doesn't alert me when I press something although it works when I replace keyup with mouseover and mouse over TODO write content
Why doesn't it work?
Try using $("html") or $("*") instead of $("body"). In order for the keyUp event on body to fire, the body node or one of its children must be focused. You can accomplish this in your example by adding a text input and focusing the mouse to that input. What you really want is to capture any key press, so $("html") should work.
Edit: I think your example might work, but in any case, to run the logic conditionally you might try this:
if ($(document.body).is(".focusOnKeypress")) {
$("html").live(...);
}
Or, I think this will also work:
$("body:not(.noFocusOnKeypress)").parent("html").live(...);
Just listen to the window!
$(window).keydown(function(event){
alert(event.keyCode);
});
I tried this code. This is working fine.
$('body').on('keyup', function() {
alert('testing');
});
It does not work because your page does not have focus.. you need to click on the page first and it will work..
alternatively you could forcibly set the focus to an input element and thus bring focus to the page..
$(function(){ $('input_selector_here').focus(); });
Hope this will help.
$(document.body).on('keyup', function (e) {
alert('In');
}):