Metin nasıl biçimlendirilir ve Quill ile video gömülür?

Question

Bir WYSIWYG'yi bir blog projesine dahil etmeye başladım, bunun için Quill kullanıyorum (daha önce hiç deneyimim yoktu). Editörümü gerek duyduğum şekilde özelleştirebildim, anlamadığım şey metin formatıyla nasıl baş edeceğimi ve videoları gömebileceğimi. Mesaj formumda iki alanım var, "önizleme" ve "içerik" (iki quill editör), formatı verebileceğim metni (başlık, italik, altı çizili ... vb.) Ve gömülü video seçeneğini tıklarken editör, bağlantıyı eklememi ve gömülü videoyu o anda görselleştirmemi sağlıyor. Kaydetme düğmesine bastığımda db'mdeki gönderiyi saklıyorum ama tek gönderi sayfamda formatsız tüm alanları (başlık, italik, altı çizili ... vb.) Ve aynı zamanda gömülü videoyu görüntülemiyorum. Formatı nasıl verebilirim ve videoyu nasıl gösterebilirim? Herhangi bir yardım takdir edilecektir.

Quill belgelerini okudum ve bu deltasları kullanarak nasıl başa çıkılacağını anlamaya çalıştım ancak bu işi nasıl yapacağımı bilmiyorum. Ben Meteor + Tepki kullanıyorum

, bu (ben sadece alakalı kod göstereceğiz) benim kodudur: Bu benim lib

, This is my giriş formudur

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; 

quill.jsx bileşeni,

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); 

Ve nihayet collections.jsx list.jxs

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

getText içeriğine göre Quill içeriğini alırken, metin biçiminizi ve video bilgilerinizi kaybettiniz. getText'u kullanarak, tüm dize olmayan veriler atlanacaktır. Quill verileri Delta (bir JSON nesnesidir) olarak tanımlanır.

onPreviewChange ve onContentChange numaralı güncelleştirmelerinizi getText yerine getContents kullanmak üzere güncelleyerek bu sorunu giderebilirsiniz. Bu Delta'u DB'ye kaydedin ve tekrar yükleyin.

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