angular - QuillJS editor loads correctly, but fails to find CSS files during pasting -
i have angular2 (rc5) , primeng (beta 13) app uses primeng editor component (p-editor) based on quilljs editor (v1.0.0-rc.2). project based on angular 2 seed project.
the page editor component loads fine, , able basic text editing. however, when try paste text editor, chrome dev tools reports number 404 errors:
the strange thing if hover on clipboard.js:122 link in dev tools, address show webpack:///./modules/clipboard.js
don't believe using webpack.
here tools/config/project.config.ts file
import { join } 'path'; import { seedconfig } './seed.config'; /** * class extends basic seed configuration, allowing project specific overrides. few examples can found * below. */ export class projectconfig extends seedconfig { project_tasks_dir = join(process.cwd(), this.tools_dir, 'tasks', 'project'); fonts_dest = `${this.app_dest}/fonts`; fonts_src = [ 'node_modules/font-awesome/fonts/**' ]; constructor() { super(); // this.app_title = 'put name of app here'; /* enable typeless compiler runs (faster) between typed compiler runs. */ // this.typed_compile_interval = 5; // add `npm` third-party libraries injected/bundled. this.npm_dependencies = [ ...this.npm_dependencies, // {src: 'jquery/dist/jquery.min.js', inject: 'libs'}, { src: 'lodash/lodash.min.js', inject: 'libs' }, { src: 'primeui/primeui-ng-all.min.js', inject: 'libs' }, { src: 'quill/dist/quill.min.js', inject: 'libs' }, { src: 'primeui/themes/delta/theme.css', inject: true }, // inject css section { src: 'font-awesome/css/font-awesome.min.css', inject: true }, // inject css section { src: 'primeui/primeui-ng-all.min.css', inject: true }, // inject css section { src: 'quill/dist/quill.snow.css', inject: true } ]; // add `local` third-party libraries injected/bundled. this.app_assets = [ ...this.app_assets, // {src: `${this.app_src}/your-path-to-lib/libs/jquery-ui.js`, inject: true, vendor: false} // {src: `${this.css_src}/path-to-lib/test-lib.css`, inject: true, vendor: false}, ]; /* add or override npm module configurations: */ // this.mergeobject(this.plugin_configs['browser-sync'], { ghostmode: false }); } }
looks dependency of quill (clipboard) not getting loaded properly. how fix this?
solved problem following instructions in add external dependency article on angular2 seed wiki.
removed quill entries npm_dependencies , added following code constructor of projectconfig class in tools/config/project.config.ts
this.system_config_dev.paths['quill'] = `${this.app_base}node_modules/quill/quill`; this.system_builder_config.packages['quill'] = { main: 'quill.js', defaultextension : 'js' };
Comments
Post a Comment