Блог

Возникли проблемы с получением Quilljs Dev 2.0 для работы с моим проектом rails. Ванильный Quilljs работает просто отлично, но когда я устанавливаю quill-2.0-dev через npm и импортирую его в Webpacker, я получаю неожиданный токен ‘!’

Ошибки в консоли:

app/javascript/packs/quill-editor.js

 import Quill from 'quill-2.0-dev'
export default Quill;

window.onload = () => {

const quill = new Quill('#editor', {
    modules: {
        toolbar: {
            container: '#toolbar'
        }
    },
    placeholder: 'Compose a document...',
    theme: 'snow'
});
};
  

package.json

   "dependencies": {
"@babel/core": "^7.11.1",
"@client-side-validations/client-side-validations": "^0.1.4",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.2-1",
"@rails/webpacker": "^4.0.7",
"boxicons": "^2.0.4",
"i": "^0.3.6",
"jquery": "^3.4.1",
"npm": "^6.14.8",
"quill-2.0-dev": "^2.0.0-dev.3",
"quill-blot-formatter": "^1.0.5",
"quill-emoji": "^0.1.7",
"turbolinks": "^5.2.0"
  

},

Обновить

Когда я пытаюсь это сделать с ключевым словом require:

 const Quill = require('quill-2.0-dev');
  

Я получаю эту ошибку:

но, как вы можете видеть, это в моем package.json (выше)

Выполните этот шаг, это может помочь

 # Add package from yarn
yarn add quill-2.0-dev

# Import module in app/javascript/packs/application.js 

import Quill from 'quill-2.0-dev/core'
import Toolbar from 'quill-2.0-dev/modules/toolbar'
import Snow from 'quill-2.0-dev/themes/snow';
import Bold from 'quill-2.0-dev/formats/bold';
import Italic from 'quill-2.0-dev/formats/italic';
import Header from 'quill-2.0-dev/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});

# Init

window.onload = function() {
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
}

# In view

<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

  

Загружаю документы