ankurk91 / vue-trumbowyg

Vue.js component for Trumbowyg WYSIWYG editor :memo:
https://ankurk91.github.io/vue-trumbowyg/
MIT License
236 stars 35 forks source link

Having an issue when registering vue-trumbowyg globally in resources/app.js #47

Closed torressam333 closed 4 years ago

torressam333 commented 4 years ago

**I installed this package using npm. I have jquery version 3.4.

If I just import vue-trumbowyg locally into my vue component it works fine. The global registration is the issue.

When I try to register the package globally I run into some errors in the console.

  import Vue from 'vue';
  import VueTrumbowyg from 'vue-trumbowyg';
  import 'trumbowyg/dist/ui/trumbowyg.css';
  Vue.use(VueTrumbowyg);

The errors I get in the console

app.js:162177 Uncaught TypeError: Cannot set property 'trumbowyg' of undefined
    at Object../node_modules/vue-trumbowyg/node_modules/trumbowyg/dist/trumbowyg.js (app.js:162177)
    at __webpack_require__ (app.js:20)
    at app.js:162155
    at Object../node_modules/vue-trumbowyg/dist/vue-trumbowyg.min.js (app.js:162155)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/app.js (app.js:176215)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:180645)
    at __webpack_require__ (app.js:20)
    at app.js:84
./node_modules/vue-trumbowyg/node_modules/trumbowyg/dist/trumbowyg.js @ app.js:162177
__webpack_require__ @ app.js:20
(anonymous) @ app.js:162155
./node_modules/vue-trumbowyg/dist/vue-trumbowyg.min.js @ app.js:162155
__webpack_require__ @ app.js:20
./resources/js/app.js @ app.js:176215
__webpack_require__ @ app.js:20
0 @ app.js:180645
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87

When I go to the file in question, the error is occurring at this line:

jQuery.trumbowyg = {  //<----- Error at this line
    langs: {
        en: {
            viewHTML: 'View HTML',

            undo: 'Undo',
            redo: 'Redo',

            formatting: 'Formatting',
            p: 'Paragraph',
            blockquote: 'Quote',
            code: 'Code',
            header: 'Header',

            bold: 'Bold',
            italic: 'Italic',
            strikethrough: 'Strikethrough',
            underline: 'Underline',

            strong: 'Strong',
            em: 'Emphasis',
            del: 'Deleted',

            superscript: 'Superscript',
            subscript: 'Subscript',

            unorderedList: 'Unordered list',
            orderedList: 'Ordered list',

            insertImage: 'Insert Image',
            link: 'Link',
            createLink: 'Insert link',
            unlink: 'Remove link',

            justifyLeft: 'Align Left',
            justifyCenter: 'Align Center',
            justifyRight: 'Align Right',
            justifyFull: 'Align Justify',

            horizontalRule: 'Insert horizontal rule',
            removeformat: 'Remove format',

            fullscreen: 'Fullscreen',

            close: 'Close',

            submit: 'Confirm',
            reset: 'Cancel',

            required: 'Required',
            description: 'Description',
            title: 'Title',
            text: 'Text',
            target: 'Target',
            width: 'Width'
        }

Ubuntu 18.04

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

ankurk91 commented 4 years ago

most likely duplicate of https://github.com/ankurk91/vue-trumbowyg/issues/17