Text Editor For Ajax Form Text Area

I am having a hard time trying to configure a text-editor onto a text area in an ajax form (‘CActiveForm’).

Tried tinymce, fckeditor, kindeditor and a few others. while each of them successfully replaces my original text area - when i press the submit button, the message does not get attached to the original text area content and i get a ‘field cannot be empty’ error as it is a required field.

I would be really grateful for any suggestions :unsure:

My form code looks like this:

<?php $form = $this->beginWidget('CActiveForm', array(




)); ?>

	<?php /** @var CActiveForm $form */

	echo $form->errorSummary($comment); ?>

	<div class="row">

		<?php echo $form->labelEx($comment,'message'); ?>

		<?php echo CHtml::activeTextArea($comment,'message',array('rows'=>6, 'cols'=>60, 'name'=> 'myname')); ?>

		<?php echo $form->error($comment,'message'); ?>


	<div class="row buttons">

	    <?php if ($comment->isNewRecord) {

			echo $form->hiddenField($comment, 'type');

			echo $form->hiddenField($comment, 'key');

			echo CHtml::ajaxSubmitButton('Submit',





                        $('#Comment_message').css('border-color', 'red');

                        $('#Comment_message').css('background-color', '#fcc');



		        array('id'=>'ext-comment-submit' . (isset($ajaxId) ? $ajaxId : ''))


		} else {

			echo CHtml::ajaxSubmitButton('Update',

				array('/comment/comment/update', 'id'=>$comment->id),




						$('#Comment_message').css('border-color', 'red');

						$('#Comment_message').css('background-color', '#fcc');



		        array('id'=>'ext-comment-submit' . (isset($ajaxId) ? $ajaxId : ''))





<?php $this->endWidget() ?>

Use Firebug to check that the data is being posted. If the data is there, the problem is in your create/update action within the controller.

thanks for replying… finally did this without using extensions and it worked right out of the box :)

learnt a lesson not to rely too much on extensions for simple things like this :P

ckeditor is working for me!!

<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/assets/ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/assets/ckeditor/adapters/jquery.js"></script>

<script type="text/javascript">

	$(document).ready(function () {

	var config =


		height: 720,

		width : '100%',

		resize_enabled : false,

		toolbar :







        //Set for the CKEditor




<?php  echo $form->textArea($model,'email_content',array('rows'=>6, 'cols'=>50)); ?>  //Campaign_email_content

I have used Tinymce , this used to upload media images also, This is working fine.

    <script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/tiny_mce.js"></script>

<script type="text/javascript">


		// General options

		mode : "textareas",

		theme : "advanced",

		plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",

		// Theme options

		theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",

		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",

		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",

		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",

		theme_advanced_toolbar_location : "top",

		theme_advanced_toolbar_align : "left",

		theme_advanced_statusbar_location : "bottom",

		theme_advanced_resizing : true,

		// Example content CSS (should be your site CSS)

		content_css : "css/content.css",

		// Drop lists for link/image/media/template dialogs

		template_external_list_url : "lists/template_list.js",

		external_link_list_url : "lists/link_list.js",

		external_image_list_url : "lists/image_list.js",

		media_external_list_url : "lists/media_list.js",

		// Style formats

		style_formats : [

			{title : 'Bold text', inline : 'b'},

			{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},

			{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},

			{title : 'Example 1', inline : 'span', classes : 'example1'},

			{title : 'Example 2', inline : 'span', classes : 'example2'},

			{title : 'Table styles'},

			{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}


		// Replace values for the template plugin

		template_replace_values : {

			username : "Some User",

			staffid : "991234"




<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(



)); ?>

	<p class="note">Fields with <span class="required">*</span> are required.</p>

	<?php echo $form->errorSummary($model); ?>

	<div class="row">

		<?php echo $form->labelEx($model,'content'); ?>

		<?php echo $form->textArea($model,'content',array('rows'=>6, 'cols'=>50)); ?>

		<?php echo $form->error($model,'content'); ?>


	<div class="row buttons">

		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>


<?php $this->endWidget(); ?>

</div><!-- form -->

Download js files from http://www.tinymce.com/

Finally settled for jqueryte -

a sweet simple text editor.

did it with just one line of code ::)

I don’t want to be anal, but checkout the html produced by some of these editors. I’ve had no end of problems.

There’s a lot of html5 “contenteditable” style editors available recently.

The problem is that different browsers have their own implementation of "contenteditable".

Firefox currently seems to render a paragraph when you press "<ENTER>" in a "contenteditable" element. It used to render a <br>.

Chrome (and other Webkit browsers) render a paragraph usually, but if you press "<ENTER>" twice after a closing </ul> or closing </ol> (not tested) you would also expect a new paragraph… but no, Webkit browsers render a <div>. Not only do they render a <div>, but depending on the css that the editable area is using, Webkit browsers might render additional style information, often in an additional <span> tag.

None of these editors seem to handle this problem effectively.

Here’s a partial fix requested for Redactor.js, but the problem is the same everywhere:


Even with “jqte()” try deleting the content in the demo here, then add some text, add an unordered list followed by some more text, then view the source ("</>" button). It’s awful - best seen in Chrome (or Webkit browser).