diff --git a/frontend/src/App.vue b/frontend/src/App.vue index cc1a41d..42e78bb 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -19,7 +19,7 @@ watch(locale,(value)=>{ if(elementUIConfig.supportLocale[value]){ elementUIConfig.locale = elementUIConfig.supportLocale[value] } else { - elementUIConfig.locale = elementUIConfig.supportLocale["zh-Hans"] + elementUIConfig.locale = elementUIConfig.supportLocale["zh-CN"] } }, { immediate: true @@ -85,7 +85,7 @@ document.body.addEventListener("click", function (event) { -
+
import '@toast-ui/editor/dist/toastui-editor.css'; -import {onMounted, reactive, ref} from "vue"; +import type {Ref} from "vue"; +import {onMounted, reactive, ref, watch} from "vue"; import Editor from "@toast-ui/editor"; import Prism from 'prismjs' import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight' import chart from "@toast-ui/editor-plugin-chart" import tableMergedCell from "@toast-ui/editor-plugin-table-merged-cell" import uml from "@toast-ui/editor-plugin-uml" +import "@toast-ui/editor/dist/i18n/zh-cn"; +import {useI18n} from "vue-i18n"; + const chartOptions = { minWidth: 100, @@ -15,27 +19,62 @@ const chartOptions = { maxHeight: 300 }; +const {locale} = useI18n() + const editorRef = ref() -onMounted(() => { - const editor = new Editor({ +function initEditor(editorRef:Ref){ + let editor = new Editor({ el: editorRef.value, - language: 'en-US', + // language: 'en-US', + language: locale.value, previewStyle: 'vertical', - height: '80vh', + height: '85vh', initialValue: "", - plugins: [[chart, chartOptions], [codeSyntaxHighlight, {highlighter: Prism}], tableMergedCell, uml] - }); + plugins: [ + [chart, chartOptions], + [codeSyntaxHighlight, {highlighter: Prism}], + tableMergedCell, + uml, + ], + useCommandShortcut: true, + usageStatistics: true, + hideModeSwitch: false, + toolbarItems: [ + ['heading', 'bold', 'italic', 'strike'], + ['hr', 'quote'], + ['ul', 'ol', 'task', 'indent', 'outdent'], + ['table', 'image', 'link'], + ['code', 'codeblock'], + ['scrollSync'], + ] + }) + + // const viewer = Editor.factory({ + // el: editorRef.value, + // viewer: true, + // height: '500px', + // initialValue: "", + // plugins: [[chart, chartOptions], [codeSyntaxHighlight, { highlighter: Prism }], tableMergedCell, uml] + // }); + + return editor; +} + +onMounted(() => { + console.log("locale.value",locale.value) + let editor = initEditor(editorRef); + watch(locale, value => { + let markdown = editor.getMarkdown() + editor.destroy() + + editor = initEditor(editorRef); + editor.setMarkdown(markdown) + }) }) -// const viewer = Editor.factory({ -// el: document.querySelector('#viewer'), -// viewer: true, -// height: '500px', -// initialValue: "", -// plugins: [[chart, chartOptions], [codeSyntaxHighlight, { highlighter: Prism }], tableMergedCell, uml] -// }); + // // const defaultOptions = reactive({ // minHeight: '600px', @@ -60,7 +99,7 @@ const ctx = reactive({