Вызов функции внешней библиотеки внутри VueJS - PullRequest
Новая
       28

Вызов функции внешней библиотеки внутри VueJS

0 голосов
/ 31 мая 2018

Я искал вокруг, но не нашел работающего примера того, как это делается.В основном я пытаюсь подключить внешний файл JS (написанный на JS) и пытаюсь вызвать его функцию, используя это. 

<script src="/static/medium-editor.min.js"></script>

<script>


export default {
name: 'App',

mounted: function() {
    var editor = new MediumEditor('.editable', {
        toolbar: {
            buttons: ['bold', 'italic', 'underline', 'anchor']
        }
    });
    console.log('testing...')
}

}
</script>

Файл, кажется, загружается нормально, но я получаю эту ошибку 

ReferenceError: MediumEditor is not defined

Я также пытался использовать импорт MediumEditor, но я думаю, что мы должны экспортировать его в другой файл js, который также не работает.

Для справки, я пытаюсь добавить этот плагинна мой тестовый проект vuejs: https://github.com/yabwe/medium-editor/blob/master/dist/js/medium-editor.js

Если у кого-нибудь есть идеи о том, как мы можем вызвать эту внешнюю функцию в VueJS и заставить ее работать, я буду очень признателен.Я новичок, но я искал весь день и не нашел аналогичного решения.

Заранее спасибо

Чандра

Обновление :Добавлен JSFiddle, если вы хотите попробовать: https://jsfiddle.net/maharzan/nze45uxf/2/

1 Ответ

0 голосов
/ 31 мая 2018

Вам не нужно импортировать файл с помощью тега script, сделайте это с помощью оператора import. 

<script>

    import MediumEditor from '/static/medium-editor.min.js'

    export default {
        name: 'App',

        mounted: function() {
            var editor = new MediumEditor('.editable', {
                toolbar: {
                buttons: ['bold', 'italic', 'underline', 'anchor']
            });
            console.log('testing...')
        }
    }

</script>

Обновление: -

, если вы экспортируете функцию с помощьюmodule.exports, а затем импорт его с помощью операторов import выдает ошибку Cannot assign to read-only property 'exports' of object '#<Object>.Чтобы предотвратить это, экспортируйте функцию, используя export default.

См. Это: - https://github.com/webpack/webpack/issues/4039

...