Yii Framework Forum: Text Editor For Ajax Form Text Area - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Text Editor For Ajax Form Text Area Rate Topic: -----

#1 User is offline   sanguina 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 42
  • Joined: 22-July 12

Posted 01 March 2013 - 04:32 AM

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



until I become certain that there is no certainty.
0

#2 User is offline   outrage 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 313
  • Joined: 10-November 09
  • Location:Blackpool, United Kingdom

Posted 01 March 2013 - 11:57 AM

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

#3 User is offline   sanguina 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 42
  • Joined: 22-July 12

Posted 01 March 2013 - 06:19 PM

View Postoutrage, on 01 March 2013 - 11:57 AM, said:

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
until I become certain that there is no certainty.
0

#4 User is offline   Rajith R 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 873
  • Joined: 20-April 11
  • Location:India

Posted 02 March 2013 - 12:22 AM

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


Rajith Ramachandran,
Wiwo inc.
| Mobile: 919995504508
2

#5 User is offline   Balu 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 153
  • Joined: 09-August 11
  • Location:Kerala, India

Posted 02 March 2013 - 12:53 AM

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

#6 User is offline   sanguina 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 42
  • Joined: 22-July 12

Posted 02 March 2013 - 02:12 PM

Finally settled for jqueryte -
a sweet simple text editor.
did it with just one line of code ::)
until I become certain that there is no certainty.
0

#7 User is offline   outrage 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 313
  • Joined: 10-November 09
  • Location:Blackpool, United Kingdom

Posted 02 March 2013 - 10:36 PM

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/d...or-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).
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users