I am using CKEditor for mailbox. After typing the content in the editor, I need to click on send button. After clicking the mail goes, but without the content that I have typed in it.
This is because the CKEditor is not updating the value of content until I select the typed text and perform some operation from the toolbar, like Bold, Italic etc.
I have added a javascript: onclick to the send button and trying to reload the editor or perform some operation from toolbar .
Neither I can use JQuery nor any plugin to solve this. What else can I try for this?
Try adding this function to the page and call it on the onclick of the button. It'll update the textarea's with the value of the ckeditor
function UpdateFields() {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
}
Related
I'm trying to create a bookmarklet which when clicked inserts a specific text into the currently active text control. Don't judge.
So this is my code so far:
(function()
{
var t="<<< VALUE >>>";
var a=document.activeElement;
if(!a) alert("No active element found.");
if(!!a)
if(a.nodeName=="TEXTAREA"||a.nodeName=="INPUT")
if(!a.value) a.value=t;
else a.value+=t;
else if(a.nodeName=="DIV"&&a.isContentEditable==true)
if(!a.textContent) a.textContent=t;
else a.textContent+=t;
}
)();
It works for textareas and inputs, but not for editable divs. It does change the text, but the control is broken afterwards in a way that I can't use backspace or delete anymore.
How do I set the content of such a div without braking anything?
The best place to test this is supposedly facebook. Put the focus on the text control for a new post, then execute the function. You'll notice that you can't use backspace and delete anymore.
// EDIT
After some comments and jsfiddle experiments it looks like this is indeed a Facebook related problem. I've updated the title accordingly. Still baffles me why this is the behavior and how to overcome it.
When I need to edit existing text stored in the database, some buttons on the CKeditor toolbar are pressed as they already have some styles.
For instance, if I have the following text in my database:
<strong>asdf</strong>
when I edit this text, the "bold" button is pressed.
I need to set bulletedlist clicked as the default setting of my editor. I listen to the instanceReady event and use execCommand('bulletedlist') when the event is on to achieve my goal:
CKEDITOR.on( 'instanceReady',function(ev) {
ev.editor.execCommand( 'bulletedlist' );
} );
however, if the text is already bulleted, calling execCommand('bulletedlist') will cancel the bulleted style.
I need to know which buttons are pressed when users start editing the text, so I can prevent canceling the default style. How can I achieve this?
To query command state you need to use:
editor.getCommand( 'bulletedlist' ).state;
It will return one of:
CKEDITOR.TRISTATE_DISABLED
CKEDITOR.TRISTATE_OFF
CKEDITOR.TRISTATE_ON
I have a textarea in inside which the user adds some content and edits it time to time.
I want to have that text point to URL (i.e a hyperlink inside a textarea). But since itis not possible to have a hyperlink inside a textarea, is it possible to make the whole textarea link to a URL itself ?
Add onclick event handler to the textarea and set window.location with the location you want to do to.
Other option is to use a editor like CK Editor or YUI Editor
you can use jquery:
<a href='http://example.com' style='display:none' id='textarea_link'></a>
<textarea id='textarea1'></textarea>
<script type='text/javascript'>
jQuery('#textarea1').click(function(){jQuery('#textarea_link').click()});
</script>
Then when you click on the textarea it will pass the click event onto a link and your browser will treat it as if you clicked on the link.
Note: this is not using the javascript window.open function on purpose
I'm trying to develop an app for ipad and I'm using the contenteditable feature. I have created 3 buttons (bold, italic, underline) and when someone taps them they perform the functionality using execCommand. However when the user selects a word that is bold I want to change the state of the Bold icon image so that it lets the user know that the selected text is in bold. This feature is available in programs like ckeditor and tinymce but I want to know how it's done. I know that some people use a timer that checks all the states every second but I don't think that's the right way. Could someone help me with the code or explain how this could be done.
look up the document.queryCommandState() method to find your answer
I believe you pass a flag which returns true or false, such as...
if(document.queryCommandState("Bold")){ highlightBoldBtn(); }
EDIT
To clarify, if I understand you correctly this will work. This is how I did it with my editors. Just add a 'onclick' and 'onkeyup' event to your contenteditable div or textarea like the following
// this array is for every button you implement on your editor
var buttonarr = ["Bold", "Italic", "Underline"]
// here is the onclick/keyup function for your element
function updateButtons(){
for(var i=0; i<buttonarr.length; i++){
var buttontype = buttonarr[i];
if(document.queryCommandState(buttontype)){
// call function to turn this button "on" or use jQuery
$('#btn_'+buttontype).addClass('button_on');
}
}
}
If you noticed, what I did was gave each of my buttons the ID of "btn_" with the button flag appended to it. Using CSS I then made a button_on class that styles it accordingly. You may want to simply remove the 'button_on' class from all buttons on each call to updateButtons(), and then add the class back on as it returns true.
I was wondering if there is a way to protect a piece of html or text inside the jquery inline content editor jwysiwyg?
For example, I have a div that I externally insert to the editor and I do not want the user to modify it.
I could not capture the keypress event inside it (iframe security?) and setting the div to readonly or disabled did not work.
Any ideas?
Thanks!
Just add a click event handler for that div so it throws an alert and disables (graying out) the rest of the page; something like a login dialog (check out jQueryUI dialog - http://jqueryui.com/demos/dialog/)
Try it!
To clear the content in the editor use
$('#wysiwyg').wysiwyg('clear');
If you want to set the content of the editor on the fly you can use
$('#wysiwyg').wysiwyg('setContent' response.message);