Question

我想知道如何将具有特定类的html转换为具有特定样式的html。例如，如果原始的html是<p class="ql-align-center">text</p>，我想将其转换为<p style="text-align: center;">text</p>。我确实看了看ckeditor5文档，但是我迷路了，因为那里的信息太多了。

我问的原因是因为我目前正在将RTF编辑器从羽毛笔更改为ckeditor5。 Quill添加了一些类来应用某些样式，而ckeditor5只是对它们进行内联样式（某些样式可以使用类来完成），并且由于ckeditor5过滤掉了这些属性，因此一些文本出现而没有应用任何样式。这成为一个问题，因为用鹅毛笔写的文本在数据库中，而当我用ckeditor5打开它时，样式就消失了。

我编写了以下转换插件，尝试将class="ql-align-center"转换为styles="text-align: center;"但无济于事。

// plugin.js
export default ( editor ) => {
  editor.conversion.attributeToAttribute( {
    model: {
      key: 'align',
      values: [ 'center' ]
    },
    view: {
      center: {
        key: 'class',
        value: 'ql-align-center'
      }
    }
  })
}

// richTextEditor.js
<template>
  <div>
    <ckeditor
      :editor="editor"
      v-model="htmlForEditor"
      :config="editorConfig"
    ></ckeditor>
  </div>
</template>


<script>
  import CKEditor from '@ckeditor/ckeditor5-vue'
  import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
  import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
  import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'
  import MyPlugin from '@/path/to/plugin'

  export default {
    components:{
      ckeditor: CKEditor.component
    },
    data: function (){
      return {
        editor: ClassicEditor,
        htmlForEditor: inputHtmlThatCameFromQuill,
        editorConfig: {
          plugins: [
            Essentials,
            Alignment,
            MyPlugin
          ],
          toolbar: {
            items: [
              'alignment'
            ]
          }
        }
      }
    }
  }
</script>

Answer 1

解决了，尽管不是我想要的那样。我选择了保留课程的路线。可以通过使用以下插件来完成。我只是使用了错误的密钥名称。

// plugin.js
export default ( editor ) => {
  editor.conversion.attributeToAttribute( {
    model: {
      key: 'alignment',
      values: [ 'center' ]
    },
    view: {
      center: {
        key: 'class',
        value: 'ql-align-center'
      }
    }
  })
}

解决：ckeditor5-vue保留羽毛笔类

1 个答案: