修改CKEditor5数据源处理方式为html而不是markdown；修复back按钮会导致outHTML null

3 months ago · 81bd2da001
parent 3c0646ea92
commit 81bd2da001
3 changed files with 19 additions and 6 deletions
--- a/coeditor_frontend/src/components/plugins.js
+++ b/coeditor_frontend/src/components/plugins.js
@ -38,7 +38,7 @@ import {
 	LinkImage,
 	List,
 	ListProperties,
-	Markdown,
+	// Markdown,
 	MediaEmbed,
 	Mention,
 	PageBreak,
@ -82,7 +82,8 @@ import {
 	getStyle,
 	getPageContent,
 	getUserConfigFromBackend,
-	saveData
+	saveData,
+	// markdown2html
 } from './utils';

 // 导出为docx插件
@ -418,7 +419,7 @@ function setConfig() {
 			LinkImage,
 			List,
 			ListProperties,
-			Markdown,
+			// Markdown,
 			MediaEmbed,
 			Mention,
 			PageBreak,
--- a/coeditor_frontend/src/components/utils.js
+++ b/coeditor_frontend/src/components/utils.js
@ -1,5 +1,5 @@
 // utils.js
-
+import { MarkdownToHtml } from '@ckeditor/ckeditor5-markdown-gfm/src/markdown2html/markdown2html.js';
 // 获取用户配置
 export function getUserConfigFromBackend() {
    // TODO 请求用户配置
@ -101,6 +101,7 @@ export function saveData(data) {
    //         resolve();
    //     }, HTTP_SERVER_LAG );
    // } );
+    console.log('saving...');
    console.log(data);
 }

@ -121,9 +122,10 @@ export function getStyle() {

 // 获取用户编辑的内容 <html>
 export function getPageContent() {
-    const pageContent =document.querySelector("#app > div > div > div.editor-container.editor-container_document-editor.editor-container_include-style > div.editor-container__editor-wrapper > div > div");
+    return window.editor.getData();
+    // const pageContent =document.querySelector("#app > div > div > div.editor-container.editor-container_document-editor.editor-container_include-style > div.editor-container__editor-wrapper > div > div");
    // const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div");
-    return pageContent.outerHTML;
+    // return pageContent.outerHTML;
 }

 // 获取并应用用户定义的样式
@ -136,3 +138,12 @@ export function getAndApplyUserStyles() {
    document.head.appendChild(styleElement);
    return styles;
 }
+
+// markdown转html 便于将大语言模型的输出（一般为markdown格式）转换为ckeditor的html格式
+// 利用ckeditor markdown插件，但不能在CkeditorView.vue中使用
+// 否则会改变编辑器数据处理器为markdown，即getData()需要传入markdown string，setData()返回markdown string
+export function markdown2html(markdownString){
+    const markdownToHtml = new MarkdownToHtml();
+    const htmlString = markdownToHtml.parse(markdownString);
+    return htmlString;
+}
--- a/coeditor_frontend/src/views/CkeditorView.vue
+++ b/coeditor_frontend/src/views/CkeditorView.vue
@ -345,6 +345,7 @@ export default {
 			// 打开已有文本就将pageContent替换
 			// TODO
 			editor.setData(pageContent);
+			window.editor = editor;
 		},
 		// sidebar
 		// 打开/关闭侧边栏