Jak sformatować tekst i osadzić wideo za pomocą Quill?

Question

Zacząłem integrować WYSIWYG z blogiem, do tego używam Quilla (wcześniej nie miałem z tym żadnego doświadczenia). Udało mi się dostosować edytora tak, jak było to wymagane, ale nie rozumiem, jak radzić sobie z formatem tekstu i osadzać filmy. Mam dwa pola w moim formularzu, "podgląd" i "treść" (dwa edytor tekstu), jednocześnie wprowadzając tekst, który mogę nadać mu format (nagłówek, kursywę, podkreślenie ... itd.) I po kliknięciu opcji osadzania wideo edytor pozwala mi dodać link i wizualizować wideo osadzone w tym momencie. Kiedy wciskam przycisk zapisu, zapisuję post w moim db, ale na mojej stronie pojedynczego postu wizualizuję wszystkie pola bez formatu (nagłówek, kursywę, podkreślenie ... itd.), A także bez osadzonego wideo. Jak mogę podać format i pokazać wideo? Każda pomoc będzie doceniona.

Przeczytałem dokumentację Quill i próbowałem zrozumieć, jak sobie z tym poradzić, korzystając z delt, ale nie wiem, jak to zrobić.

Używam Meteor + zareagować, to jest mój kod (pokażę tylko odpowiedni kod):

To mój 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; 

To moja forma wejście składnik, 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); 

i wreszcie mój collections.jsx

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

Podczas pobierania zawartości Quill przez getText, utraciłeś swój format tekstowy i informacje wideo. Przy użyciu getText wszystkie dane nie będące ciągami zostaną pominięte. Quill dane są zdefiniowane jako Delta (który jest obiektem JSON).

Możesz to naprawić, aktualizując swoje onPreviewChange i onContentChange, aby używać getContents zamiast getText. Zapisz te Delta na DB i załaduj ponownie.

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