slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.2k stars 3.36k forks source link

Toolbar is not rendered correctly when instantiating with webpack #1868

Closed asolopovas closed 6 years ago

asolopovas commented 6 years ago

Hi, I am using webpack, when instantiating Quill class and read https://quilljs.com/guides/adding-quill-to-your-build-pipeline. So I imported aliases as it has been suggested in https://github.com/quilljs/webpack-example

resolve: {
    alias: {
      'parchment': utils.resolve('node_modules/parchment/src/parchment.ts'),
      'quill$': utils.resolve('node_modules/quill/quill.js'),
    }
}

then created Quill export like so quill-build.js

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';

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

export default Quill;

Imported it in my component and when attaching it to html element here is what I get

This is what I get inside chrome devtools when inspecting this tag.

If I import quil.min.js from cdn it renders everything correctly.

Platforms: Windows 10 x64 Chrome : 62.0.3202.94 (64bit) Quill ver: 1.3.4 Webpack: 3.10.0

jhchen commented 6 years ago

I see this is cross posted in StackOverflow which I have commented on. Please do not cross post in the future.