ckeditor5一些常见配置

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");
  }
}