ckeditor5经历了这么多年的发展,已经非常成熟,UI界面也比较精美。关于ckeditor5如何使用请点击:vue3使用ck-editor5,亲测可用。这里简单介绍下ckeditor5的常见配置,如设置ckeditor5的高度、配置toolbar、配置codeBlock语言、设置字体、设置默认值、获取值等:
03 | Editor.create(document.getElementById( "ck-editor" ), { |
12 | { model: 'paragraph' , title: 'Paragraph' , class: 'ck-heading_paragraph' }, |
13 | { model: 'heading2' , view: 'h2' , title: 'Heading 2' , class: 'ck-heading_heading2' }, |
14 | { model: 'heading3' , view: 'h3' , title: 'Heading 3' , class: 'ck-heading_heading3' }, |
15 | { model: 'heading4' , view: 'h4' , title: 'Heading 4' , class: 'ck-heading_heading4' }, |
16 | { model: 'heading5' , view: 'h5' , title: 'Heading 5' , class: 'ck-heading_heading5' }, |
17 | { model: 'heading6' , view: 'h6' , title: 'Heading 6' , class: 'ck-heading_heading6' } |
23 | { language: 'plaintext' , label: 'Plain text' }, |
24 | { language: 'c' , label: 'C' }, |
25 | { language: 'cs' , label: 'C#' }, |
26 | { language: 'cpp' , label: 'C++' }, |
27 | { language: 'css' , label: 'CSS' }, |
28 | { language: 'diff' , label: 'Diff' }, |
29 | { language: 'dockerfile' , label: 'Dockerfile' }, |
30 | { language: 'html' , label: 'HTML' }, |
31 | { language: 'java' , label: 'Java' }, |
32 | { language: 'javascript' , label: 'JavaScript' }, |
33 | { language: 'json' , label: 'JSON' }, |
34 | { language: 'php' , label: 'PHP' }, |
35 | { language: 'python' , label: 'Python' }, |
36 | { language: 'ruby' , label: 'Ruby' }, |
37 | { language: 'typescript' , label: 'TypeScript' }, |
38 | { language: 'xml' , label: 'XML' } |
43 | options: [ 12, 14, 'default' , 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38] |
46 | e.plugins.get( 'FileRepository' ).createUploadAdapter = (loader) => { |
47 | return new UploadAdapter(loader); |
51 | editor.setData(props.content); |
53 | editor.editing.view.change( writer => { |
54 | writer.setStyle( 'height' , '500px' , editor.editing.view.document.getRoot() ); |
62 | var htmlStr = editor.getData() |
71 | var htmlStr = editor.getData(); |
72 | htmlStr = htmlStr.replace(/<[^>]*>/ig, "" ); |