小编Mar*_*vez的帖子

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

我开始将一个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' …
Run Code Online (Sandbox Code Playgroud)

html javascript meteor reactjs quill

7
推荐指数
1
解决办法
3139
查看次数

如何在React中从数组中呈现随机对象?

我刚开始在工作中学习React,我需要使用React构建一个博客.我需要将随机帖子显示为"推荐帖子",在做了一些研究后我发现了一个可能的解决方案,使用Math.random()但我无法弄清楚如何在我的组件中实现它.

这是我的代码:

RecommendedPost/index.js

import React from 'react';
import { Link } from 'react-router';

class RecommendedPosts extends React.Component {

render() {
return (
  <ul>
    {this.props.posts.map((post, idx) => {
      return (
        <li key={idx}>
          <p>{post.title}</p>
          <p>{post.text}</p>
          <p>{post.category}</p>
          <Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
        </li>
      );
    })}
  </ul>
);
}
}
RecommendedPosts.propTypes = {
posts: React.PropTypes.array,
};
export default RecommendedPosts;
Run Code Online (Sandbox Code Playgroud)

然后我在我的容器中使用这个组件:BlogPage/SinglePostPage/index.js

import React from 'react';
// ...other imported stuff
import RecommendedPosts from 'components/Blog/RecommendedPosts';

class PostPage extends React.Component {

render() {
  // dummy-recomended-posts
const posts = [
  { …
Run Code Online (Sandbox Code Playgroud)

javascript random reactjs

4
推荐指数
1
解决办法
9948
查看次数

标签 统计

javascript ×2

reactjs ×2

html ×1

meteor ×1

quill ×1

random ×1