MarkitUp a la Yii

This is a small tip on how to use the Yii Markitup extension to preview the content in a Modal window similar to what the Yii site does when writing a post.

Download the extension and put it in your extensions Dir.




Yii::setPathOfAlias('EHtmlEditor',dirname(__FILE__));

Yii::import('EHtmlEditor.EMarkitupWidget');


class EHtmlEditor extends EMarkitupWidget

{

	private $jqmodalId;

	

	/**

	 * This method initialize the widget.

	 */

	public function init()

	{

    $this->settings='html';

    $this->jqmodalId = ($this->hasModel()) ? get_class($this->model).'_'.$this->attribute : $this->jqmodalId = $this->attribute;

		parent::init();

	}

	

	public function run()

	{

		parent::run();


		$jqmodal = <<<MODAL

<div class="jqmWindow" id="{$this->jqmodalId}_preview">

	<div class="jqmTitle">

		<span>Preview</span>

		<a href="#" class="jqmClose"><em>Close</em></a>

	</div>

	<div class="jqmContent"></div>

</div>		

MODAL;

	

		echo $jqmodal;

	}

	

	protected function registerClientScript()

	{

		parent::registerClientScript();

		$cs=Yii::app()->getClientScript();

		$cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/jquery/jqmodal/jqModal.js');

		$cs->registerCssFile(Yii::app()->request->baseUrl.'/js/jquery/jqmodal/jqModal.css');


		$previewJs = <<<PREVIEW

function previewMarkdown (container, url, content) {

	var \$content = $(container+' .jqmContent');

	\$content.addClass('loading').html('Please wait...');

	$(container).jqmShow();

	$.post(url,{'content':content},function(data){

		\$content.removeClass('loading').html(data);

	});

}		

PREVIEW;


		$cs->registerScript('markitup-jqmodal-preview', $previewJs, CClientScript::POS_END);

		$cs->registerScript($this->jqmodalId, "$('#{$this->jqmodalId}_preview').jqm();", CClientScript::POS_READY);

	}

}



In your form add




<?php 

$previewUrl = Yii::app()->getUrlManager()->createUrl('forum/post/preview');

		$this->widget('application.extensions.markitup.EHtmlEditor', array(

			'model'=>$model,

			'attribute'=>'post_text',

			'theme'=>'simple',

			'htmlOptions'=>array('rows'=>15, 'cols'=>70),

			'options'=>array(

				'preview'=>'js:function (options) { previewMarkdown("#ForumPost_post_text_preview", "'.$previewUrl.'", $("#ForumPost_post_text").val()); }'

		)));

    ?>



Then in your controller




	public function actionPreview() {

		// clean up the content here 

			

		echo $content;

	}



The files under jquery.markitup.zip you need to replace with the corresponding files from the markitup extension

Could you please be more explicit please?. Sorry if I sound evil, speak no English

Test failure! Can you give a complete demo!

Funcion├│ con dos modificaciones:

[list=1]

[*]En actionPreview() en lugar de echo $content, puse


echo $_POST['content'];

[*]En set.js modificar la ├║ltima linea, la que llama a la funcion preview


{name:'Preview', className:'preview', call:'options.preview(options);'}

[/list]

Con eso funciona.

I use markitup on http://demo.wedson.se/sdashboard?rand=1343414101

http://www.yiiframework.com/extension/sdashboard/

A totally diffrent approach to the one above, very simple. Study the sourcecode for the module :)