Question

I have a question about implementing WYSIWYG editors into CakePHP. I’m developing an intranet for employees where I work. I’m currently using CakePHP 1.3. I found this repository

https://github.com/josegonzalez/cakephp-wysiwyg-helper/tree/1.3

which contains several different WYSIWYG editors bundled together. I followed the instructions, and made sure I downloaded the JS distribution of NicEdit (along with TinyMCE, after I struggled with NicEdit, still neither of which works).

I run

echo $this->Nicedit->input('content');

in my view. When I load the page in my browser the input box appears properly, however there is no toolbar for text editing. Upon inspection of the scripts when the page runs, under this block of code

<div class="input textarea required"><label for="AnnouncementContent">Content</label><textarea name="data[Announcement][content]" cols="30" rows="6" id="AnnouncementContent" ></textarea></div><script type="text/javascript">
        var area1;
        function makePanel() {
            area1 = new nicEditor({fullPanel : true}).panelInstance(
                'AnnouncementContent',
                {hasPanel : true}
            );
        }
        bkLib.onDomLoaded(function() { makePanel(); });</script>    

I receive this error: Uncaught ReferenceError: bkLib is not defined

I’ve spent hours trying to fix this issue to no avail. Does anyone have some insight on approaching this problem?

Answer 1

Here’s how I set up TinyMCE in a recent 1.3 project, without using that plugin:

From my view that used the TinyMCE editor:

//tell template to include the tinyMCE javascript file
<?php  
if(isset($javascript)): 
    echo $javascript->link('tiny_mce/tiny_mce.js'); 
endif; 
?>

//Build the form I need
<div class="responses form">
<?php echo $this->Form->create(null, array('controller' => 'Responses', 'action' => 'add')); ?>
    <fieldset>
        <legend>Add Response</legend>
    <?php
        echo $form->hidden('listing_id', array('value' => $tempid));
        echo $this->Form->input('content');
    ?>
    </fieldset>
<?php echo $this->Form->end(__('Submit', true));?>
</div>

//set up the editor
<script type="text/javascript"> 
    tinyMCE.init({ 
        theme : "simple", 
        mode : "textareas", 
        convert_urls : false 
    });
</script>

I know this isn’t really answering your question if you really want to use that plugin, but if you’re okay with just using TinyMCE you can set it up really easily this way. The best part is, it autoconverts to HTML so you can just save to your database. When you retrieve the data from your database, it’ll be in the properly formatted html, so you can easily display it.

You can also be more specific in the init method in terms of which text area you want it to use. I had trouble getting it to only activate on a specific text area, but you might have different luck. The documentation is here. You can also turn on more advanced themes. The documentation describes the options.