ckeditor5-vue 保留羽毛笔 class
ckeditor5-vue preserve quill class
我想知道如何将具有特定 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>
已解决,虽然不是我想要的方式。我选择了保留class的路线。
这可以通过使用以下插件来完成。我只是使用了错误的密钥名称。
// plugin.js
export default ( editor ) => {
editor.conversion.attributeToAttribute( {
model: {
key: 'alignment',
values: [ 'center' ]
},
view: {
center: {
key: 'class',
value: 'ql-align-center'
}
}
})
}
我想知道如何将具有特定 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>
已解决,虽然不是我想要的方式。我选择了保留class的路线。 这可以通过使用以下插件来完成。我只是使用了错误的密钥名称。
// plugin.js
export default ( editor ) => {
editor.conversion.attributeToAttribute( {
model: {
key: 'alignment',
values: [ 'center' ]
},
view: {
center: {
key: 'class',
value: 'ql-align-center'
}
}
})
}