Question

我为ckeditor开发了一些插件，通过添加带有样式属性的span标记来工作。

当我在编辑器中进行更改时，它们正常工作但是，当我使用<p><span style="line-height:3;letter-spacing:18px;text-transform:uppercase;font-family:Ubuntu, Arial, sans-serif;font-size:12px;">safasfasfas</span></p>初始化编辑器时，只有text-transform，font-family和font-size正在运行，但其余为2插件/样式属性不起作用。

有什么想法，我做错了吗？

编辑：我有如下转换

editor.conversion.for( 'downcast' )
            .add( downcastAttributeToElement( {
                model: {
                    key: 'letterSpacing',
                    name: '$text'
                },
                view: ( modelAttributeValue, viewWriter ) => {
                    return viewWriter.createAttributeElement( 'span', { style: 'letter-spacing:' + modelAttributeValue + 'px' } );
                }
            } ) );

        editor.conversion.for( 'upcast' )
            .add( upcastElementToAttribute( {
                view: {
                    name: 'span'
                },
                model: {
                    key: 'letterSpacing',
                    value: viewElement => {
                        const letterSpacing = viewElement.getStyle( 'letter-spacing' );

                        if (letterSpacing === undefined) {
                            return null;
                        }

                        return letterSpacing.substr( 0, letterSpacing.length - 2 );
                    }
                }
            } ) );

Answer 1

我可以通过在转换中添加以下代码来解决此问题。

styles: {
   'letter-spacing': /[\S]+/
}

现在转换变得像

editor.conversion.for( 'downcast' )
            .add( downcastAttributeToElement( {
                model: {
                    key: 'letterSpacing',
                    name: '$text'
                },
                view: ( modelAttributeValue, viewWriter ) => {
                    return viewWriter.createAttributeElement( 'span', { style: 'letter-spacing:' + modelAttributeValue + 'px' } );
                }
            } ) );

        editor.conversion.for( 'upcast' )
            .add( upcastElementToAttribute( {
                view: {
                    name: 'span',
                    styles: {
                        'letter-spacing': /[\S]+/
                    }
                },
                model: {
                    key: 'letterSpacing',
                    value: viewElement => {
                        const letterSpacing = viewElement.getStyle( 'letter-spacing' );

                        if (letterSpacing === undefined) {
                            return null;
                        }

                        return letterSpacing.substr( 0, letterSpacing.length - 2 );
                    }
                }
            } ) );

不同插件中的多个样式属性的转换不起作用？

1 个答案: