如何使用NPM，Webpacker和Rails安装Quill dev 2.0？

编程问答 2022-08-15

问题描述

让quilljs Dev 2.0与我的rails项目一起使用时遇到问题。 Vanilla quilljs可以正常工作，但是当我通过npm安装quill-2.0-dev并将其导入Webpacker时，我得到了意外的令牌'！'

控制台错误：

enter image description here

enter image description here

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');

我收到此错误：

enter image description here

但是您可以看到，它在我的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>

流docs

npmnpmquillruby-on-railswebpackwebpackwebpack