Question

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

我阅读了Quill文档并尝试了解如何使用增量处理这个问题，但我不知道如何使其工作。

我正在使用Meteor + React，这是我的代码（我只会显示相关代码）：

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

在Quill之前收到getText内容时，您丢失了文字格式和视频信息。使用getText，将省略所有非字符串数据。 Quill数据定义为Delta（这是一个JSON对象）。

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

如何格式化文本并使用Quill嵌入视频？

1 个答案: