I am building a feature similar to the page customization feature of pagemodo.com. The user has to click on a label(div) in a HTML page and a CKEDITOR will load in a separate div with the label text.
Now, the ckeditor is loading with the label text but the "KeyUp" event of CKEDITOR is not firing. Only if the "KeyUp" event fires, I would be able to call another function "readAsTyped" to change the text in the label simultaneously.
You can see the working copy here http://graffiti-media.co/testing/rashmi/custom/
$(document).ready(function() {
$('.editable').click(function(){
$(this).children().each(function(index, domEle) {
createEditor($(domEle).text(), domEle);
});
});
});
var editor, html = '';
function createEditor(text1, domEle)
{
// Create a new editor inside the <div id="editor">, setting its value to html
var config = {};
ckeditor_instance = CKEDITOR.appendTo( 'editor', config, text1 );
var abc=ckeditor_instance.name;
ckeditor_instance.on('instanceCreated', function(e) {
e.editor.on('contentDom', function() {
e.editor.document.on('keyup', function(event) {
// keyup event in ckeditor
readAsTyped($('#cke_editor2'),$(domEle));
//on focus
}
);
});
});
}
function readAsTyped(obj, label) {
var typedVal = obj.val();
// set the value of characters into the label
$(label).html(typedVal);
}
Any help would be greatly appreciated.
Do you mean something like this?
http://alfonsoml.blogspot.com.es/2012/05/recipe-live-preview-of-ckeditor.html
Related
I can't seem to find an event in the documentation that will trigger when a specific element has been inserted into the HTML of a textarea.
For example if the user makes text bold, I would like to trigger an event when the 'b' tag is added into the HTML; as well as any other tag.
You can use change event and check if b is present in input:
var editor = CKEDITOR.inline(element, {
resize_enabled: false,
skin: 'rich-text,' + RX_RICH_TEXT.ckeditor.skinPath,
on: {
change: function () {
var dom = this.getData();
if (dom.includes('<b>')) {
// your logic
}
},
I am trying to get an onblur/onfocus combination working for a pair of text boxes which I am selecting via class in jquery. I am not getting any errors in debug, but the blur function never seems to be called. When debugging my breakpoint in the blur function is not hit.
$(document).ready(function () {
var row = $(this).closest('tr');
$('.editClass').click(function () {
var editBoxes = $(row).find('.editClass');
var focus = 0;
$(editBoxes).focus(function () { focus++ });
$(editBoxes).blur(function () {
focus--;
setTimeout(function () {
if (!focus) {
alert('LOST FOCUS'); // both lost focus
}
}, 50);
});
});
});
Pretty sure the problem here was that the editBoxes were dynamically added to the page. This was not apparent in my question. Since they were dyncamically added I need to use
$(document).on('blur', '.editBoxes', function (){
...
}
The last two lines of your code example should be this
});
});
This is needed for closing the ready and click function call.
Another possible problem is that you wrap the focus and blur listeners in a click handlers. Why did you do this?
I'm trying to trigger a warning when the user leaves the page if he had made changes in the textareas of TinyMCE plugin.
There's my code. It works if i use a normal form textarea, but it doesn't go well when i add the 'onkeydown' event to the tiny's textarea. I've comproved the value of 'cambios' with the browser console and i saw that it never changes its value.
JS:
var cambios = false;
function change_cambios (){ cambios = true;}
window.onbeforeunload = function() {
if(cambios) {
return confirm('Are you sure?');
}
return;
}
HTML:
<form id="formulari" method="post" >
<textarea id="ap0sub2" name="area" onkeydown="change_cambios();"></textarea>
</form>
That works perfectly if i use it within tinyMCE plugin. But when i include the text editor, the value of 'cambios' remains to false.
Any ideas?
Thanks a lot!
tinyMCE hides the textarea and presents its own contenteditable div so there is no keydown happening on your textarea. You'll need to add the event listener using tinyMCE's methods when you initialise it:
tinyMCE.init({
selector:'#ap0sub2',
setup : function(ed) {
ed.on('keydown', function(e) {
cambios = true;
console.log(cambios);
});
}
});
Working demo: http://jsfiddle.net/exmdg7ha/
In tinyMce 4:
tinymce.init({
...
init_instance_callback: function (editor) {
editor.on('keyDown', function (e) {
console.log('Element clicked:', e.target.nodeName);
});
}
});
https://www.tinymce.com/docs/advanced/events/
Ok, I have a edit button, when I press on it, it changes to "done" button.
It's all done by jQuery.
$(".icon-pencil").click(function() {
var pencil = $(this);
var row = $(this).parent('td').parent('tr');
row.find('td').not(":nth-last-child(2)").not(":last-child").each(function() {
$(this).html("hi");
});
pencil.attr('class', 'icon-ok-sign');
});
// save item
$(".icon-ok-sign").click(function() {
alert("hey");
});
When I press on a "edit" (".icon-pencil") button, its classes change to .icon-ok-sign (I can see in chrome console),
but when I click on it, no alert shown.
When I create a <span class="icon-ok-sign">press</span> and press on it, a alert displays.
How to solve it?
Try using $( document ).on( "click", ".icon-ok-sign", function() {...
Thats because you can not register click-events for future elements, you have to do it like this:
$(document).on('click', '.icon-ok-sign', function() {
alert('hey');
});
This method provides a means to attach delegated event handlers to the
document element of a page, which simplifies the use of event handlers
when content is dynamically added to a page.
Use following script:
$(document).on('click','.icon-ok-sign',function(){
alert("hey");
});
Try this:
$(".icon-pencil").click(function() {
var pencil = $(this);
var row = $(this).parent('td').parent('tr');
row.find('td').not(":nth-last-child(2)").not(":last-child").each(function() {
$(this).html("hi");
});
pencil.removeAttr('class').addClass('icon-ok-sign');
});
// save item
$(".icon-ok-sign").click(function() {
alert("hey");
});
I'm using YUI to add drag drop support to a div. It also responds to clicks. Unfortunately, the click behavior takes effect even after a drag drop operation. Here's a code snippet:
// Create a DOM object for the group tag.
div = document.createElement('div');
div.className = 'group';
div.onclick = function() { beginEditName(); }
container.appendChild(div);
// Enable drag/drop for the group tag.
dragdrop = new YAHOO.util.DD(div);
dragdrop.scroll = false;
dragdrop.on('dragEvent', function(ev) { onDrag(ev); });
dragdrop.on('endDragEvent', function(ev) { onEndDrag(ev); });
dragdrop.setXConstraint(0,0);
Click is supposed to edit text, while drag drop is supposed to move the tag. However, the onclick event is firing so that text editing begins after the tag is moved.
I could code around the problem, but is there a more direct YUI way of differentiating a simple click from a drag drop?
Michael,
http://ericmiraglia.com/yui/demos/ddclick.php
View the source, and let me know (ericmiraglia at yahoo dot com) if you have any further questions on this.
Modification. I will copy the code here, this way if this guy take off the code from his server people will be able to check the source.
var beingDragged = false;
var dd = new YAHOO.util.DD("drag");
dd.subscribe("mouseDownEvent", function(e){
beingDragged = false;
});
dd.subscribe("startDragEvent", function(e) {
beingDragged = true;
});
dd.subscribe("mouseUpEvent", function(e) {
if(beingDragged) {
alert("dragged")
} else {
alert("clicked");
}
})