텍스트의 서식을 지정하고 퀼을 사용하여 비디오를 포함시키는 방법은 무엇입니까?

Question

블로그 프로젝트에 WYSIWYG를 통합하기 시작했습니다. 저는 Quill을 사용하고 있습니다. (이전에는 경험이 없었습니다). 편집자를 필요에 맞게 커스터마이징 할 수 있었지만 텍스트 형식을 처리하고 비디오를 삽입하는 방법을 이해하지 못했습니다. 나는 "헤더", "기울임 꼴", "밑줄 ..."등의 형식을 제공 할 수있는 텍스트를 소개하면서 "미리보기"와 "내용"(두 개의 퀼 편집자)의 두 가지 필드를 가지고 있으며, 포함 된 비디오 옵션을 클릭하면 편집기를 사용하면 링크를 추가하고 그 순간에 퍼가기 비디오를 시각화 할 수 있습니다. 저장 버튼을 누르면 내 DB에 게시물이 저장되지만 단일 게시물 페이지에서는 형식 (헤더, 기울임 꼴, 밑줄 등 ...)없이 모든 필드를 시각화하고 비디오를 포함하지 않습니다. 형식을 지정하고 동영상을 표시하려면 어떻게합니까? 어떤 도움을 주시면 감사하겠습니다.

필자는 Quill 문서를 읽고 델타를 사용하여이를 처리하는 방법을 이해하려고했지만이 작업을 수행하는 방법을 모르겠습니다. 나는 유성이 + 반작용 사용하고

,이 (I는 관련 코드를 보여줄 것) 내 코드입니다 : 이것은 내 lib 디렉토리가

이다, 이건 내 입력 양식입니다

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 구성 요소는

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을 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에 의해 Quill 콘텐츠를 가져 오는 동안 텍스트 형식 및 비디오 정보가 손실되었습니다. getText을 사용하면 모든 문자열이 아닌 데이터가 생략됩니다. Quill 데이터는 Delta (JSON 개체)으로 정의됩니다.

onPreviewChange 및 onContentChange을 getText 대신 getContents으로 업데이트하여 문제를 해결할 수 있습니다. 이 Delta을 DB에 저장하고 다시로드하십시오.

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