首页 > 建站教程 > 编辑器、IDE >  ckeditor5一些常见配置正文

ckeditor5一些常见配置

ckeditor5经历了这么多年的发展，已经非常成熟，UI界面也比较精美。关于ckeditor5如何使用请点击：vue3使用ck-editor5，亲测可用。这里简单介绍下ckeditor5的常见配置，如设置ckeditor5的高度、配置toolbar、配置codeBlock语言、设置字体、设置默认值、获取值等：

查看代码
打印?
01let editor = null
02onMounted(() => {
03  Editor.create(document.getElementById("ck-editor"), {
04    // 移除工具
05    // removePlugins: [ 'heading', 'link' ],
06    // 配置工具
07    // toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
08    // 配置toolbar中具体某个工具
09    // 配置heading
10    heading: {
11            options: [
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' }
18            ]
19        },
20        // 配置codeBlock语言
21        codeBlock:{
22            languages: [
23                { language: 'plaintext', label: 'Plain text' }, // The default language.
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' }
39            ],
40        },
41    //设置字体
42    fontSize: {
43      options: [ 12, 14, 'default', 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]
44    },
45  }).then((e) => {
46    e.plugins.get('FileRepository').createUploadAdapter = (loader) => {
47      return new UploadAdapter(loader);
48    }
49    editor = e
50    // 设置值，props.content为编辑器父组件传过来的html值
51    editor.setData(props.content);
52    // 设置ckeditor5的高度
53    editor.editing.view.change( writer => {
54      writer.setStyle( 'height', '500px', editor.editing.view.document.getRoot() );
55    });
56  })
57})
58// 获取值
59function getHtml() {
60  if (editor) {
61    //获取值
62    var htmlStr = editor.getData()
63    alert(htmlStr);
64  }else{
65    alert("error");
66  }
67}
68// 获取text
69function getText() {
70  if (editor) {
71    var htmlStr = editor.getData();
72    htmlStr = htmlStr.replace(/<[^>]*>/ig,"");
73    alert(htmlStr);
74  }else{
75    alert("error");
76  }
77}


TAGS: ckeditor5