7

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

4

3 回答 3

2

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

于 2020-04-21T09:54:43.293 回答
0

不幸的是，这是便携式文本编辑器的一个已知（当前）限制。根据 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 块。

于 2021-07-12T01:58:36.273 回答
0

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

// 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: [],
                    },
                },
            ],
        },
    ],
};
于 2021-07-29T12:12:09.520 回答