Question

是否有文档说明将内容粘贴到draft.js时如何保留分段符？其他格式化看起来很合理，但所有段落块在粘贴时都会折叠成一个段落块。

Answer 1

不幸的是，没有关于粘贴内容处理的公开文档。但由于draft-js是开源的，因此阅读消息来源可以解决问题。

Draft-js 0.9.1及以下

只需使用blockRenderMap将p指定为unstyled块的别名元素：

import { Map } from 'immutable';
import Editor from 'draft-js';

const customRenderMap = Map({
  unstyled: {
    element: 'div',
    // will be used in convertFromHTMLtoContentBlocks
    aliasedElements: ['p'],
  },
});

<Editor
  editorState={this.state.editorState}
  blockRenderMap={customRenderMap}
/>

<强>解释

将内容粘贴到draft-js时，会调用editOnPaste函数。在其中，草稿确定您粘贴的内容是html（是的，当您从MS Word，Google Docs或Apple Pages等文本处理器复制粘贴任何文本时，它实际上是html），并调用convertFromHTMLToContentBlocks()。

convertFromHTMLToContentBlocks()轮流uses blockRenderMap确定如何将html拆分为块。

Draft-js 0.10.0

div在draft-js@0.10.0

中与p by default别名

Answer 2

您可以使用Editor的道具来处理此问题。

    import org.springframework.core.convert.converter.Converter;
    import org.springframework.security.authentication.AbstractAuthenticationToken;
    import org.springframework.security.core.GrantedAuthority;
    import org.springframework.security.core.authority.SimpleGrantedAuthority;
    import org.springframework.security.oauth2.jwt.Jwt;
    import org.springframework.security.oauth2.server.resource.authentication.JwtAuthenticationToken;
    import org.springframework.security.oauth2.server.resource.authentication.JwtGrantedAuthoritiesConverter;

    import java.util.Collection;
    import java.util.Collections;
    import java.util.Map;
    import java.util.stream.Collectors;
    import java.util.stream.Stream;

    public class CustomJwtAuthenticationConverter implements Converter<Jwt, AbstractAuthenticationToken>
    {
        private static Collection<? extends GrantedAuthority> extractResourceRoles(final Jwt jwt, final String resourceId)
        {
            Map<String, Object> resourceAccess = jwt.getClaim("resource_access");
            Map<String, Object> resource;
            Collection<String> resourceRoles;
            if (resourceAccess != null && (resource = (Map<String, Object>) resourceAccess.get(resourceId)) != null &&
                (resourceRoles = (Collection<String>) resource.get("roles")) != null)
                return resourceRoles.stream()
                                    .map(x -> new SimpleGrantedAuthority("ROLE_" + x))
                                    .collect(Collectors.toSet());
            return Collections.emptySet();
        }

        private final JwtGrantedAuthoritiesConverter defaultGrantedAuthoritiesConverter = new JwtGrantedAuthoritiesConverter();

        private final String resourceId;

        public CustomJwtAuthenticationConverter(String resourceId)
        {
            this.resourceId = resourceId;
        }

        @Override
        public AbstractAuthenticationToken convert(final Jwt source)
        {
            Collection<GrantedAuthority> authorities = Stream.concat(defaultGrantedAuthoritiesConverter.convert(source)
                                                                                                       .stream(),
                                                                     extractResourceRoles(source, resourceId).stream())
                                                             .collect(Collectors.toSet());
            return new JwtAuthenticationToken(source, authorities);
        }
    }

然后将其作为道具传递到编辑器中。这样可以解决您的问题。

draft.js：粘贴内容时如何保留分段符？

2 个答案: