Wie formatiert man Text und bette ein Video mit Quill ein?

Question

Ich fing an, ein WYSIWYG in ein Blogprojekt zu integrieren, ich benutze dafür Quill (ich hatte vorher keine Erfahrung damit). Ich war in der Lage, meinen Editor so anzupassen, wie es erforderlich war. Was ich nicht verstehe, ist, wie man mit Textformaten umgeht und Videos einbettet. Ich habe zwei Felder in meiner Postform, "Vorschau" und "Inhalt" (zwei Federkiel-Editoren), während ich den Text vorstelle, den ich Format geben kann (Kopfzeile, Kursivschrift, Unterstreichung usw.) und wenn ich auf die Option Video einbetten klicke Editor erlaubt mir, den Link hinzuzufügen und das eingebettete Video in diesem Moment zu visualisieren. Wenn ich meine Speichern-Taste drücke, speichert es den Post in meinem db, aber auf meiner einzigen Post-Seite visualisiere ich alle Felder ohne Format (Header, Kursiv, Unterstrichen ... usw.) und auch kein Video einbetten. Wie kann ich das Format angeben und das Video zeigen? Jede Hilfe wäre willkommen.

Ich habe die Quill-Dokumentation gelesen und versucht zu verstehen, wie ich mit Deltas umgehen kann, aber ich weiß nicht, wie ich das machen soll.

Ich bin mit Meteor + Reaktion, dies ist mein Code (Ich werde nur ein entsprechenden Code anzeigen):

Das ist mein lib, quill.jsx

import React, { Component } from 'react'; 
import QuillLib from './vendor/quill.js'; 
import { ud } from '/helpers/lib/main.jsx'; 

class Quill extends Component { 
    constructor(props) { 
    super(props); 
    this.id = ud.shortUID(); 
} 

componentDidMount() { 
    const that = this; 
    const toolbarOptions = [ 
    [{ font: [] }], 
    [{ header: 1 }, { header: 2 }], 
    [{ header: [1, 2, 3, 4, 5, 6, false] }], 
    [{ align: [] }], 
    ['bold', 'italic', 'underline', 'strike'], 
    ['blockquote', 'code-block'], 
    [{ script: 'sub' }, { script: 'super' }], 
    [{ indent: '-1' }, { indent: '+1' }], 
    [{ color: [] }, { background: [] }], 
    ['video'], 
    ['image'], 
]; 

const quill = new QuillLib(`#quill-editor-container-${this.id}`, { 
    modules: { 
    toolbar: toolbarOptions, 
    }, 
    theme: 'snow', 
}); 
const content = this.props.content; 
    quill.setContents(content); 
    quill.on('text-change', (delta) => { 
    if (that.props.onChange) { 
     that.props.onChange(quill); 
    } 
    }); 
} 

render() { 
    return (
    <div className="wysiwyg-wrapper"> 
     <div id={`quill-editor-container-${this.id}`}></div> 
    </div> 
); 
} 
} 
export default Quill; 

Dies ist mein Eingabeformular Komponente, list.jxs

import { Meteor } from 'meteor/meteor'; 
import { PostSchema } from '/modules/blog/lib/collections.jsx'; 
import Quill from '/modules/quill/client/main.jsx'; 

export class BlogCategory extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     post: { 
     content: '', 
     preview: '', 
     }, 
    }; 
    this.onPreviewChange = this.onPreviewChange.bind(this); 
    this.onContentChange = this.onContentChange.bind(this); 
    } 

    onPreviewChange(content) { 
    this.state.post.preview = content.getText(); 
    this.setState(this.state); 
    } 
    onContentChange(content) { 
    this.state.post.content = content.getText(); 
    this.setState(this.state); 
    } 

    save() { 
    const content = this.state.post.content; 
    const preview = this.state.post.preview; 
    const post = new PostSchema(); 
    post.set({ 
     content, 
     preview, 
    }); 
    if (post.validate(false)) { 
     const id = post.save(); 
    } 
    console.log(post.getValidationErrors(false)); 
    } 

    renderCreatePostForm() { 
    let content; 
    if (this.state.showForm) { 
    content = (
     <form action=""> 
     <Quill 
      content={this.state.post.preview} 
      onChange={this.onPreviewChange} 
     /> 
     <Quill 
      content={this.state.post.content} 
      onChange={this.onContentChange} 
     /> 
     </form> 
    ); 
    } 
    return content; 
    } 
    render() { 
    let content = (
     <div className="col-xs-12"> 
     {this.renderActions()} 
     </div> 
    ); 
    if (!this.props.ready) { 
    content = <p>LOADING...</p>; 
    } 
    return content; 
    } 
} 
export default createContainer(() => { 
    const handleValidPost = Meteor.subscribe('posts'); 
    return { 
    ready: handleValidPost.ready(), 
    posts: PostSchema.find({}).fetch(), 
    }; 
}, BlogCategory); 

Und mein collections.jsx schließlich

import { Mongo } from 'meteor/mongo'; 
export const PostCollection = new Mongo.Collection('Posts'); 
export const PostSchema = Astro.Class({ 
    name: 'PostSchema', 
    collection: PostCollection, 
    fields: { 
    content: { 
    validator : Validators.and([ 
     Validators.required(), 
     Validators.string(), 
     Validators.minLength(3) 
    ]) 
    }, 
    preview: { 
    validator : Validators.and([ 
     Validators.required(), 
     Validators.string(), 
     Validators.minLength(3) 
    ]) 
    }, 
    } 
}); 

Answer 1

Während Quill Inhalt von getText erhalten, verloren Sie Ihr Textformat und Videoinformationen. Unter Verwendung von getText werden alle Nicht-String-Daten weggelassen. Quill Daten sind als Delta definiert (was ein JSON-Objekt ist).

Sie können dies beheben, indem Sie Ihre onPreviewChange und onContentChange zu getContents statt getText aktualisieren. Speichern Sie diese Delta in DB und laden Sie es erneut.

onPreviewChange(content) { 
 
    this.state.post.preview = content.getContents(); 
 
    this.setState(this.state); 
 
    } 
 
    onContentChange(content) { 
 
    this.state.post.content = content.getContents(); 
 
    this.setState(this.state); 
 
    }