# 學習歷程記錄器_Part 4: Markdown 編輯器的嵌入
時長: 30 min+30 min實作時間
## 這麼做有甚麼好處?
- 讓使用者可以即時編輯內容
- 使用者可以用通用的markdown語言書寫筆記

[Markdown語言使用說明](https://experienceleague.adobe.com/zh-hant/docs/contributor/contributor-guide/writing-essentials/markdown)
## 範例code
放置Markdown 編輯器的地方

<!-- Markdown Editor -->
<form id="markdown-form" method="POST">
    <textarea id="markdown-editor" name="markdownContent"></textarea>
    <input type="hidden" id="topicName" name="topicName" value="{{ topic.topicName }}">
</form>
<!-- End of Markdown Editor -->

讓編輯器可以運行

<script type="text/javascript">
    // 初始化 SimpleMDE 编辑器
    var simplemde = new SimpleMDE({ element: document.getElementById("markdown-editor") });
    
    // 点击保存按钮时触发
    $('#save-markdown-btn').click(function() {
        var markdownContent = simplemde.value(); // 获取 Markdown 内容
        var topicName = $('#topicName').val(); // 获取主题名称
        
        // 弹出确认窗口
        if (confirm("保存學習記錄囉!")) {
            // 发送数据到后端
            $.ajax({
                url: '/save_markdown',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ markdownContent: markdownContent, topicName: topicName }),
                success: function(response) {
                    console.log('Markdown content saved successfully');
                    // 处理成功响应
                },
                error: function(xhr, status, error) {
                    console.error('Error saving Markdown content:', error);
                    // 处理错误响应
                }
            });
        }
    });
    
    $(document).ready(function() {
        // 发送请求获取上次保存的 Markdown 内容
        $.ajax({
            url: '/get_markdown/{{ topic.topicName }}', // 替换为正确的路由，包含主题名称
            type: 'GET',
            success: function(response) {
                var lastMarkdownContent = response.markdownContent;
                // 将获取到的 Markdown 内容填充到 Markdown 编辑器中
                simplemde.value(lastMarkdownContent);
            },
            error: function(xhr, status, error) {
                console.error('Error fetching last Markdown content:', error);
            }
        });
    });
</script>

app.py 使編輯器可以寫入資料與儲存資料

@app.route('/save_markdown', methods=['POST'])
def save_markdown():
    # 获取来自前端的 JSON 数据，包含 Markdown 内容和主题名称
    request_data = request.json
    
    # 加载原始数据
    with open('learning.json', 'r') as file:
        data = json.load(file)
    
    # 根据主题名称找到相应的主题对象，并将 Markdown 内容添加到其中
    for record in data['learning_records']:
        if record.get('topicName') == request_data.get('topicName'):
            record['markdownContent'] = request_data.get('markdownContent', '')
            break
    
    # 将更新后的数据写回到 JSON 文件中
    with open('learning.json', 'w') as file:
        json.dump(data, file, indent=4)
    
    # 响应成功消息
    return jsonify({'message': 'Markdown content saved successfully'})

@app.route('/get_markdown/<topic_name>')
def get_markdown(topic_name):
    # 加载 learning.json 文件中的内容
    with open('learning.json', 'r') as file:
        data = json.load(file)
    
    # 根据主题名称找到相应的主题对象，并返回 Markdown 内容
    for record in data['learning_records']:
        if record.get('topicName') == topic_name:
            markdown_content = record.get('markdownContent', '')
            break
    
    # 返回获取到的 Markdown 内容
    return jsonify({'markdownContent': markdown_content})

:::info
💡實作時間:

1. 把你的網頁加上markdown編輯器
2. 確定可以把編輯器中的內容寫入資料庫中
:::