ckeditor5-vue 保留羽毛笔 class

Question

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

我问的原因是因为我目前正在将我的富文本编辑器从 quill 更改为 ckeditor5。 Quill 添加 classes 来应用一些样式，而 ckeditor5 只是对它们进行内联样式（某些样式可以使用 classes 完成），并且由于 ckeditor5 过滤掉了这些属性，所以一些文本出来时没有任何样式应用。这成为一个问题，因为用quill写的文本在数据库中，当我用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

已解决，虽然不是我想要的方式。我选择了保留class的路线。这可以通过使用以下插件来完成。我只是使用了错误的密钥名称。

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

ckeditor5-vue 保留羽毛笔 class

ckeditor5-vue preserve quill class

vue.js

ckeditor

rich-text-editor

ckeditor5