Textboxのsliderでそのまま編集できるように

これまではslider.mdは「アイデア台帳」の中身をカード的に表示して、それをスライドして見ていけるだけのビュアーだったが、直接編集できるようにした。

https://gyazo.com/346e27e3c43bd4d6cfa6112c3150e530

cgiで、アイデア台帳.mdを編集するスクリプトを作る

divのblurをトリガーにして、そのcgiをfetch(post)する

divのヘッダー（番号と、見出しの中身）及び本文を投稿する

cgiでは、アイデア台帳の中身を配列に直し、受け取った番号を鍵に、その部分だけテキストを上書きする

code:.cgi

# -*- coding: utf-8 -*-

import cgi

import cgitb

cgitb.enable()

import sys

import io

import re

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

print('Content-type: text/html; charset=UTF-8\n')

form = cgi.FieldStorage()

num = int(form.getvalue('num', ''))

title = form.getvalue('title', '')

body = form.getvalue('body', '')

def cardparser(l):

temptitle = ""

tempbody = []

cards = []

for item in l:

block = re.match(r'^###(.*)',item)

if (block):

if (temptitle == ""):

temptitle = item

else:

cards.append(temptitle + "".join(tempbody))

temptitle = item

tempbody = []

else:

tempbody.append(item)

else:

cards.append(temptitle + "".join(tempbody))

return cards

FilePath = "/Users/Tadanori/Dropbox/textbox/list/アイデア台帳.md"

with open(FilePath, mode='r') as f:

l = f.readlines()

cards = cardparser(l)

with open(FilePath, mode='w') as f:

f.writelines("".join(cards))

code:script.js

d.addEventListener('blur',evt =>{

const cardhead = document.getElementById('slidermainheader');

const s = cardhead.innerText.match(/(\d+):(.*)?/);

const cardbody = document.getElementById('slidermainbody');

var formData = new FormData();

formData.set("body",cardbody.innerText);

fetch("/cgi-bin/cgi-writetext.cgi",

{

body: formData,

method: "post"

}).then(response => {

//alert(response)

if (response.ok) {

response.text().then(function (text) {

console.log(text)

});

}

else {

alert("not OK")

throw response;

}

}).catch(err => {

alert(err);

throw err;

});

});

思ったより、簡単に実装できた。

ref.