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(

	'id'=>'ext-comment-form',

    'action'=>array('/comment/comment/create'),

	'enableAjaxValidation'=>false

)); ?>


	<?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>


	<div class="row buttons">

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


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

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

			echo CHtml::ajaxSubmitButton('Submit',

                array('/comment/comment/create'),

		        array(

                    'replace'=>'#ext-comment-form-new',

                    'error'=>"function(){

                        $('#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),

				array(

					'replace'=>'#ext-comment-form-edit-'.$comment->id,

					'error'=>"function(){

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

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

					}"

		        ),

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

	        );

		}

		?>

	</div>


<?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 :


		[


		['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','SelectAll','RemoveFormat'],


		['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],


		['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],


		]


	};

        //Set for the CKEditor

		$('#Campaign_email_content').ckeditor(config);


    });

</script>




<?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">

	tinyMCE.init({

		// 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"

		}

	});

</script>

<div class="form">


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

	'id'=>'about-form',

	'enableAjaxValidation'=>false,

)); ?>


	<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>


	<div class="row buttons">

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

	</div>


<?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:

https://github.com/dybskiy/redactor-js/issues/48

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).