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.



class EHtmlEditor extends EMarkitupWidget


	private $jqmodalId;



	 * This method initialize the widget.


	public function init()



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




	public function run()



		$jqmodal = <<<MODAL

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

	<div class="jqmTitle">


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


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




		echo $jqmodal;



	protected function registerClientScript()






		$previewJs = <<<PREVIEW

function previewMarkdown (container, url, content) {

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

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







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

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



In your form add


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

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




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


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


[*]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);'}


Con eso funciona.

I use markitup on

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