Quill 的自定义视频印迹
Custom video blot for Quill
我正在尝试为 Quill 编写自定义印迹，以便我们可以向编辑器添加 HTML5 视频标签。我有此代码的工作版本，它在开发模式下运行良好，但在创建 Angular AOT 构建时无法编译。
我得到的错误是
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (31,26): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (32,22): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (33,21): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (37,22): Property 'cache' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (46,22): Property 'cache' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (67,19): Property 'blotName' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (68,19): Property 'tagName' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (73,22): Property 'cache' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (82,22): Property 'cache' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (103,19): Property 'blotName' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (104,19): Property 'tagName' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (121,20): Property 'blotName' does not exist on type 'typeof SourceBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (122,20): Property 'tagName' does not exist on type 'typeof SourceBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (125,9): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (126,9): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (127,9): Cannot find name 'Quill'.
印迹在 quillComponent 中定义为
let BlockEmbed = Quill.import('blots/block/embed');
let Inline = Quill.import('blots/inline');
let Block = Quill.import('blots/block');
class VideoBlot extends BlockEmbed {
static create(value) {
this.cache = {};
let node = super.create();
node.setAttribute('controls', '');
node.setAttribute('controlsList', 'nodownload');
node.setAttribute('style', 'max-width:720px');
node.setAttribute('player-source', value.src);
let src = document.createElement('source');
src.setAttribute('src', value.src);
node.appendChild(src);
this.cache.length = 1;//94 + value.src.length;
return node;
}
deleteAt(index: number, length: number) {
super.deleteAt(0, 1);
}
length() {
return 2;
}
static value(node) {
return {
controls: node.getAttribute('controls'),
controlsList: node.getAttribute('controlsList'),
style: node.getAttribute('max-width:720px'),
src: node.getAttribute('player-source')
};
}
}
VideoBlot.blotName = 'clbvideo';
VideoBlot.tagName = 'video';
Quill.register(VideoBlot);
quillComponent 的导入是
import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
import { GlobalService } from "../../service/global.service";
将视频添加到编辑器是通过
完成的
this.quill.insertEmbed(this.range.index + 1, 'clbvideo', {
src: this.urlText
}, "user");
我已经尝试了很多很多不同的方法来将 Quill 和其他依赖项导入到我们的 quillModule 中，但是 none 它们实际上可以正常工作。我几乎尝试了这两个的任何建议：
Reference 2
我们使用 webpack 和@ngtools/webpack 来处理我们的打字稿源。
如果相关，这是我们 AOT 构建的 tsconfig
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["dom","es2015"],
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./node_modules/@types"
],
"types": [
"core-js"
]
},
"angularCompilerOptions": {
"genDir": "aot/",
"skipMetadataEmit" : true
}
}
这是我们的 AOT webpack 配置
var webpack = require("webpack");
var helpers = require('./config/helpers');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CompressionPlugin = require("compression-webpack-plugin");
var ngtools = require('@ngtools/webpack');
const extractSass = new ExtractTextPlugin({
filename: "./scssStyles.css"
});
module.exports = {
entry: {
'polyfills': './app/polyfills.js',
'vendor': './app/vendor.ts',
'app': './app/main-aot.ts'
},
output: {
path: helpers.root('prod'),
filename: "./[name].js"
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=./assets/[name].[ext]'
},
{
test: /\.ts$/,
loaders: '@ngtools/webpack'
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
include: /\.json$/,
loaders: ["json-loader"]
}
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new ngtools.AotPlugin({
tsConfigPath: helpers.root('./tsconfig.aot.json'),
entryModule: helpers.root('./app/app.module.ts#AppModule')
}),
new ExtractTextPlugin("./styles.css"),
extractSass,
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};
这是包的羽毛笔部分-lock.json
"quill": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.2.tgz",
"integrity": "sha512-Tudr3tPSPr64J+Fnr8hsNKbi5e2xueyLROmemOIsIsUIeX+WU7LtA22HWRRHr2gGasqxhah2NzFGe9N32eJkMg==",
"requires": {
"clone": "2.1.1",
"deep-equal": "1.0.1",
"eventemitter3": "2.0.3",
"extend": "3.0.1",
"parchment": "1.1.0",
"quill-delta": "3.6.1"
},
"dependencies": {
"quill-delta": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.1.tgz",
"integrity": "sha512-jSD448mqyDevX0FhdjNppMLHl67vXEzZEDjQrtkfDXI6s6e3WJkJOZpYiVhqxLl4HcYNeAhFT+fhAeX8ef7Cew==",
"requires": {
"deep-equal": "1.0.1",
"extend": "3.0.1",
"fast-diff": "1.1.1"
}
}
}
},
"@types/quill": {
"version": "0.0.31",
"resolved": "https://registry.npmjs.org/@types/quill/-/quill-0.0.31.tgz",
"integrity": "sha512-2Y0Pr5SSNf7kpD4mWMPSYYYyVTLbBNn99DtEYzZ1hlEry1fiWCJYLTYSoGTgPvYiRU4JNRi9LYW0EOV60jN9yA=="
},
仅供参考：我也尝试使用这些的最新版本。
通过查看primeng代码找到了解决方案。我需要做的就是声明 Quill 而不是尝试导入它：
declare var Quill: any;
我正在尝试为 Quill 编写自定义印迹，以便我们可以向编辑器添加 HTML5 视频标签。我有此代码的工作版本，它在开发模式下运行良好，但在创建 Angular AOT 构建时无法编译。
我得到的错误是
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (31,26): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (32,22): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (33,21): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (37,22): Property 'cache' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (46,22): Property 'cache' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (67,19): Property 'blotName' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (68,19): Property 'tagName' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (73,22): Property 'cache' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (82,22): Property 'cache' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (103,19): Property 'blotName' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (104,19): Property 'tagName' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (121,20): Property 'blotName' does not exist on type 'typeof SourceBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (122,20): Property 'tagName' does not exist on type 'typeof SourceBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (125,9): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (126,9): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (127,9): Cannot find name 'Quill'.
印迹在 quillComponent 中定义为
let BlockEmbed = Quill.import('blots/block/embed');
let Inline = Quill.import('blots/inline');
let Block = Quill.import('blots/block');
class VideoBlot extends BlockEmbed {
static create(value) {
this.cache = {};
let node = super.create();
node.setAttribute('controls', '');
node.setAttribute('controlsList', 'nodownload');
node.setAttribute('style', 'max-width:720px');
node.setAttribute('player-source', value.src);
let src = document.createElement('source');
src.setAttribute('src', value.src);
node.appendChild(src);
this.cache.length = 1;//94 + value.src.length;
return node;
}
deleteAt(index: number, length: number) {
super.deleteAt(0, 1);
}
length() {
return 2;
}
static value(node) {
return {
controls: node.getAttribute('controls'),
controlsList: node.getAttribute('controlsList'),
style: node.getAttribute('max-width:720px'),
src: node.getAttribute('player-source')
};
}
}
VideoBlot.blotName = 'clbvideo';
VideoBlot.tagName = 'video';
Quill.register(VideoBlot);
quillComponent 的导入是
import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
import { GlobalService } from "../../service/global.service";
将视频添加到编辑器是通过
完成的this.quill.insertEmbed(this.range.index + 1, 'clbvideo', {
src: this.urlText
}, "user");
我已经尝试了很多很多不同的方法来将 Quill 和其他依赖项导入到我们的 quillModule 中，但是 none 它们实际上可以正常工作。我几乎尝试了这两个的任何建议：
我们使用 webpack 和@ngtools/webpack 来处理我们的打字稿源。
如果相关，这是我们 AOT 构建的 tsconfig
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["dom","es2015"],
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./node_modules/@types"
],
"types": [
"core-js"
]
},
"angularCompilerOptions": {
"genDir": "aot/",
"skipMetadataEmit" : true
}
}
这是我们的 AOT webpack 配置
var webpack = require("webpack");
var helpers = require('./config/helpers');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CompressionPlugin = require("compression-webpack-plugin");
var ngtools = require('@ngtools/webpack');
const extractSass = new ExtractTextPlugin({
filename: "./scssStyles.css"
});
module.exports = {
entry: {
'polyfills': './app/polyfills.js',
'vendor': './app/vendor.ts',
'app': './app/main-aot.ts'
},
output: {
path: helpers.root('prod'),
filename: "./[name].js"
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=./assets/[name].[ext]'
},
{
test: /\.ts$/,
loaders: '@ngtools/webpack'
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
include: /\.json$/,
loaders: ["json-loader"]
}
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new ngtools.AotPlugin({
tsConfigPath: helpers.root('./tsconfig.aot.json'),
entryModule: helpers.root('./app/app.module.ts#AppModule')
}),
new ExtractTextPlugin("./styles.css"),
extractSass,
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};
这是包的羽毛笔部分-lock.json
"quill": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.2.tgz",
"integrity": "sha512-Tudr3tPSPr64J+Fnr8hsNKbi5e2xueyLROmemOIsIsUIeX+WU7LtA22HWRRHr2gGasqxhah2NzFGe9N32eJkMg==",
"requires": {
"clone": "2.1.1",
"deep-equal": "1.0.1",
"eventemitter3": "2.0.3",
"extend": "3.0.1",
"parchment": "1.1.0",
"quill-delta": "3.6.1"
},
"dependencies": {
"quill-delta": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.1.tgz",
"integrity": "sha512-jSD448mqyDevX0FhdjNppMLHl67vXEzZEDjQrtkfDXI6s6e3WJkJOZpYiVhqxLl4HcYNeAhFT+fhAeX8ef7Cew==",
"requires": {
"deep-equal": "1.0.1",
"extend": "3.0.1",
"fast-diff": "1.1.1"
}
}
}
},
"@types/quill": {
"version": "0.0.31",
"resolved": "https://registry.npmjs.org/@types/quill/-/quill-0.0.31.tgz",
"integrity": "sha512-2Y0Pr5SSNf7kpD4mWMPSYYYyVTLbBNn99DtEYzZ1hlEry1fiWCJYLTYSoGTgPvYiRU4JNRi9LYW0EOV60jN9yA=="
},
仅供参考：我也尝试使用这些的最新版本。
通过查看primeng代码找到了解决方案。我需要做的就是声明 Quill 而不是尝试导入它：
declare var Quill: any;