javascript - 如何使用 Quill 格式化文本和嵌入视频？

Question

我开始将 WYSIWYG 集成到博客项目中，为此我使用 Quill(我之前没有使用它的经验)。我能够按照需要的方式自定义我的编辑器，我不明白的是如何处理文本格式和嵌入视频。我的帖子表单中有两个字段，“预览”和“内容”(两个羽毛笔编辑器)，同时介绍我可以为其指定格式的文本(标题、斜体、下划线等)，当单击嵌入视频选项时编辑器允许我在那一刻添加链接并可视化嵌入视频。当我按下保存按钮时，它会将帖子存储在我的数据库中，但在我的单个帖子页面中，我可以看到所有没有格式的字段(标题、斜体、下划线...等)，也没有嵌入视频。我怎样才能给出格式并显示视频？任何帮助将不胜感激。

我阅读了 Quill 文档并试图了解如何使用增量处理此问题，但我不知道如何进行。

我正在使用 Meteor + React，这是我的代码(我将只显示相关代码):

这是我的库，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

在通过getText 获取Quill 内容时，您丢失了文本格式和视频信息。使用 getText，将忽略所有非字符串数据。 Quill 数据定义为 Delta (这是一个 JSON 对象)。

您可以通过更新 onPreviewChange 和 onContentChange 以使用 getContents 而不是 getText 来解决此问题。将这些 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);
  }