如何使用 NPM、Webpacker 和 Rails 安装 Quill dev 2.0?
How to install Quill dev 2.0 with NPM, Webpacker, and Rails?
在我的 rails 项目中使用 Quilljs Dev 2.0 时遇到问题。 Vanilla Quilljs 工作得很好,但是当我通过 npm 安装 quill-2.0-dev 并将其导入 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>
流淌着docs
在我的 rails 项目中使用 Quilljs Dev 2.0 时遇到问题。 Vanilla Quilljs 工作得很好,但是当我通过 npm 安装 quill-2.0-dev 并将其导入 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>
流淌着docs