添加了简单 markdown 编辑

2023-07-03 20:43:46 +08:00 · 2023-07-03 20:43:46 +08:00 · 3fd0ffe456
parent fef9e15030
commit 3fd0ffe456
1 changed files with 164 additions and 0 deletions
--- a/AicsKnowledgeBase/qml/page/NoteEditPage.qml
+++ b/AicsKnowledgeBase/qml/page/NoteEditPage.qml
@ -0,0 +1,164 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtWebEngine 1.2
+import FluentUI
+
+FluArea {
+    id: edit_area
+    paddings: 0
+    backgroundColor: "#f9f9f9"
+    property string noteId: "234"
+
+    FluScrollablePage {
+        id: edit_page
+        anchors.fill: parent
+        leftPadding: 10
+        topPadding: 10
+        rightPadding: 10
+        bottomPadding: 0
+
+        property string contentMd: "**ssijfdijgo**\ndfdgfdggggggggggggggggggggggggggggggggggggggggggggggggggg"
+        property bool isEditing: false
+        property bool isEditable: false
+
+        Component.onCompleted: {
+            edit_page.isEditable = true
+
+            textArea_edit.text = edit_page.contentMd
+            edit_page.contentMd = Qt.binding(
+                        function() {
+                            return textArea_edit.text
+                        })
+            textArea_preview.text = Qt.binding(
+                        function() {
+                            return edit_page.contentMd
+                        })
+        }
+
+        Item {
+            Layout.fillWidth: true
+            implicitHeight: 50
+
+            FluIconButton {
+                id: button_edit
+                iconSource: FluentIcons.Edit
+                visible: true
+                anchors {
+                    right: parent.right
+                }
+                onClicked: {
+                    button_edit.visible = false
+                    button_save.visible = true
+                    button_preview.visible = true
+                    button_subfield.visible = true
+                    button_editing.visible = true
+                    button_cancel.visible = true
+                }
+            }
+
+            FluIconButton {
+                id: button_cancel
+                iconSource: FluentIcons.Cancel
+                text: "取消"
+                visible: false
+                anchors {
+                    right: parent.right
+                }
+                onClicked: {
+                    button_edit.visible = edit_page.isEditable
+                    button_save.visible = false
+                    button_preview.visible = false
+                    button_subfield.visible = false
+                    button_editing.visible = false
+                    button_cancel.visible = false
+                }
+            }
+
+            FluIconButton {
+                id: button_save
+                iconSource: FluentIcons.Save
+                text: "保存"
+                visible: false
+                anchors {
+                    right: button_cancel.left
+                }
+            }
+
+            FluIconButton {
+                id: button_preview
+                iconSource: FluentIcons.PreviewLink
+                text: "预览"
+                visible: false
+                onClicked: {
+                    md_show_view.isEditShowing = false
+                    md_show_view.isPreviewShowing = true
+                }
+
+                anchors {
+                    right: button_save.left
+                }
+            }
+
+            FluIconButton {
+                id: button_subfield
+                iconSource: md_show_view.isPreviewShowing ? FluentIcons.ClosePane: FluentIcons.OpenPane
+                text: "分栏"
+                visible: false
+                onClicked: {
+                    md_show_view.isEditShowing = true
+                    md_show_view.isPreviewShowing = !md_show_view.isPreviewShowing
+                }
+                anchors {
+                    right: button_preview.left
+                }
+            }
+
+            FluIconButton {
+                id: button_editing
+                iconSource: FluentIcons.ClipboardList
+                text: "编辑"
+                visible: false
+                onClicked: {
+                    md_show_view.isEditShowing = true
+                    md_show_view.isPreviewShowing = false
+                }
+                anchors {
+                    right: button_subfield.left
+                }
+            }
+        }
+        SplitView {
+            id: md_show_view
+            property bool isEditShowing: false
+            property bool isPreviewShowing: true
+
+            Layout.fillWidth: true
+            implicitHeight: 300
+            ScrollView {
+                id: edit_show_view
+                implicitWidth: parent.width / 2
+                height: parent.height
+                visible: md_show_view.isEditShowing
+                TextArea {
+                    id: textArea_edit
+                    wrapMode: TextEdit.Wrap
+                }
+            }
+
+            ScrollView {
+                id: preview_show_view
+                implicitWidth: parent.width / 2
+                height: parent.height
+                visible: md_show_view.isPreviewShowing
+                TextArea {
+                    id: textArea_preview
+                    wrapMode: TextEdit.Wrap
+                    textFormat: TextEdit.MarkdownText
+                }
+            }
+        }
+    }
+}