Only October's Rich Editor loads

[tyssen]

I'm new to OctoberCMS and trying out your plugin to add WYSIWYG fields but it seems only the Rich Editor works. With the others I get errors in the console like:

Uncaught TypeError: $(...).editable is not a function Uncaught TypeError: $(...).ckeditor is not a function

I'm only trying to use it for Pages at the moment and all I've done is install the plugin then udpate its settings. Is there something I'm supposed to do?

[gabexrivera]

Hi Anand, Thanks for the plugin. I have this same issue. Anything I need to do to avoid this?

[developer-jun]

With fresh install of October and this plugin I am also getting a similar issue, since I was gonna use tinyMCE so I got the javascript error:

"tinymce is not defined"

Of course it's just missing the tinymce javascript source file.

I'm no expert on October platform so I'm just going to suggest a quick fixed to some that just want it to work.

Simply navigate into the file system \modules\backend\layouts_head.htm and add the code below, just under the list of javascript includes. Yes, I'm using windows hence the backslash.

<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>

If you're using a different Wysiwyg simply change the source.

[tschallacka]

This is caused by a racing condition. The author has used $(document).ready but the moment tinymce is loaded the document is long ready because all these things are added dynamically.

I modified _tinymce a bit to have a loading check to see when the js fiile has finally loaded to get a workable solution, but you really should add a dynamic script loader that verifies. This is the quick'n'dirty solution, but it works ;-)

<div data-control="wysiwyg">
    <textarea name="<?php echo $name ?>" class="tinymcecontainer" id="<?php echo $this->getId('textarea') ?>"><?= e($value) ?></textarea>
</div>
<script>
     function initTinyMCE() {
     tinymce.init({
        selector: 'textarea.tinymcecontainer',
        theme: "modern",
        setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
        },
        relative_urls: false,
        width:    '<?php echo $width; ?>',
        height:   '<?php echo $height; ?>',
        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"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | preview",
        file_browser_callback : elFinderBrowser

    });

    function elFinderBrowser (field_name, url, type, win) {
        tinymce.activeEditor.windowManager.open({
        file: '<?php echo URL::to('elfinder/tinymce4'); ?>',// use an absolute path!
        title: 'elFinder 2.0',
        width: 900,
        height: 450,
        resizable: 'yes'
        }, {
        setUrl: function (url) {
            win.document.getElementById(field_name).value = url;
        }
        });
        return false;
    }
     }
     function tryToRun() {
       if(typeof tinymce !== 'undefined') {
    initTinyMCE();
     }
     else {
     window.setTimeout(function(){tryToRun();},100);
      }
     }
    $(document).ready( function() {
      tryToRun();
    } );

</script>

[gergo85]

I have same issue.

[taviroquai]

I think this issue is the same as #30. Only October's Rich editor runs and don't give javascript errors.

[benbenwilde]

fail

[nickmealey]

This is still an issue, which makes this plugin pretty useless...

[Insanityandme]

Still got this issue, very curious if it's on its way of getting fixed!

[benbenwilde]

This library is WAY out of date!

But for those who want to use Froala: I suggest manually downloading latest froala version and replacing contents of assets/froala directory with the new stuff, and then replace contents of partials/_froala.htm with:

<textarea name="<?php echo $name ?>" id="<?php echo $this->getId('textarea') ?>"><?= e($value) ?></textarea>
<script>
    function froalaInit()
    {
        $('textarea[name=markup]').froalaEditor({
            width:    '<?php echo $width; ?>',
            height:   '<?php echo $height; ?>',
            imageUploadURL: '<?php echo URL::to('image_upload'); ?>',
            imageUploadParams: {id: "my_editor"},
            imageDeleteURL: '<?php echo URL::to('delete_image'); ?>',
        })
            // Catch image removal from the editor.
                .on('editable.afterRemoveImage', function (e, editor, $img) {
                    // Set the image source to the image delete params.
                    editor.options.imageDeleteParams = {src: $img.attr('src')};
                    // Make the delete request.
                    editor.deleteImage($img);
                });
    }

    $(function() {
        if (typeof $('textarea[name=markup]').editable === 'undefined') {
            $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/froala_editor.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/froala_style.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/code_view.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/colors.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/emoticons.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/image_manager.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/image.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/line_breaker.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/table.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/char_counter.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/video.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/fullscreen.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/css/plugins/file.min.css'); ?>" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css" type="text/css" />');

            $.getScript('https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js', function () {
            $.getScript('https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/froala_editor.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/align.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/code_beautifier.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/code_view.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/colors.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/emoticons.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/font_size.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/font_family.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/image.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/file.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/image_manager.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/line_breaker.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/link.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/lists.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/paragraph_format.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/paragraph_style.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/video.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/table.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/url.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/entities.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/char_counter.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/inline_style.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/save.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/fullscreen.min.js'); ?>', function () {
            $.getScript('<?php echo url('/plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/froala/js/plugins/quote.min.js'); ?>', function () {
                froalaInit();
            }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); });
        } else {
            froalaInit();
        }
    });
</script>

This code utilizes the latest version of Froala, with all the features. I think this is all you need to make it work, but I might have missed something...

[Insanityandme]

Thank you so much benbenwilde I love you!