Using a WYSIWYG editor with webpack

Hello eveyone.

I'm trying to figure out how to implement any wysiwyg editor to my laravel application.

The problem I faced with is Uncaught TypeError: Cannot read property 'fn' of undefined

I guess it's because jquery is not ready yet.

Could you provide some tips how would I do it correct? How do you do it? It doesn't matter for me what editor to use.

Last time I tried out is https://mindmup.github.io/bootstrap-wysiwyg/

webpack.mix.js

mix.autoload({
    jquery: ['$', 'jQuery', 'window.jQuery'],
});

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['bootstrap-sass', 'jquery']);

mix.copy('resources/assets/js/vendor/bootstrap-wysiwyg.js', 'public/js/vendor');

the bottom of my layout file

<textarea></textarea>

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
<script src="/js/vendor/bootstrap-wysiwyg.js"></script>
<script>
    $(document).ready(function () {
        $('textarea').wysiwyg();
    });
</script>

I tried to install CKEDITOR, tinymce with npm and composer but every time I was missing something, it always wanted to load some dependencies and didn't work.

P.S. I've solved it using tinymce cdn but still wonder how do you do it.

ejdelmonico

8 years ago

Best Answer

Level 53

I use a script tag in the view to load the editor. I do not run it through webpack since it is not needed throughout the entire site. I use a partial for the blade code. Something like this:

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
    var editor_config = {
        path_absolute : "/",
        selector: "textarea",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
        relative_urls: false,
        file_browser_callback : function(field_name, url, type, win) {
            var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
            var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

            var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
            if (type == 'image') {
                cmsURL = cmsURL + "&type=Images";
            } else {
                cmsURL = cmsURL + "&type=Files";
            }

            tinyMCE.activeEditor.windowManager.open({
                file : cmsURL,
                title : 'Filemanager',
                width : x * 0.8,
                height : y * 0.8,
                resizable : "yes",
                close_previous : "no"
            });
        }
    };

    tinymce.init(editor_config);
</script>

1 like

Jaytee

8 years ago

Level 39

Yeah what @ejdelmonico said. There's very few pages that require textual inputs, so it's best to extract it to a partial and include it when needed.

Not everything needs to be compiled into a file.

1 like

Please or to participate in this conversation.