Text/Image 在 Sanity.io 便携式文本富文本编辑器中对齐

Question

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

Answer 1

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

Answer 2

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

There will be situations where the line between meaning and presentations isn't clear cut. Take text alignment. In many cases this can be a concern of the stylesheet to where the content is rendered. But there are cases where you would want control over text-alignment to be able to reproduce certain representations of text, like poems or the like. In this case we would suggest either adding a custom type, or creating a separate style that would also embed that usecase more specifically.

解决方案：

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 块。

Answer 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: [],
                    },
                },
            ],
        },
    ],
};

Text/Image 在 Sanity.io 便携式文本富文本编辑器中对齐

Text/Image alignment in Sanity.io portable text rich text editor

sanity

解决方案：

1。创建自定义类型

2。制作自定义样式