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
