0
Ich versuche, einen benutzerdefinierten Blot für Quill zu schreiben, so dass wir HTML5-Video-Tags zum Editor hinzufügen können. Ich habe eine funktionierende Version dieses Codes, die im Entwicklungsmodus funktioniert, aber beim Erstellen des Angular AOT-Builds nicht kompiliert werden kann.Benutzerdefinierte Video Blot für Quill
Der Fehler Ich erhalte ist
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'.
Der Blot in quillComponent als
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);
Die Einfuhren für quillComponent definiert sind
import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
import { GlobalService } from "../../service/global.service";
und das Hinzufügen des Videos zu den Editor ist fertig durch
this.quill.insertEmbed(this.range.index + 1, 'clbvideo', {
src: this.urlText
}, "user");
Ich habe viele, viele verschiedene Möglichkeiten ausprobiert, Quill und die anderen Abhängigkeiten in unser quillModule zu importieren, aber keiner von ihnen funktioniert wirklich korrekt. Ich habe versucht, fast jeden Vorschlag aus diesen beiden: Reference 1 Reference 2
Wir verwenden webpack und @ ngtools/webpack für unsere Typoskript Quellen verarbeiten.
Wenn relevant, ist dies der TSconfig für unsere AOT
{
"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
}
}
bauen und das ist unser AOT webpack Config
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"
})
]
};
Und dies sind
die Pinole Teile Paket-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=="
},
FYI: Ich habe auch versucht, die neueste Version von diesen zu verwenden.