我們使用ckeditor5的時候會用到化學數學方程式的業務，如何構成呢？
官方文檔：https://ckeditor.com/docs/ckeditor5/latest/features/math-equations.html
其實官方文檔我看了看配置這種數學和化學方程需要自定義配置編輯器，能力有限沒看懂。
但是找到了一個快捷的方法：https://ckeditor.com/ckeditor-5/online-builder/，這是CKEditor 5在線生成器
進入步驟了：1.打開https://ckeditor.com/ckeditor-5/online-builder/選擇編輯器類型（我選擇的經典）
2.進入了選擇編輯器插件頁面，我們在插件中尋找數學類型點擊加按鈕
3.選擇完畢點擊下一步，此時別忘記把化學和數學方程式的圖表放到工具欄的項目裏
4.點擊下一步：選擇語言
5.點擊下一步，下載
以上這部完成之後我們要應用到demo事例中和Vue項目中
首先把下載的文件解壓放在一個文件夾裏
一.demon事例中
在文件夾中新建一個頁面（guker.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./build/ckeditor.js"></script>
<body>
<div id="editor">
<p>Here goes the initial content of the editor.</p>
</div>
</body>
<script type="module">
ClassicEditor
.create(document.querySelector('#editor'), {
toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', "MediaEmbed", 'blockQuote', 'imageUpload', 'insertTable', '|', "alignment", "mathType", 'ChemType', 'outdent', 'indent', 'undo', 'redo'],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
}
})
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
</script>
<style>
</style>
</html>```
但注意：我們編輯運行要是用open with Live Server運行
二.VUE項目中使用
你可以先看一下官方文檔：
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v2.html
我們只需要把剛纔demon文件夾下的bulid文件下的ckeditor.js文件拷貝一份就行
我把它放在Vue項目中的assets下面
在我們使用的組件中這樣配置：
<template>
<div id="editor">
<ckeditor
ref="ckeditor"
:editor="editor"
v-model="editorData"
:config="editorConfig"
></ckeditor>
</div>
</template>
<script>
import Vue from "vue";
import ClassicEditor from "../../assets/js/ckeditor.js";
import CKEditor from "@ckeditor/ckeditor5-vue2";//這個插件npm要裝上
Vue.use(CKEditor);
data(){
editorData: "",
editor: ClassicEditor,
editorConfig: {
// 編輯器的配置
toolbar: [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"MediaEmbed",
"blockQuote",
"imageUpload",
"insertTable",
"|",
"alignment",
"mathType",
"ChemType",
"outdent",
"indent",
"undo",
"redo",
],
},
}
</script>
其實老鐵們，我這樣的方法很笨，打包的時候會很慢，這個以自身帶了一個bug就是圖片按鈕不能使用，我正在修正，如果那個大神能解決也歡迎留言。如果還有大神明白了ckeditor5的自定義配置這種數學化學方程式的，也希望發博客，請大家的博客寫的詳細明白一點謝謝（我的格言：我很菜但我還不想努力）