etinymce

Simple way to use TinyMCE 4.0.12 with Yii.
8 followers

This extension lets you use TinyMCE on your Yii Project.

This extension simple publishes TinyMCE files to your sites /assets directory and registers them so they can be used.

I think this is a good approach because you don't need to learn anything specific to the extension and all the code required to display and configure the Textarea are in the view.

Requirements

Yii 1.1 or above

Installation

Extract the release file under protected/extensions

Usage

In the view file that you want to use TinyMce add the following right before the <?php $this->endWidget(); ?> tag.

<?php $this->widget('application.extensions.tinymce.SladekTinyMce'); ?>
 
<script>
        tinymce.init({selector:'textarea'});
</script>
 
<?php $this->endWidget(); ?>

In the code above <?php $this->widget('application.extensions.tinymce.SladekTinyMce'); ?> is what publishes the assets (if they are not already published). is what actually used to configure the textarea and can be configured exactly as described in TinyMCE's Documentation

Here is a full example of a form that has two fields. *note that selector:'textarea' will apply to all text areas or you can specify individual textareas with selector: "textarea#YOUR_TEXTAREAS_ID"

<?php
/* @var $this ContractsController */
/* @var $model Contracts */
/* @var $form CActiveForm */
?>
 
<div class="form">
 
<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'contracts-form',
    // Please note: When you enable ajax validation, make sure the corresponding
    // controller action is handling ajax validation correctly.
    // There is a call to performAjaxValidation() commented in generated controller code.
    // See class documentation of CActiveForm for details on this.
    '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,'contractName'); ?>
        <?php echo $form->textArea($model,'contractName',array('rows'=>6, 'cols'=>50)); ?>
        <?php echo $form->error($model,'contractName'); ?>
    </div>
 
    <div class="tinymce">
        <?php echo $form->labelEx($model,'contractData'); ?>
        <?php echo $form->textArea($model,'contractData',array('rows'=>6, 'cols'=>50)); ?>           
        <?php echo $form->error($model,'contractData'); ?>
    </div>
 
    <div class="row buttons">
        <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
    </div>
 
<?php $this->widget('application.extensions.tinymce.SladekTinyMce'); ?>
 
<script>
    tinymce.init({
    selector: "textarea#Contracts_contractName",
    menubar: false,
    width: 900,
    height: 300,
   toolbar1: "undo redo | bold | italic underline | alignleft aligncenter alignright alignjustify ", 
   toolbar2: "outdent indent | hr | sub sup | bullist numlist | formatselect fontselect fontsizeselect | cut copy paste pastetext pasteword | search replace ", 
 
 }); 
 </script>
 
<script type="text/javascript">
 
    tinymce.init({
    selector: "textarea#Contracts_contractData",
    theme: "modern",
    width: 900,
    height: 300,
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons", 
   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'}
    ]
 }); 
 </script>
 
 
<?php $this->endWidget(); ?>
 
</div><!-- form -->

Resources

http://www.tinymce.com/

Total 4 comments

#18229 report it
swedenfox at 2014/09/30 12:04pm
Working Perfect

Thank you for sharing it , i need your help , do you know why uneditable plugin seems to don't work ?

tinymce.init({
            selector: "textarea#Message_body",
            //theme: "simple",
            width: 900,
            height: 50,
            menubar: false,
            toolbar1: false,
            toolbar2: false,
            statusbar: false,
            panel: false,
            //language : 'it',
            plugins: "noneditable",
            noneditable_leave_contenteditable: true
        });

EDIT

it works with readonly:true, as parameter of tinymce . Again thnx

#16823 report it
Alex D. at 2014/04/01 06:28am
File upload

Thank you for extention. What is the best file (image) upload module to fit with this extention?

#16568 report it
GPM at 2014/03/06 05:42am
Highly Recommended !!!

Great extension and so easy to install.

Thank you :)

#16253 report it
dnanwn at 2014/02/03 02:05pm
Thanks for this extension

Everything ok

Leave a comment

Please to leave your comment.

Create extension
Downloads