Sanity.io 便携式文本富文本编辑器中的文本/图像对齐

Posted 2023-02-22

【中文标题】Sanity.io 便携式文本富文本编辑器中的文本/图像对齐

【英文标题】：Text/Image alignment in Sanity.io portable text rich text editor

【发布时间】：2020-07-31 12:03:48

【问题描述】：

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

【参考方案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: [],
                    ,
                ,
            ],
        ,
    ],
;