close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

retrieving value of CKEditor instance with javascript (jquery)

Thread began 5/20/2013 8:03 am by CraigR | Last modified 2/05/2015 3:58 am by Ray Borduin | 12043 views | 6 replies |

CraigRBeta Tester

retrieving value of CKEditor instance with javascript (jquery)

I have a page with a form to create a group email campaign, and the client would now like the option to preview the email before it is sent.
Using jquery, I am passing the values of my form fields into an ajax request and setting a couple of session variables, which I then use in my email preview.
The subject field in the form is just a text field and I am setting the subject session variable like so...

$.ajax({
type: 'POST',
url: 'setmailsession.php',
data: { subject: $('#emailsubject').val() }
})
which seems straightforward, as the subject text field has an id of ‘emailsubject’
However, I cannot retrieve the content of the text message from ckeditor.
The text editor doesn’t seem to have an id, but is named editorField, and there is only one instance of it, so I tried (amongst other things) document.getElementsByName('editorField').item(0).value, but no value is returned.
Grateful if anyone can tell me, how do I retrieve the value of the text editor field with js ?

Sign in to reply to this post

Jason ByrnesWebAssist

use getData()

if the name of the ckeditor field is "editorField" the code would be:

CKEDITOR.instances.editorField.getData();

Sign in to reply to this post

CraigRBeta Tester

Thanks Jason.

I needed to change the syntax a little

CKEDITOR.instances['editorField'].getData(),, but I wouldn't have got there without your help.

Cheers

Sign in to reply to this post

CraigRBeta Tester

Got this working fine on testing server, but on live site, the CKEDITOR.instance isn’t updated, so the session value always seems to be that the text set previously.
On clicking the preview button, a block of js is fired, which does 2 things..

1. it calls an ajax function to set session variables based on the form fields
2. it opens a popup window, which displays the session values in an email ‘preview’
Here is the code

<script type="text/javascript">
$(document).ready(function () {
$('#preview').click(function(e){

$.ajax({
type: 'POST',
url: '/admin/mail/plugins/setmailsession.php',//use full path !
data: {
subject: $('#emailsubject').val(),
eventid: '', //set eventid session value to empty string
message: CKEDITOR.instances['Message'].getData(),
}

})
//alert(CKEDITOR.instances['Message'].getData());

$.window({
title: document.getElementById('emailsubject').value,
url: "/admin/mail/email_campaign_template.php?CampaignType=3",//General Email
width: 650, // window width
height: 650, // window height
draggable: false,
resizable: false,
maximizable: false,
minimizable: false,
showModal: true
});

e.preventDefault();
});
});
</script>


The ‘subject’ session value is updated ok, but the message shows the ‘previous’ content of the editor

Sign in to reply to this post

Ray BorduinWebAssist

The issue is the A in AJAX stands for asynchronous... this means that it won't wait for the sessions to be updated before loading the page... so it is a timing and order of operations issue.

You need to pass another argument to the ajax function call: async: false;

If you turn off asynchronous then it will wait for the session variables to be updated before opening the window.

Sign in to reply to this post

CraigRBeta Tester

Thanks Ray, that seems to have resolved the issue.

A Happy Christmas and New Year to everyone at Webassist

Sign in to reply to this post

sumit.sharma211

Originally Said By: Jason Byrnes
  use getData()

if the name of the ckeditor field is "editorField" the code would be:

CKEDITOR.instances.editorField.getData();  
Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...