ckeditor5经历了这么多年的发展，已经非常成熟，UI界面也比较精美。关于ckeditor5如何使用请点击：vue3使用ck-editor5，亲测可用。这里简单介绍下ckeditor5的常见配置，如设置ckeditor5的高度、配置toolbar、配置codeBlock语言、设置字体、设置默认值、获取值等：
let editor = null
onMounted(() => {
Editor.create(document.getElementById("ck-editor"), {
// 移除工具
// removePlugins: [ 'heading', 'link' ],
// 配置工具
// toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
// 配置toolbar中具体某个工具
// 配置heading
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
{ model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
{ model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
]
},
// 配置codeBlock语言
codeBlock:{
languages: [
{ language: 'plaintext', label: 'Plain text' }, // The default language.
{ language: 'c', label: 'C' },
{ language: 'cs', label: 'C#' },
{ language: 'cpp', label: 'C++' },
{ language: 'css', label: 'CSS' },
{ language: 'diff', label: 'Diff' },
{ language: 'dockerfile', label: 'Dockerfile' },
{ language: 'html', label: 'HTML' },
{ language: 'java', label: 'Java' },
{ language: 'javascript', label: 'JavaScript' },
{ language: 'json', label: 'JSON' },
{ language: 'php', label: 'PHP' },
{ language: 'python', label: 'Python' },
{ language: 'ruby', label: 'Ruby' },
{ language: 'typescript', label: 'TypeScript' },
{ language: 'xml', label: 'XML' }
],
},
//设置字体
fontSize: {
options: [ 12, 14, 'default', 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]
},
}).then((e) => {
e.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new UploadAdapter(loader);
}
editor = e
// 设置值，props.content为编辑器父组件传过来的html值
editor.setData(props.content);
// 设置ckeditor5的高度
editor.editing.view.change( writer => {
writer.setStyle( 'height', '500px', editor.editing.view.document.getRoot() );
});
})
})
// 获取值
function getHtml() {
if (editor) {
//获取值
var htmlStr = editor.getData()
alert(htmlStr);
}else{
alert("error");
}
}
// 获取text
function getText() {
if (editor) {
var htmlStr = editor.getData();
htmlStr = htmlStr.replace(/<[^>]*>/ig,"");
alert(htmlStr);
}else{
alert("error");
}
}