【问题标题】：Text/Image alignment in Sanity.io portable text rich text editorSanity.io 便携式文本富文本编辑器中的文本/图像对齐
【发布时间】：2020-07-31 12:03:48
【问题描述】：

在 sanity.io 的富文本编辑器（便携式文本）中，是否可以选择将文本（以及图像）与中心对齐？在文档中找不到任何内容

【问题讨论】：

标签： sanity

【解决方案1】：

不，目前还没有开箱即用的解决方案。理智对此有很多要求。但是你可以根据 CSS 自己制作一个。 More info on it here. 不过，您可能会在 Sanity Slack 频道上获得更快的支持。如果您在那里使用搜索，还有一些现有的社区对齐方法。

【讨论】：

【解决方案2】：

不幸的是，这是便携式文本编辑器的一个已知（当前）限制。根据 Stanity 文档：

在某些情况下，含义和演示文稿不明确。进行文本对齐。在许多情况下，这可能是样式表关注的内容呈现位置。但在某些情况下，您希望控制文本对齐能够再现文本的某些表现形式，如诗歌或类似。在这种情况下，我们会建议添加自定义类型，或创建一个单独的样式，该样式也将嵌入该用例更多具体来说。

解决方案：

1。制作自定义类型

{
  name: 'textAlignment',
  type: 'object',
  title: 'Text Alignment',
  fields: [
    {
      title: 'Content',
      name: 'text',
      type: 'portableText'
    },
    {
      title: 'Alignment',
      name: 'alignment',
      type: 'string',
      options: {
        list: [
          {title: 'Left', value: 'left'},
          {title: 'Right', value: 'right'},
          {title: 'Center', value: 'center'},
        ],
      }
    }
  ]
}

2。制作自定义样式

例如normal+right 并使用块序列化器在前端实现对齐。这里的缺点是你不能将它与其他样式结合起来。例如。你不能有一个带有文本对齐的 H1 块。

【讨论】：

【解决方案3】：

我创建了一个自定义输入组件，允许您在块编辑器预览中对齐内容，我只用文本测试过它，但我确信它也可以定制为与图像一起使用。

// schemas/components/AlignBlock.js
import React from "react";
import { BlockEditor } from "part:@sanity/form-builder";

function AlignBlock(props) {
    const options = props.type.options.align;
    const alignment = () => {
        switch (options) {
            case "right":
                return (
                    <div style={{ textAlign: "right" }}>
                        <BlockEditor {...props} />
                    </div>
                );
            case "center":
                return (
                    <div style={{ textAlign: "center" }}>
                        <BlockEditor {...props} />
                    </div>
                );
            default:
                return <BlockEditor {...props} />;
        }
    };
    return alignment();
}

export default AlignBlock;

然后要在特定的块编辑器中使用它，将 AlignBlock 作为 inputComponent 导入并在选项下传入align: center 或align: right。

import AlignBlock from "../components/AlignBlock";

export default {
    title: "Content",
    name: "content",
    type: "document",
    fields: [
        {
            title: "Splashscreen",
            name: "splashscreen",
            type: "array",
            inputComponent: AlignBlock,
            options: { align: "center" },
            of: [
                {
                    type: "block",
                    styles: [],
                    lists: [],
                    marks: {
                        decorators: [],
                        annotations: [],
                    },
                },
            ],
        },
    ],
};

【讨论】：