पाठ को प्रारूपित करने और Quill के साथ एक वीडियो एम्बेड करने के लिए कैसे?

Question

मैंने एक ब्लॉग प्रोजेक्ट में WYSIWYG को एकीकृत करना शुरू किया, मैं इसके लिए क्विल का उपयोग कर रहा हूं (मुझे इससे पहले कोई अनुभव नहीं था)। मैं अपने संपादक को जिस तरीके से जरूरी था उसे कस्टमाइज़ करने में सक्षम था, जो मुझे समझ में नहीं आता है कि पाठ प्रारूप और वीडियो एम्बेड करने का तरीका कैसे है। टेक्स्ट को पेश करते समय मेरे पोस्ट फॉर्म, "पूर्वावलोकन" और "कंटेंट" (दो क्विल एडिटर्स) में मेरे पास दो फ़ील्ड हैं, मैं इसे प्रारूप (हेडर, इटैलिक, अंडरलाइन ... आदि) दे सकता हूं और जब एम्बेड वीडियो विकल्प पर क्लिक करता हूं संपादक मुझे लिंक जोड़ने और उस पल में एम्बेड वीडियो को देखने की अनुमति देता है। जब मैं अपना सेव बटन दबाता हूं तो यह पोस्ट को मेरे डीबी में संग्रहीत करता है लेकिन मेरे एकल पोस्ट पेज में मैं प्रारूप के बिना सभी फ़ील्ड को विज़ुअलाइज़ करता हूं (हेडर, इटैलिक, अंडरलाइन ... आदि) और कोई भी एम्बेड वीडियो नहीं। मैं प्रारूप कैसे दे सकता हूं और वीडियो दिखा सकता हूं? किसी भी सहायता की सराहना की जाएगी।

मैंने क्विल दस्तावेज पढ़ा और यह समझने की कोशिश की कि डेल्टा का उपयोग करके इसका निपटारा कैसे किया जाए लेकिन मुझे नहीं पता कि यह काम कैसे करें।

मैं उल्का + प्रतिक्रिया उपयोग कर रहा हूँ, इस (मैं केवल प्रासंगिक कोड दिखाता हूँ) मेरे कोड है:

यह मेरा 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; 

यह मेरा इनपुट रूप है घटक, 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); 

और अंत में मेरी 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

QuillgetText द्वारा सामग्री प्राप्त करते समय, आपने अपना टेक्स्ट प्रारूप और वीडियो जानकारी खो दी। getText का उपयोग करके, सभी गैर-स्ट्रिंग डेटा छोड़े जाएंगे। Quill डेटा को Delta (जो एक JSON ऑब्जेक्ट है) के रूप में परिभाषित किया गया है।

getText के बजाय getContents का उपयोग करने के लिए आप अपने onPreviewChange और onContentChange को अपडेट करके इसे ठीक कर सकते हैं। इन Delta को डीबी में सहेजें और इसे फिर से लोड करें।

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