ckeditor5-vue preserve quill class

Question

I would like to know how to convert an html with a specific class into an html with a specific style. For example, if the original html was <p class="ql-align-center">text</p>, I would like to convert it to <p style="text-align: center;">text</p>. I did take a look at the ckeditor5 documents, but I'm just lost because there is just so much information.

The reason I ask is because I am currently in the process of changing my rich text editor from quill to ckeditor5. Quill adds classes to apply some styles while ckeditor5 just inline-styles them(some styles can be done with classes), and because ckeditor5 filters out these attributes, some text comes out without any styles being applied. This becomes a problem because the texts written with quill are in the database and when I open it with ckeditor5, the styles are gone.

I wrote the following conversion plugin to try to convert class="ql-align-center" to styles="text-align: center;" but to no avail.

// 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

Solved, though not in the way I intended. I chose the route to preserve the class. Which can be done by using the following plugin. I was just using the wrong key name.

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