initial commit

.gitignore

@@ -0,0 +1,4 @@
+__pycache__
+config*
+.DS_Store
+*.pyc

README.md

@@ -0,0 +1,27 @@
+settup python bhouse-backstage development environment    
+    
+python - 3.6.8    
+https://www.python.org/downloads/  
+install python virtualenv first   
+    
+---
+### setup virtualenvs
+cd ~    
+mkdir .virtualenvs    
+cd .virtualenvs    
+    
+macOS    
+python3.6 -m venv bhouse_backstage     
+source ~/.virtualenvs/bhouse_backstage/bin/activate    
+    
+### setup bhouse_backstage
+cd 工作目錄
+git clone http://git.choozmo.com:3000/choozmo/bhouse_backstage.git    
+cd bhouse_backstage    
+pip install -r requirements.txt    
+請先找管理員拿config放到指定目錄(backstage/config.py, backstage/static/config.js)    
+    
+## 執行
+python run.py    
+
+0617 版本

backstage/__init__.py

@@ -0,0 +1,40 @@
+from flask import Flask
+from flask_cors import CORS, cross_origin
+import os
+
+
+def create_app():
+    SECRET_KEY = os.urandom(32)
+    app = Flask(__name__)
+    CORS(app)
+    app.config['SECRET_KEY'] = SECRET_KEY
+
+    from backstage.collections.routes import collections_app
+    from backstage.editor.routes import editor_app
+    from backstage.home.routes import home_app
+    from backstage.room_planner.routes import room_planner_app
+    from backstage.blogs.routes import blogs_app
+    from backstage.store_locations.routes import store_locations_app
+    from backstage.upload.routes import upload_app
+
+    CORS(upload_app)
+    app.register_blueprint(collections_app)
+    app.register_blueprint(editor_app)
+    app.register_blueprint(home_app)
+    app.register_blueprint(blogs_app)
+    app.register_blueprint(room_planner_app)
+    app.register_blueprint(store_locations_app)
+    app.register_blueprint(upload_app)
+
+    from models.contents.routes import contents_app
+    from models.manages.routes import manages_app
+    #from models.store_locations.routes import store_locations_app
+    from models.statics.routes import statics_app
+    
+    app.register_blueprint(contents_app)
+    app.register_blueprint(manages_app)
+    #app.register_blueprint(store_locations_app)
+    app.register_blueprint(statics_app)
+    
+    
+    return app

backstage/blogs/forms.py

@@ -0,0 +1,24 @@
+import os
+import fnmatch
+from backstage.config import PORTAL_SERVER, UPLOAD_PATH_MAP
+from flask_wtf import FlaskForm
+from flask_wtf.file import FileField, FileRequired, FileAllowed
+from wtforms import StringField, SelectField
+from wtforms.validators import DataRequired
+
+
+selected_choices = [('home_aesthetics', '居家美學'),
+                    ('room_planner_expertise', '規劃師QA'),
+                    ('home_inspection_knowledge', '驗屋知識')]
+
+
+class BlogCreateForm(FlaskForm):
+    title = StringField('標題', validators=[DataRequired()])
+    image = FileField('圖片', validators=[
+        FileRequired(), FileAllowed(['jpg', 'png', 'gif', 'webp'], 'Images only!')])
+    #categories = SelectField('主題類別', choices=selected_choices)
+    categories = StringField('類別', validators=[DataRequired()])
+
+
+
+    

backstage/blogs/routes.py

@@ -0,0 +1,390 @@
+from flask import flash, render_template, Blueprint, request, redirect, url_for
+from flask.app import Flask
+from flask.wrappers import Response
+import requests
+import os
+import fnmatch
+import re
+import markdown
+import uuid
+from backstage.blogs.forms import BlogCreateForm
+from backstage.utils import get_now_time, translate
+from backstage.utils.routes import create_content, remove_content, get_trans_title_url_name
+from backstage.config import PORTAL_SERVER, UPLOAD_PATH_MAP, BHOUSE_WEB_DIR
+
+blogs_app = Blueprint('blogs', __name__)
+
+SwfType = {
+   "other_furniture": "其他單品設計",
+    "master_bedroom": "臥室",
+    "living_room": "客廳",
+    "study_room": "書房",
+    "dining_room": "餐廳",
+    "custom_made_system_cabinet": "客製模組系統櫃",
+    "system_cabinet": "模組系統櫃單品",
+}
+SfType = {
+    "custom_made_system_cabinet": "客製模組系統櫃",
+    "system_cabinet": "模組系統櫃單品",
+}
+
+#furniturePath = UPLOAD_PATH_MAP[0][0] + '../設計家具'
+furniturePath = BHOUSE_WEB_DIR + '/content/furniture_design_list'
+sfurniturePath = UPLOAD_PATH_MAP[0][0] + '../模組系統櫃'
+furnitureTypes = []
+furnitureTypeFiles = []
+furnitureFiles = []
+furnitures = []
+
+
+def refreshFur(itype):
+    scanpath = ""
+    furnitureTypes.clear()
+    furnitureTypeFiles.clear()
+    furnitureFiles.clear()
+    furnitures.clear()
+    if itype == '單品家具':
+        scanpath = furniturePath
+    else:
+        scanpath = sfurniturePath
+    print(scanpath)
+    for dirname, dirnames, filenames in os.walk(scanpath):
+        # print path to all subdirectories first.
+        for subdirname in dirnames:
+            if subdirname.find('.') == -1:
+                furnitureTypes.append(subdirname)
+
+        # print path to all filenames.
+        for filename in filenames:
+            if filename.find('_index.md') >= 0:
+                furnitureTypeFiles.append(os.path.join(dirname, filename))
+            if filename.find('index.md') >= 0:
+                furnitureFiles.append(os.path.join(dirname, filename))
+
+    headerStart = False
+    for files in furnitureFiles:
+        tmpfurniture = {}
+        typeFlag = 0 #if type does not exist flag will not be triggered
+        with open(files, 'r', encoding="utf-8") as md:
+            md_line_data = md.readlines()
+            # print(md_line_data)
+        for line in md_line_data:
+            # print(line)
+            if '---' in line:
+                headerStart = not headerStart
+                continue
+            if headerStart:
+                if 'title:' in line:
+                    tmpfurniture['title'] = re.split('"|\n', line)[1]
+                if 'date:' in line:
+                    tmpfurniture['date'] = re.split(':"|\n', line)[0][6:]
+                if 'draft:' in line:
+                    tmpfurniture['draft'] = re.split(':"|\n', line)[0][7:]
+                if 'type:' in line:
+                    typeFlag = 1
+                    tmpfurniture['type'] = re.split('"|\n', line)[1]
+                if 'url:' in line:
+                    tmpfurniture['url'] = re.split('"|\n', line)[1]
+                if 'image:' in line:
+                    tmpfurniture['image'] = re.split('"|\n', line)[1]
+                if 'tags:' in line:
+                    tmpfurniture['tags'] = re.split('"|\n', line)[1]
+        # 避免加入類別項目
+        if typeFlag == 0:
+            furnitures.append(tmpfurniture)
+        elif tmpfurniture['type'] != tmpfurniture['url'][1:]:
+            furnitures.append(tmpfurniture)
+
+
+def newFur(irequest):
+    # print(irequest.url)
+    myType = {}
+    myPath = ""
+    # print(str(irequest.url).find("system_furniture"))
+    if str(irequest.url).find("system_furniture") >= 0:
+        myType = SfType
+        myPath = sfurniturePath
+    else:
+        myType = SwfType
+        myPath = furniturePath
+    ename = get_trans_title_url_name(irequest.args['newSwfName'])
+    front_matter = '''---
+meta_title: "{}"\n
+meta_description: "{}"\n
+title: "{}"\n
+date: {}\n
+draft: true\n
+type: "{}"\n
+url: "/furniture_design/{}/{}"\n
+image: ""\n
+---'''.format(irequest.args['newSwfName'], '', irequest.args['newSwfName'], get_now_time(), irequest.args['newSwfDropdown'], irequest.args['newSwfDropdown'], ename)
+
+    newPath = myPath + '/' + myType[irequest.args['newSwfDropdown']] + '/' + ename
+    if not os.path.exists(newPath):
+        os.mkdir(newPath)
+    newPath = newPath 
+    with open(os.path.join(newPath, 'index.md'), 'w', encoding="utf-8") as md:
+        md.write(front_matter)
+
+    # furniturePath
+    # get_trans_title_url_name()
+    return furniturePath
+
+
+@blogs_app.route('/backstage/blogs', methods=['GET'])
+def blog_list():
+    response = requests.get('{}contents?url=/maincategories'.format(PORTAL_SERVER))
+    #print('{}contents?url=/maincategories'.format(PORTAL_SERVER))
+    if response.status_code == 200:
+        sortedData = sorted(response.json(), key=lambda x: x['date'], reverse=True)
+        return render_template('blogs.html',
+                               title='設計專欄',
+                               legend='設計專欄列表',
+                               blogs=sortedData,
+                               length=len(response.json()),
+                               form=BlogCreateForm())
+
+
+@blogs_app.route('/backstage/new_solid_wood_furniture', methods=['GET'])
+def new_solid_wood_furniture():
+    # edit_solid_wood_furniture()
+    return newFur(request)
+
+
+@blogs_app.route('/backstage/new_system_furniture', methods=['GET'])
+def new_system_furniture():
+    # edit_solid_wood_furniture()
+    return newFur(request)
+
+
+@blogs_app.route('/backstage/del_solid_wood_furniture', methods=['GET'])
+def del_solid_wood_furniture():
+    url = request.args.get('url', type=str)
+    response = requests.delete('{}contents?url={}'.format(PORTAL_SERVER, url))
+    if response.status_code == 200:
+        flash('刪除文章成功', 'success')
+    else:
+        flash('刪除文章失敗', 'danger')
+    # edit_solid_wood_furniture()
+    return url
+
+
+@blogs_app.route('/backstage/edit_solid_wood_furniture', methods=['GET'])
+def edit_solid_wood_furniture():
+    response = requests.get('{}contents?url=/furniture_design'.format(PORTAL_SERVER))
+    #print('{}contents?url=/maincategories'.format(PORTAL_SERVER))
+    if response.status_code == 200:
+        #sortedData = sorted(response.json(), key=lambda x: x['date'], reverse=True)
+        return render_template('solid_wood_furniture.html',
+                               title='單品家具',
+                               legend='單品家具',
+                               furnitures=response.json(),
+                               length=len(response.json()))
+
+
+'''
+def edit_solid_wood_furniture():
+    refreshFur('單品家具')
+    sortedData = sorted(furnitures, key=lambda x: x['date'], reverse=True)
+    sortedData = sorted(sortedData, key=lambda x: x['type'])
+    sortedData = furnitures
+    return render_template('solid_wood_furniture.html',
+                           title='單品家具',
+                           legend='單品家具',
+                           furnitures=sortedData, length=len(furnitures),
+                           )
+'''
+
+@blogs_app.route('/backstage/edit_system_furniture', methods=['GET'])
+def edit_system_furniture():
+    refreshFur('模組系統櫃')
+    sortedData = sorted(furnitures, key=lambda x: x['date'], reverse=True)
+    sortedData = sorted(sortedData, key=lambda x: x['type'])
+    return render_template('system_furniture.html',
+                           title='模組系統櫃',
+                           legend='模組系統櫃',
+                           furnitures=sortedData, length=len(furnitures),
+                           )
+
+
+@blogs_app.route('/backstage/edit_news', methods=['GET'])
+def edit_news():
+    response = requests.get('{}contents?url=/news'.format(PORTAL_SERVER))
+    if response.status_code == 200:
+        #sortedData = sorted(response.json(), key=lambda x: x['date'], reverse=True)
+        return render_template('news.html',
+                               title='消息與報導',
+                               legend='消息與報導',
+                               news=response.json(), length=len(response.json()), form=BlogCreateForm()
+                               )
+
+
+@blogs_app.route('/backstage/edit_contact_us', methods=['GET'])
+def edit_contact_us():
+    response = requests.get('{}contents?url=/contact'.format(PORTAL_SERVER))
+    if response.status_code == 200:
+        return render_template('contact_us.html',
+                               title='聯絡我們',
+                               )
+
+@blogs_app.route('/backstage/edit_faq', methods=['GET'])
+def edit_faq():
+    return render_template('frequently_asked_questions.html',
+                            title='常見問題',
+                            )
+
+@blogs_app.route('/backstage/edit_contact_us_getemail', methods=['GET'])
+def edit_contact_us_getemail():
+    txt = ""
+    newEmail = request.args.get('newemail', type=str)
+    footerpath = BHOUSE_WEB_DIR + "/themes/hugo-universal-theme-master/layouts/partials/footer.html"
+    with open(footerpath, encoding="utf-8") as inf:
+        txt = inf.read()
+
+    result = txt[txt.find('"mailto:')+8:txt.find('"',txt.find('"mailto:')+1)]
+
+    #sortedData = sorted(sortedData, key=lambda x: x['type'])
+    return result
+
+@blogs_app.route('/backstage/edit_contact_us_editemail', methods=['GET'])
+def edit_contact_us_editemail():
+    txt = ""
+    newEmail = request.args.get('newemail', type=str)
+    footerpath = BHOUSE_WEB_DIR + "/themes/hugo-universal-theme-master/layouts/partials/footer.html"
+    with open(footerpath, encoding="utf-8") as inf:
+        txt = inf.read()
+
+    result = re.sub(r'"mailto:(\S*)"', '"mailto:' + newEmail + '"', txt)
+
+    with open(footerpath, 'w' , encoding="utf-8") as inf:
+        inf.write(result)      
+
+    #sortedData = sorted(sortedData, key=lambda x: x['type'])
+    return "修改成功" + result
+
+@blogs_app.route('/backstage/blog/create/', methods=['POST'])
+def create():
+    transcat = ""
+    form = BlogCreateForm()
+    if form.categories.data == "居家美學":
+        transcat = "home_aesthetics"
+    elif form.categories.data == "規劃師QA":
+        transcat = "room_planner_expertise"
+    elif form.categories.data == "驗屋知識":
+        transcat = "home_inspection_knowledge"
+    else:
+        transcat = get_trans_title_url_name(form.categories.data)
+    transtitle = get_trans_title_url_name(form.title.data)
+
+    front_matter = '''---
+meta_title: "{}"\n\
+meta_description: "{}"\n\
+title: "{}"\n\
+date: {}\n\
+draft: {}\n\
+type: "{}"\n\
+url: "{}"\n\
+image: "/img/title/{}"\n\
+categories: ["{}"]\n\
+col1: "{}"\n\
+col2: "{}"\n\
+introduction: "{}"\n\
+question_box_intro: "{}"\n\
+---'''.format(form.title.data, "", form.title.data,
+              get_now_time(),
+              'true',
+              'maincategories',
+              '/maincategories/{}'.format(transtitle),
+              form.image.data.filename,
+              form.categories.data,
+              transcat, "", "", "")
+    data = {'frontMatter': front_matter,
+            'name': transtitle,
+            'type': 'blog',
+            'categories': form.categories.data,
+            # 'caturl': caturl
+            }
+
+    return create_content(data, form.image.data)
+
+
+@blogs_app.route('/backstage/blog/createCat/', methods=['GET'])
+def createCat():
+    #title = ""
+    front_matter = '''---
+title: "{}"\n\
+date: {}\n\
+draft: {}\n\
+type: "{}"\n\
+categories: ["{}"]\n\
+---'''.format(request.args["title"],
+              get_now_time(),
+              'false',
+              'blog',
+              get_trans_title_url_name(request.args["title"]))
+
+    CatPath = UPLOAD_PATH_MAP[0][0]+"../maincategories/" + get_trans_title_url_name(request.args["title"])
+
+    # print(CatPath)
+    if not os.path.exists(CatPath):
+        os.mkdir(CatPath)
+    with open(os.path.join(CatPath, 'category.md'), 'w', encoding="utf-8") as md:
+        md.write(front_matter)
+
+    print("11")
+    return Response("你好", 200)
+
+
+@blogs_app.route('/backstage/news/create/', methods=['POST'])
+def createNews():
+    form = BlogCreateForm()
+    transtitle = get_trans_title_url_name(form.title.data)
+
+    front_matter = '''---
+meta_title: "{}"\n
+meta_description: "{}"\n
+title: "{}"\n\
+date: {}\n\
+draft: {}\n\
+type: "{}"\n\
+url: "{}"\n\
+image: ""\n\
+---'''.format(form.title.data, '', form.title.data,
+              get_now_time(),
+              'true',
+              'news',
+              '/news/{}'.format(transtitle))
+
+    data = {'frontMatter': front_matter,
+            'name': transtitle,
+            'type': 'news',
+            }
+
+    return create_content(data, form.image.data)
+
+
+@blogs_app.route('/backstage/blog/remove', methods=['POST'])
+def remove():
+    remove_content()
+    return redirect(url_for('blogs.blog_list'))
+
+
+@blogs_app.route('/backstage/news/remove', methods=['POST'])
+def removeNews():
+    remove_content()
+    return redirect(url_for('blogs.edit_news'))
+
+
+@blogs_app.route('/backstage/utils', methods=['GET'])
+def transService():
+    # print(request.args["trantext"])
+    return get_trans_title_url_name(request.args["trantext"])
+
+
+""" def GetCategories():
+    GetCategories
+    configfiles = [os.path.join(dirpath, f)
+        for dirpath, dirnames, files in os.walk(UPLOAD_PATH_MAP+'../blog')
+        for f in fnmatch.filter(files, 'category.md')]
+
+    return configfiles """

backstage/collections/forms.py

@@ -0,0 +1,42 @@
+from multiprocessing.context import SpawnContext
+from flask_wtf import FlaskForm
+from flask_wtf.file import FileField, FileRequired, FileAllowed
+from wtforms import StringField, TextAreaField, SelectField, MultipleFileField
+from wtforms.validators import DataRequired
+
+
+class CollectionCreateForm(FlaskForm):
+    title = StringField('標題', validators=[DataRequired()])
+    image = FileField('圖片', validators=[FileRequired(), FileAllowed(['jpg', 'png', 'gif', 'webp'], 'Images only!')])
+    collectiontitle = StringField('作品集標題', validators=[DataRequired()])
+    description = TextAreaField('內容描述', validators=[DataRequired()])
+    tags = StringField('分類')
+    coverimg = FileField('封面圖片', validators=[FileRequired(), FileAllowed(['jpg', 'png', 'gif', 'webp'], 'Images only!')])
+    bannerimgtext = StringField('封面圖片說明', validators=[DataRequired()])
+    homeowner = StringField('主人', validators=[DataRequired()])
+    size = StringField('坪數', validators=[DataRequired()])
+    bednum = SelectField('格局', choices=['1房', '2房', '3房', '4房以上',],validators=[DataRequired()])
+    housetype = SelectField('屋型', choices=['大樓', '透天'], validators=[DataRequired()])
+    designer = StringField('設計師', validators=[DataRequired()])
+    space = StringField('設計空間', validators=[DataRequired()])
+    loc = SelectField('地區', choices=['台北','新北','基隆','桃園','新竹','苗栗','台中','南投','彰化','雲林','嘉義','台南','高雄','屏東','宜蘭','花蓮','台東','澎湖','金門','馬祖','其他'], validators=[DataRequired()])
+    budget = StringField('總預算', validators=[DataRequired()])
+    construction = StringField('建案名稱', validators=[DataRequired()])
+    collectiondesc = TextAreaField('作品集描述', validators=[DataRequired()])
+    collectionslider = MultipleFileField('作品集圖片集', validators=[FileRequired(), FileAllowed(['jpg', 'png', 'gif', 'webp'], 'Images only!')])
+    comment = FileField('Comment', validators=[FileRequired(), FileAllowed(['jpg', 'png', 'gif', 'webp'], 'Images only!')])
+
+
+'''
+form.title.data,'',form.title.data,form.collectiontitle.data,
+              get_now_time(),
+              'true',
+              'collection',
+              '/collection/{}'.format(eng_name),
+              form.image.data.filename, form.coverimg.data.filename,
+              form.description.data.replace('\r\n','<br>'),
+              form.tags.data, form.bannerimgtext.data, form.homeowner.data,
+              form.size.data, form.bednum.data, form.housetype.data,
+              form.designer.data, form.space.data, form.loc.data,
+              form.budget.data, form.construction.data, form.collectiondesc.data
+'''

backstage/collections/routes.py

@@ -0,0 +1,94 @@
+from concurrent.futures import process
+from flask import render_template, Blueprint, request, redirect, url_for, jsonify
+import requests
+from wtforms.compat import iteritems
+from backstage.collections.forms import CollectionCreateForm
+from backstage.utils import get_now_time
+from backstage.utils.routes import create_collection_content, remove_content, get_trans_title_url_name
+from backstage.config import PORTAL_SERVER
+import os
+
+collections_app = Blueprint('collections', __name__)
+
+def processImgFile(filename):
+    return os.path.splitext(filename)[0].replace(".","") + os.path.splitext(filename)[1]
+
+
+@collections_app.route('/backstage/collections')
+def collection_list():
+    response = requests.get('{}contents?url=/collection'.format(PORTAL_SERVER))
+    if response.status_code == 200:
+        #sortedData = sorted(response.json(), key='date', reverse=True)        
+        #print(response.json())
+        #aa = json.loads(response.text)
+        #sortedData = sorted(response.json(), key=lambda x:x['date'], reverse=True)
+        """ i=1
+        for d in sortedData:
+            if i == 1:
+                print(d)
+                for key, value in d.items():
+                    print(key+' '+value)
+            i+=1 """
+
+        #print(response.text)
+        return render_template('collections.html',
+                               title='家具規劃作品',
+                               legend='家具規劃作品列表',
+                               collections=response.json(),
+                               length=len(response.json()),
+                               form=CollectionCreateForm())
+
+@collections_app.route('/backstage/collection/create', methods=['POST'])
+def create():
+    form = CollectionCreateForm()
+    csliderimg = []
+    csliderimgfilename = []
+    form.image.data.filename = processImgFile(form.image.data.filename)
+    for file in form.collectionslider.data:
+        file.filename = processImgFile(file.filename)
+        csliderimg.append(file)
+        csliderimgfilename.append(file.filename)
+
+    eng_name = get_trans_title_url_name(form.title.data)
+    front_matter = '''---
+meta_title: "{}"\nmeta_description: "{}"\ncollection_title: "{}"\ntitle: "{}"\n\
+date: {}\n\
+draft: {}\n\
+type: "{}"\n\
+url: "{}"\n\
+image: "/img/title/{}"\n\
+cover_img: "/img/title/{}"\n\
+description: "{}"\n\
+tags: ["{}"]\n\
+banner_img_text: "{}"\n\
+homeowner: "{}"\n\
+size: "{}"\n\
+bed_num: "{}"\n\
+house_type: "{}"\n\
+designer: "{}"\n\
+space: "{}"\n\
+loc: "{}"\n\
+budget: "{}"\n\
+construction: "{}"\n\
+collection_description: "{}"\n\
+collection_slider: "{}"\n\
+comment: "{}"\n
+---'''.format(form.title.data, form.description.data, form.collectiontitle.data, form.title.data,
+              get_now_time(), 'true', 'collection', '/collection/{}'.format(eng_name),
+              form.image.data.filename, form.coverimg.data.filename, form.description.data.replace('\r\n','<br>'), form.tags.data,
+              form.bannerimgtext.data, form.homeowner.data, form.size.data, form.bednum.data,
+              form.housetype.data, form.designer.data, form.space.data, form.loc.data,
+              form.budget.data, form.construction.data, form.collectiondesc.data, csliderimg, form.comment.data.filename)
+    data = {'frontMatter': front_matter,
+            'name': eng_name,
+            'type': 'collection',
+            'dest': '/collection/{}'.format(eng_name)}
+
+    
+    return create_collection_content(data, form.image.data, form.coverimg.data, csliderimg, form.comment.data)
+
+
+@collections_app.route('/backstage/collection/remove', methods=['POST'])
+def remove():
+    remove_content()
+    return redirect(url_for('collections.collection_list'))

backstage/editor/routes.py

@@ -0,0 +1,16 @@
+from flask import render_template, Blueprint, request
+from backstage.config import BHOUSE_SERVER
+
+editor_app = Blueprint('editor', __name__)
+
+
+@editor_app.route('/backstage/editor')
+def editor():
+    type = ""
+    url = request.args.get('url', type=str)
+    if "collection" in url: # 作品集
+        type = "collection"
+    elif "maincategories" in url: # 設計專欄
+        type = "blog"
+        return render_template('editorblog.html', title='Type Editor', url=url, type=type, bhouse_server=BHOUSE_SERVER)
+    return render_template('editor.html', title='Type Editor', url=url, type=type, bhouse_server=BHOUSE_SERVER)

backstage/home/routes.py

@@ -0,0 +1,28 @@
+from flask import render_template, Blueprint, request, redirect, url_for
+import requests
+from backstage.utils.routes import update_manage_table
+from backstage.config import PORTAL_SERVER, BHOUSE_SERVER
+
+home_app = Blueprint('home', __name__)
+
+
+@home_app.route('/backstage/home')
+def home():
+    response = requests.get('{}manages/data?page=home'.format(PORTAL_SERVER))
+    if response.status_code == 200:
+        return render_template('home.html',
+                               title='首頁',
+                               form_url='home.update',
+                               page='home',
+                               contents=response.json(),
+                               bhouse_server=BHOUSE_SERVER)
+
+
+@home_app.route('/backstage/home/update', methods=['POST'])
+def update():
+    update_manage_table(request.form.getlist('data'),
+                        request.form.getlist('element'),
+                        request.args,
+                        request.files.getlist('image'),
+                        'home3')
+    return redirect(url_for('home.home'))

backstage/room_planner/routes.py

@@ -0,0 +1,27 @@
+from flask import render_template, Blueprint, request, redirect, url_for
+import requests
+from backstage.utils.routes import update_manage_table
+from backstage.config import PORTAL_SERVER, BHOUSE_SERVER
+
+room_planner_app = Blueprint('room_planner', __name__)
+
+
+@room_planner_app.route('/backstage/room_planner')
+def main():
+    response = requests.get('{}manages/data?page=room_planner'.format(PORTAL_SERVER))
+    return render_template('room_planner.html',
+                           title='規劃師服務',
+                           form_url='room_planner.update',
+                           page='room_planner',
+                           contents=response.json(),
+                           bhouse_server=BHOUSE_SERVER)
+
+
+@room_planner_app.route('/backstage/room_planner/update', methods=['POST'])
+def update():
+    update_manage_table(request.form.getlist('data'),
+                        request.form.getlist('element'),
+                        request.args,
+                        request.files.getlist('image'),
+                        'room_planner3')
+    return redirect(url_for('room_planner.main'))

backstage/static/js/blockElements.js

@@ -0,0 +1,133 @@
+function getBlockElements(contentDiv) {
+  let moreFlag = true;
+  const blockDiv = document.createElement("div");
+  blockDiv.classList.add('blockDiv');
+  const editOpen = document.createElement('button');
+  editOpen.classList.add('btn__editOpen');
+  const editIcon = document.createElement('i');
+  editIcon.classList.add('fas', 'fa-chevron-down');
+  editOpen.append(editIcon);
+  const descButton = document.createElement('button');
+  descButton.classList.add('btn__titledesc');
+  descButton.textContent = '新增段落';
+  const imgButton = document.createElement('button');
+  imgButton.classList.add('btn__addimg');
+  const icon = document.createElement('i');
+  icon.classList.add('fas', 'fa-images');
+  imgButton.appendChild(icon);
+  const h = document.createElement("H2");
+  h.classList.add('blockDiv__h2' ,'mb-3');
+  const input = document.createElement("INPUT");
+  input.classList.add('input');
+  input.setAttribute("type", "text");
+  input.setAttribute("placeholder", '標題');
+  const inputButton = document.createElement('button');
+  inputButton.classList.add('btn__titleInput');
+  inputButton.textContent = '新增/修改';
+  contentDiv.appendChild(blockDiv);
+  blockDiv.append(editOpen, h, input, inputButton, descButton, imgButton);
+  blockDiv.classList.add('mb-4');
+  console.log(editOpen);
+  editOpen.addEventListener('click', function(e) {
+    if(e.target.nodeName !== 'I'){ return };
+    console.log(e.target.parentNode.parentNode.parentNode.children);
+    if(moreFlag) {
+      e.target.classList.remove('fas', 'fa-chevron-down');
+      e.target.classList.add('fas', 'fa-chevron-up');
+      blockDiv.style.height = 'auto';
+      moreFlag = false;
+    } else {
+      e.target.classList.remove('fas', 'fa-chevron-up');
+      e.target.classList.add('fas', 'fa-chevron-down');
+      blockDiv.style.height = '30vh';
+      moreFlag = true;
+    }
+  });
+  return {
+    blockDiv: blockDiv,
+    h: h,
+    titleInput: input,
+    inputButton: inputButton,
+    descButton: descButton,
+    imgButton: imgButton
+  };
+}
+
+function getdescElements(blockDiv) {
+  const descDiv = document.createElement("div");
+  const descTextArea = document.createElement("TEXTAREA");
+  descDiv.classList.add('descBlock');
+  descTextArea.classList.add('textarea');
+  descTextArea.setAttribute("type", "text");
+  descTextArea.setAttribute("placeholder", "內文...");
+  const descInputButton = document.createElement('button');
+  descInputButton.classList.add('btn__descInput');
+  const removeButton = document.createElement('button');
+  removeButton.textContent = '刪除 ';
+  const icon = document.createElement('i');
+  icon.classList.add('fas', 'fa-trash-alt');
+  removeButton.append(icon);
+  removeButton.classList.add('btn__remove');
+  descInputButton.textContent = '新增/修改';
+  blockDiv.appendChild(descDiv);
+  descDiv.append(descTextArea, descInputButton, removeButton);
+  return {
+    descTextArea: descTextArea,
+    descInputButton: descInputButton,
+    descRemoveButton: removeButton,
+  };
+}
+
+function getImgElements(blockDiv) {
+  const div = document.createElement("div");
+  const label = document.createElement('label');
+  const img = document.createElement("img");
+  const input = document.createElement("INPUT");
+  const widthInput = document.createElement("INPUT");
+  const heightInput = document.createElement("INPUT");
+  const imgContainer = document.createElement('div');
+  div.classList.add('imgBlock');
+  imgContainer.classList.add('img__container');
+  imgContainer.append(img);
+  label.setAttribute('for', 'file');
+  label.setAttribute('alt', '上傳照片');
+  label.textContent = "開啟檔案 ";
+  const icon = document.createElement('i');
+  icon.classList.add('fas', 'fa-cloud-upload-alt');
+  label.append(icon);
+  widthInput.setAttribute('placeholder', 'Width(ex: 600)');
+  widthInput.classList.add('input');
+  heightInput.setAttribute('placeholder', 'Height(ex: 600)');
+  heightInput.classList.add('input');
+  const inputButton = document.createElement('button');
+  const removeButton = document.createElement('button');
+  inputButton.classList.add('btn__imgEdit');
+  removeButton.classList.add('btn__imgEdit');
+  input.setAttribute("type", "file");
+  input.setAttribute('id', 'file');
+  input.addEventListener('change', function(event) {
+    if (event.target.files[0]) {
+      let formData = new FormData();
+      formData.append('image', event.target.files[0])
+      const uploadImgUrl = `${PORTAL_SERVER}upload/img?url=${(JSON.parse(document.getElementById('url').textContent)).url}`
+      axios.post(uploadImgUrl, formData, {
+        headers: {
+        'Content-Type': 'multipart/form-data'
+        }
+      })
+    }
+  });
+  inputButton.textContent = '圖片新增/修改';
+  removeButton.textContent = '刪除';
+
+  blockDiv.appendChild(div);
+  div.append(imgContainer, label, input, widthInput, heightInput, inputButton, removeButton);
+  return {
+    img: img,
+    imgInput: input,
+    widthInput: widthInput,
+    heightInput: heightInput,
+    imgInputButton: inputButton,
+    imgRemoveButton: removeButton
+  };
+}

backstage/static/js/blockHandler.js

@@ -0,0 +1,106 @@
+function loadDataToBlock(blockArray, blockCount, blockData) {
+  alert(JSON.stringify(blockData));
+  blockData = blockData || {}
+  var dataIndex = 0;
+  const blockIndex = blockCount;
+  const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements(contentDiv);
+  //if (_.get(blockData, 'title')) {
+    loadTitleData(blockArray, blockIndex, h, _.get(blockData, 'title'));
+    for (var data of _.get(blockData, 'data', [])) {
+      if ('description' in data) {
+        const ownDataIndex = dataIndex;
+        dataIndex += 1;
+        const text = _.get(data, 'description.text');
+        handleDescButton(blockDiv, blockArray, blockIndex, ownDataIndex, text);
+      } else if ('image' in data) {
+        const ownDataIndex = dataIndex;
+        dataIndex += 1;
+        handleImgButton(blockDiv, blockArray, blockIndex, ownDataIndex, data);
+      }
+    }
+  //}
+  inputButton.onclick = function() {
+    loadTitleData(blockArray, blockIndex, h, titleInput.value);
+  }
+  descButton.onclick = function() {
+    const ownDataIndex = dataIndex;
+    dataIndex += 1;
+    handleDescButton(blockDiv, blockArray, blockIndex, ownDataIndex);
+  }
+  imgButton.onclick = function() {
+    const ownDataIndex = dataIndex;
+    dataIndex += 1;
+    handleImgButton(blockDiv, blockArray, blockIndex, ownDataIndex);
+  }
+
+  blockCount += 1
+  return blockCount;
+}
+
+function loadTitleData(blockArray, blockIndex, h, text) {
+  if (isIndexExistInBlockArray(blockIndex, blockArray.length)) {
+    blockArray[blockIndex].title = text;
+    h.textContent = text;
+  } else {
+    blockArray[blockIndex] = {title: text, data: []};
+    h.textContent = text;
+  }
+}
+
+function handleDescButton(blockDiv, blockArray, blockIndex, dataIndex, text) {
+  const {descTextArea, descInputButton, descRemoveButton} = getdescElements(blockDiv);
+  if (text !== undefined) {
+    handleDescInputClick(descTextArea, text, blockArray, blockIndex, dataIndex);
+  }
+  descInputButton.onclick = function() {
+    handleDescInputClick(descTextArea, descTextArea.value, blockArray, blockIndex, dataIndex);
+  }
+  descRemoveButton.onclick = function() {
+    removeDescElement(descTextArea, descInputButton, descRemoveButton);
+    removeDescData(blockArray, blockIndex, dataIndex);
+  }
+}
+
+function handleDescInputClick(textArea, description, blockArray, blockIndex, ownDataIndex) {
+  textArea.textContent = description;
+  addDataToBlockArray({description: {text: description + '\n'}}, blockArray, blockIndex, ownDataIndex)
+}
+
+function handleImgButton(blockDiv, blockArray, blockIndex, dataIndex, preImgObject) {
+  const {img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton} = getImgElements(blockDiv);
+  if (preImgObject !== undefined) {
+    handleImgInputClick(img, preImgObject, blockArray, blockIndex, dataIndex);
+  }
+  imgInputButton.onclick = function() {
+    const imgObject = {image: {src: 'img/' + imgInput.files[0].name,
+                               height: heightInput.value,
+                               width: widthInput.value,
+                               alt: 'image field',
+                               layout: 'responsive'}};
+    handleImgInputClick(img, imgObject, blockArray, blockIndex, dataIndex);
+  }
+  imgRemoveButton.onclick = function() {
+    removeImgElement(img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton);
+    removeImgData(blockArray, blockIndex, dataIndex, );
+  }
+}
+
+function handleImgInputClick(img, imgObject, blockArray, blockIndex, ownDataIndex) {
+  img.setAttribute('src', contentUrl() + _.get(imgObject, 'image.src'));
+  img.setAttribute('width', _.get(imgObject, 'image.width'));
+  img.setAttribute('height', _.get(imgObject, 'image.height'));
+  img.setAttribute('alt', _.get(imgObject, 'image.alt'));
+  addDataToBlockArray(imgObject, blockArray, blockIndex, ownDataIndex)
+}
+
+function addDataToBlockArray(dataObject, blockArray, blockIndex, dataIndex) {
+  if ('data' in blockArray[blockIndex]) {
+    blockArray[blockIndex].data[dataIndex] = dataObject
+  } else {
+    blockArray[blockIndex].data = [dataObject];
+  }
+}
+
+function isIndexExistInBlockArray(blockIndex, length) {
+  return blockIndex < length;
+}

backstage/static/js/editor.js

@@ -0,0 +1,304 @@
+const contentDiv = document.getElementById('editor_block');
+const titleButton = document.getElementById('title_button');
+const submitButton = document.getElementById('submit_button');
+contentApiUrl = `${PORTAL_SERVER}contents?url=${(JSON.parse(document.getElementById('url').textContent)).url}`
+
+aa = "";
+frontMatters = [];
+contentMatters = [];
+editorBlocks = [];
+var editor;
+axios.get(contentApiUrl).then(({ data }) => {
+  const content = data[0]['content'];
+  var blockArray = [{ title: '', data: [] }];
+  var blockCount = 0;
+  blocks = parseMd(content);
+  aa = new MDParser(content);
+  editor_block = document.getElementById('editor_block');
+  //alert(blocks[0]['text']);
+
+  //ul = document.createElement('ul');
+  //ul.id = "sortable";
+  for (i = 0; i < blocks.length; i++) {
+    //li = document.createElement('li');
+    //odiv = document.createElement('div');
+    //odiv.style.border = 'inset 1px gray';
+    if (blocks[i]['type'] == "para") {
+      editorBlocks.push({ type: "paragraph", data: { text: blocks[i]['text'] } });
+      //tmp = document.createElement('textarea');
+      //tmp.style.border = 'outset 5px pink';
+      //tmp.style.width = '100%';
+      //tmp.value = blocks[i]['text'];
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "br") {
+      editorBlocks.push({ type: "paragraph", data: { text: "" } });
+      //tmp = document.createElement('br');
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "img") {
+      ampimg = blocks[i]['text'];
+      //alert(ampimg.indexOf("width=\"",84));
+      //alert(ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5));
+      tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+      //tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.lastIndexOf(".") - ampimg.indexOf("src=\"") -1);
+      //tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf(".webp") - ampimg.indexOf("src=\""));
+      editorBlocks.push({
+        type: "image", data: {
+          file: {
+            url: tmpsrc,
+            width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
+            height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
+          },
+          caption: ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5).toString(),
+          stretched: false,
+          withBorder: true,
+          withBackground: false,
+        }
+      });
+      //alert(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8));
+      //img = document.createElement('img');
+      //img.style.width = '100%';
+      //img.src = tmpsrc;
+      //odiv.appendChild(img);
+    }
+    else if (blocks[i]['type'] == "youtube") {
+      ampimg = blocks[i]['text'];
+      vid = ampimg.substr(ampimg.indexOf("data-videoid=\"") + 14, ampimg.indexOf("\"", ampimg.indexOf("data-videoid=\"") + 14) - ampimg.indexOf("data-videoid=\"") - 14)
+      editorBlocks.push({
+        type: "embed", data: {
+          service: 'youtube',
+          source: 'https://www.youtube.com/watch?' + vid,
+          embed: 'https://www.youtube.com/embed/' + vid,
+          width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
+          height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
+        }
+      });
+    }
+    else if (blocks[i]['type'] == "title") {
+      blocks[i]['text'] = blocks[i]['text'].replace("### **", "").replace("**", "")
+      editorBlocks.push({ type: "header", data: { text: blocks[i]['text'] } });
+      //tmp = document.createElement('h3');
+      //tmp.innerHTML = blocks[i]['text'];
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "hr") {
+      //alert('yo');
+      editorBlocks.push({ type: "paragraph", data: { text: "---" } });
+    }
+    else if (blocks[i]['type'] == "mt5") {
+      //alert('yo');
+      editorBlocks.push({ type: "delimiter", data: {} });
+    }
+    else if (blocks[i]['type'] == "table") {
+      //alert('yo');
+      editorBlocks.push({ type: "table", data: { content: tableTextToArray(blocks[i]['text']) } });
+    }
+    //li.appendChild(odiv);
+    //ul.appendChild(li);
+  }
+  //editor_block.appendChild(ul);
+  //$("#sortable").sortable();
+  //$("#sortable").disableSelection();
+  $("#editor_block").css({ "display": "none" });
+  //alert(JSON.parse(document.getElementById('url').textContent).url);
+  $('#editorjs')[0].innerHTML = "";
+  //alert(JSON.stringify(editorBlocks));
+  editor = new EditorJS({
+    readOnly: false,
+    holder: 'editorjs',
+
+    tools: {
+      header: {
+        class: Header,
+        config: {
+          placeholder: 'Header'
+        }
+      },
+
+      image: {
+        class: ImageTool,
+        config: {
+          endpoints: {
+            byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url, // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url, // Your endpoint that provides uploading by Url
+            /* byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your endpoint that provides uploading by Url */
+            /* byFile: '/backstage/upload/' + $('#ctitle').val(), // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage/' + $('#ctitle').val(), // Your endpoint that provides uploading by Url */
+          }
+        }
+      }
+      ,
+      // warning: {
+      //   class: Warning,
+      //   inlineToolbar: true,
+      //   config: {
+      //     titlePlaceholder: 'Title',
+      //     messagePlaceholder: 'Message',
+      //   },
+      // },
+      table: Table,
+      delimiter: Delimiter,
+      embed: Embed,
+    }
+    ,
+    data: { blocks: editorBlocks }
+    ,
+    onReady: function () {
+      //saveButton.click();
+    },
+    onChange: function (api, block) {
+      //console.log('something changed', block);
+    }
+  });
+
+  /*   for (var blockData of preBlockArray) {
+      blockCount = loadDataToBlock(blockArray, blockCount, blockData);
+    }
+    titleButton.onclick = function () {
+      blockCount = loadDataToBlock(blockArray, blockCount);
+    } */
+});
+
+function editorSave() {
+  editor.save().then((outputData) => {
+    //console.log('Article data: ', outputData);
+    //var mdContent = GetMdHeader();
+    //var mdContent = frontMatters.join('\n');
+    //console.log(mdContent);
+    //console.log(frontMatters.join('\n'));
+    //mdContent = mdContent.replace('draft: ' + (!$('#cdraft').is(':checked')), 'draft: ' + $('#cdraft').val())
+    //alert(mdContent);
+    /*
+    for (var frontMatter of frontMatters) {
+      mdContent += frontMatter + '\n';
+    }
+    
+    //alert($('#cdescription').val());
+    mdContent += '---\n';
+    mdContent += 'title: "' + $('#ctitle').val() + '"\n';
+    mdContent += 'date: ' + $('#cdate').val() + '\n';
+    mdContent += 'draft: ' + $('#cdraft').val() + '\n';
+    mdContent += 'type: "' + $('#ctype').val() + '"\n';
+    mdContent += 'url: "' + $('#curl').val() + '"\n';
+    mdContent += 'image: "' + $('#cimage').val() + '"\n';
+    mdContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+    mdContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
+    mdContent += 'tag: "' + ($('#ctag').val() == 'undefined' ? "" : $('#ctag').val()) + '"\n';
+    mdContent += '---\n\n';
+    */
+
+    //var articleinfo = frontMatters.join('\n');
+    var articleinfo = GetMdHeader();
+    var mdContent = '<div class="container-fluid blog_article p-0">\n\n';
+    //var headings = new Array();
+
+    for (i = 0; i < outputData.blocks.length; i++) {
+      var paragraphdata = ""
+
+      //alert(block.type);
+      block = outputData.blocks[i];
+      if (block.type == "header") {
+        mdContent += '## ' + block.data.text + '\n';
+      }
+      else if (block.type == "paragraph") {
+        paragraphdata += block.data.text;
+        
+        if (paragraphdata != "") //make sure it's not empty
+        {
+          mdContent += paragraphdata + '\n\n';
+        }
+      }
+      else if (block.type == "hr") {
+        //alert('hr');
+        mdContent += '\n---\n';
+      }
+      else if (block.type == "image") {
+        //console.log(block.data.file.url);
+        //console.log(JSON.parse(document.getElementById('url').textContent).url);
+        iurl = block.data.file.url.split('/');
+        mdContent += '<img class="img-fluid" alt="' + block.data.caption
+        + '"\n  src="' + iurl[iurl.length - 2] + '/' + iurl[iurl.length - 1]
+        + '"\n  layout="responsive"></img>';
+        if (block.data.caption != "")
+        {
+          mdContent += '<div class="img-text">' + block.data.caption + '</div>';
+        }
+        mdContent += '\n\n';
+      }
+      else if (block.type == "delimiter") {
+        mdContent += '\n---\n';
+      }
+      else if (block.type == "embed") {
+        mdContent += '\n<iframe src=' + block.data.embed.replace('https://www.youtube.com/embed/', '') + 'layout="responsive" width="' + block.data.width + '" height="' + block.data.height + '"></iframe>\n\n';
+      }
+      else if (block.type == "table") {
+        //alert(tableArrayToHtml(block.data).length);
+        mdContent += '\n' + tableArrayToHtml(block.data.content) + '\n\n'
+        //console.log(tableArrayToHtml(block.data.content));
+      }
+    }
+    //alert(mdContent);
+
+    var mdData = articleinfo + '\n\n' + mdContent;
+
+    postData = {
+      content: mdData,
+      url: (JSON.parse(document.getElementById('url').textContent)).url
+    };
+    axios.post(contentApiUrl, json = postData).then(({ data }) => {
+      alert('作品資料已儲存');
+    });
+  }).catch((error) => {
+    console.log('Saving failed: ', error)
+  });
+
+  /*   var mdContent = '';
+    for (var frontMatter of frontMatters) {
+      mdContent += frontMatter + '\n';
+    } */
+
+  //alert(bb);
+  /*     for(var eBlock in outputData.blocks)
+      {
+        alert(eBlock.type);
+      } */
+  /* 
+for (var idx = 0; idx < blockArray.length; idx++) {
+ if (_.get(blockArray[idx], 'title', '').includes('敘述')) {
+   mdContent += `\n<!-- ### **${_.get(blockArray[idx], 'title', '')}**-->\n`
+ } else {
+   mdContent += `\n### **${_.get(blockArray[idx], 'title', '')}**\n`
+ }
+ for (var data of _.get(blockArray[idx], 'data', [])) {
+   if (_.get(_.keys(data), 0) === 'description') {
+     if (_.get(data, 'description.text', '').includes('\n')) {
+       for (const line of _.get(data, 'description.text', '').split('\n')) {
+         mdContent += `\n${line}    `;
+       }
+     } else {
+       mdContent += `\n${_.get(data, 'description.text', '')}`;
+     }
+   } else if (_.get(_.keys(data), 0) === 'image') {
+     ampImgForm = `\n<amp-img\
+\n  alt="${_.get(data, 'image.alt', '小寶優居')}"\
+\n  src="${_.get(data, 'image.src', '')}"\
+\n  height="${_.get(data, 'image.height', 300)}"\
+\n  width="${_.get(data, 'image.width', 400)}"\
+\n  layout="${_.get(data, 'image.layout', 'responsive')}">\
+\n</amp-img>\n`;
+     mdContent += ampImgForm;
+   }
+ }
+}
+*/
+  /* const postData = {
+    content: mdContent,
+    url: (JSON.parse(document.getElementById('url').textContent)).url
+  }; */
+
+  //axios.post(contentApiUrl, json = postData);
+
+}
+submitButton.onclick = editorSave

backstage/static/js/htmleditor.js

@@ -0,0 +1,1635 @@
+/*!
+ * http://suyati.github.io/line-control
+ * LineControl 1.1.0
+ * Copyright (C) 2014, Suyati Technologies
+ * This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License along with this library; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
+ *
+*/
+
+(function( $ ){
+	var editorObj;
+	var methods = {
+		saveSelection: function() {
+			//Function to save the text selection range from the editor
+			$(this).data('editor').focus();
+		    if (window.getSelection) {
+		        sel = window.getSelection();
+		        if (sel.getRangeAt && sel.rangeCount) {
+		            $(this).data('currentRange', sel.getRangeAt(0));
+		        }
+		    } else if (document.selection && document.selection.createRange) {
+		        $(this).data('currentRange',document.selection.createRange());
+		    }
+		    else
+		    	$(this).data('currentRange', null);
+		},
+
+		restoreSelection: function(text,mode) {
+			//Function to restore the text selection range from the editor
+			var node;
+			typeof text !== 'undefined' ? text : false;
+			typeof mode !== 'undefined' ? mode : "";
+			var range = $(this).data('currentRange');
+		    if (range) {
+		        if (window.getSelection) {
+		        	if(text){
+		            	range.deleteContents();
+		            	if(mode=="html")
+	            		{
+    			            var el = document.createElement("div");
+				            el.innerHTML = text;
+				            var frag = document.createDocumentFragment(), node, lastNode;
+				            while ( (node = el.firstChild) ) {
+				                lastNode = frag.appendChild(node);
+				            }
+				            range.insertNode(frag);
+	            		}
+		            	else
+            				range.insertNode( document.createTextNode(text) );
+
+		            }
+		            sel = window.getSelection();
+		            sel.removeAllRanges();
+		            sel.addRange(range);		            
+		        }
+		        else if (document.selection && range.select) {
+		            range.select();
+		            if(text)
+		            {
+		            	if(mode=="html")
+		            		range.pasteHTML(text);
+		            	else
+		            		range.text = text;
+		            }
+		        }
+		    }
+		},
+
+		restoreIESelection:function() {
+			//Function to restore the text selection range from the editor in IE
+			var range = $(this).data('currentRange');
+		    if (range) {
+		        if (window.getSelection) {
+		            sel = window.getSelection();
+		            sel.removeAllRanges();
+		            sel.addRange(range);
+		        } else if (document.selection && range.select) {
+		            range.select();
+		        }
+		    }
+		},
+
+		insertTextAtSelection:function(text,mode) {
+		    var sel, range, node ;
+		    typeof mode !== 'undefined' ? mode : "";
+		    if (window.getSelection) {
+		        sel = window.getSelection();
+		        if (sel.getRangeAt && sel.rangeCount) {
+		            range = sel.getRangeAt(0);
+		            range.deleteContents();
+		            var textNode = document.createTextNode(text); 
+		            
+		            if(mode=="html")
+		            { 
+		                var el = document.createElement("div");
+		                el.innerHTML = text;
+		                var frag = document.createDocumentFragment(), node, lastNode;
+		                while ( (node = el.firstChild) ) {
+		                    lastNode = frag.appendChild(node);
+		                }
+		                range.insertNode(frag);
+		            }
+		            else
+		            { 
+		            	range.insertNode(textNode);
+		            	range.selectNode(textNode);
+		            }
+		            sel.removeAllRanges();
+		            range = range.cloneRange();		            
+		            range.collapse(false);
+		            sel.addRange(range);
+		        }
+		    } else if (document.selection && document.selection.createRange) { 
+		        range = document.selection.createRange();
+		        range.pasteHTML(text);
+		        range.select();
+		    }
+		},
+
+		imageWidget: function(){
+			//Class for Widget Handling the upload of Files
+			var _idSuffix = this.attr("id");
+			var row = $('<div/>',{
+				"class":"row"
+			}).append($('<div/>',{
+				id :"imgErrMsg_" + _idSuffix
+			}));
+			var container = $('<div/>',{'class':"tabbable tabs-left"});
+			var navTabs = $('<ul/>',
+									{ class: "nav nav-tabs"
+							}).append($('<li/>',
+										{ class:"active"
+									}).append($('<a/>',{
+											"href":"#uploadImageBar_" + _idSuffix,
+											"data-toggle":"tab"
+										}).html("From Computer")
+							)).append($('<li/>').append($('<a/>',{
+											"href":"#imageFromLinkBar_" + _idSuffix,
+											"data-toggle":"tab"
+										}).html("From URL")));
+
+			var tabContent 		= $("<div/>", {class:"tab-content"});
+			var uploadImageBar  = $("<div/>",{
+				id: "uploadImageBar_" + _idSuffix,
+				class: "tab-pane active"
+			});
+
+			handleFileSelect = function(evt) {
+    			var files = evt.target.files; // FileList object
+				var output = [];
+				for (var i = 0, f; f = files[i]; i++) {
+					//Loop thorugh all the files
+					if(!f.type.match('image.*') || !f.name.match(/(?:gif|jpg|png|jpeg)$/)){ //Process only Images
+						methods.showMessage.apply(this,["imgErrMsg_" + _idSuffix,"Invalid file type"]);
+						continue;
+					}
+					var reader = new FileReader();
+					reader.onload = (function(imageFile){
+						return function(e){
+							//Render Thumnails
+							var li = $('<li/>',{class:"col-xs-12 col-sm-6 col-md-3 col-lg-3"});
+							var a = $('<a/>',{
+								href:"javascript:void(0)",
+								class:"thumbnail"
+							});
+							var image = $('<img/>',{
+								src:e.target.result,
+								title:escape(imageFile.name)
+							}).appendTo(a).click(function(){
+								$('#imageList_' + _idSuffix).data('current', $(this).attr('src'));
+								});
+							li.append(a).appendTo($('#imageList_' + _idSuffix));
+						}
+					})(f);
+					reader.readAsDataURL(f);					
+				}				
+			}
+			var chooseFromLocal = $('<input/>',{
+				type: "file",
+				class:"inline-form-control",
+				multiple: "multiple"
+			});
+			chooseFromLocal.on('change', handleFileSelect);
+			uploadImageBar.append(chooseFromLocal);
+			var imageFromLinkBar = $("<div/>",{
+				id: "imageFromLinkBar_" + _idSuffix,
+				class: "tab-pane"
+			});		
+			var getImageURL = $("<div/>", {class:"input-group"});
+			var imageURL = $('<input/>',{
+				type: "url",
+				class:'form-control',
+				id:"imageURL_" + _idSuffix,
+				placeholder: "Enter URL"
+			}).appendTo(getImageURL);
+			var getURL = $("<button/>",{
+				class:"btn btn-success",
+				type:"button"
+			}).html("Go!").click(function(){
+				var url = $('#imageURL_' + _idSuffix).val();
+				if(url ==''){
+					methods.showMessage.apply(this,["imgErrMsg_" + _idSuffix,"Please enter image url"]);
+					return false;
+				}
+				var li = $('<li/>',{class:"span6 col-xs-12 col-sm-6 col-md-3 col-lg-3"});
+				var a = $('<a/>',{
+					href:"javascript:void(0)",
+					class:"thumbnail"
+				});
+				var image = $('<img/>',{
+					src:url,
+				}).error(function(){
+				  	methods.showMessage.apply(this,["imgErrMsg_" + _idSuffix,"Invalid image url"]);
+				  	return false;
+				}).load( function() { $(this).appendTo(a).click(function(){
+					$('#imageList_' + _idSuffix).data('current', $(this).attr('src'));
+				});
+				li.append(a).appendTo($('#imageList_' + _idSuffix));
+			});
+			}).appendTo($("<span/>", {class:"input-group-btn form-control-button-right"}).appendTo(getImageURL));
+
+			imageFromLinkBar.append(getImageURL);
+			tabContent.append(uploadImageBar).append(imageFromLinkBar);
+			container.append(navTabs).append(tabContent);						
+
+			var imageListContainer = $("<div/>",{'class': 'col-xs-12 col-sm-12 col-md-12 col-lg-12'});
+			var imageList = $('<ul/>',{"class":"thumbnails padding-top list-unstyled",
+										"id": 'imageList_' + _idSuffix
+			}).appendTo(imageListContainer);
+			row.append(container).append(imageListContainer);
+			return row;
+		},
+
+		tableWidget: function(mode){
+			//Function to generate the table input form
+			var idExtn = "_" + $(this).attr("id");
+			if (typeof mode!=='undefined') {
+				idExtn = "_" + editorObj.attr("id") + "_Edt";
+			}
+			var tblCntr = $('<div/>',{ //Outer Container Div
+				class:"row-fluid"
+				}).append($('<div/>',{ //Err Message Div
+				 	id :"tblErrMsg"+idExtn 
+				})).append($('<form/>',{ //Form 
+					id:"tblForm"+idExtn 
+					}).append($('<div/>',{ //Inner Container Div
+						class:"row" 
+						}).append($('<div/>',{ //Left input Container Div
+							id :"tblInputsLeft"+idExtn,
+							class:"col-xs-12 col-sm-6 col-md-6 col-lg-6"
+							}).append($('<label/>',{ for:"tblRows"+idExtn,	text:"Rows"}
+							)).append($('<input/>',{
+								id:"tblRows"+idExtn,
+								type:"text",
+								class:"form-control form-control-width",
+								value:2
+							})).append($('<label/>',{ for:"tblColumns"+idExtn,	text:"Columns"}
+							)).append($('<input/>',{
+								id:"tblColumns"+idExtn,
+								type:"text",
+							 	class:"form-control form-control-width",
+							 	value:2
+							})).append($('<label/>',{ for:"tblWidth"+idExtn, text:"Width"}
+							)).append($('<input/>',{
+								id:"tblWidth"+idExtn,
+								type:"text",
+								class:"form-control form-control-width",
+								value:400
+							})).append($('<label/>',{ for:"tblHeight"+idExtn, text:"Height"}
+							)).append($('<input/>',{ 
+								id:"tblHeight"+idExtn,
+								type:"text",
+								class:"form-control form-control-width", 
+							}))
+						).append($('<div/>',{ //Right input Container Div
+							id :"tblInputsRight"+idExtn,
+							class:"col-xs-12 col-sm-6 col-md-6 col-lg-6"
+							}).append($('<label/>',{ for:"tblAlign"+idExtn, text:"Alignment"}
+							)).append($('<select/>',{ id:"tblAlign"+idExtn, class:"form-control form-control-width"}
+								).append($('<option/>',{ text:"Choose", value:""}
+								)).append($('<option/>',{ text:"Left", value:"left"}
+								)).append($('<option/>',{ text:"Center", value:"center"}
+								)).append($('<option/>',{ text:"Right",	value:"right"}))
+							).append($('<label/>',{	for:"tblBorder"+idExtn, text:"Border size"}
+							)).append($('<input/>',{ 
+								id:"tblBorder"+idExtn,
+								type:"text",
+								class:"form-control form-control-width",
+								value:1
+							})).append($('<label/>',{ for:"tblCellspacing"+idExtn,	text:"Cell spacing"}
+							)).append($('<input/>',{
+								id:"tblCellspacing"+idExtn,
+								type:"text", 
+								class:"form-control form-control-width",
+								value:1
+							})).append($('<label/>',{ for:"tblCellpadding"+idExtn,	text:"Cell padding"}
+							)).append($('<input/>',{
+								id:"tblCellpadding"+idExtn,
+								type:"text",
+								class:"form-control form-control-width",
+								value:1
+							}))
+						)
+					)
+				)																	
+			return tblCntr;
+		},
+
+		imageAttributeWidget: function(){
+
+			var edtTablecntr=$('<div/>',{ 
+				class:"row-fluid"}
+				).append($('<div/>',{ //Err Message Div
+				 	id :"imageErrMsg" 
+				})).append($('<input/>',{ 
+						id:"imgAlt",
+						type:"text",
+						class:"form-control form-control-link ",
+						placeholder:"Alt Text",
+					})).append($('<input/>',{
+						id:"imgTarget",
+						class:"form-control form-control-link ",
+						type:"text",
+						placeholder:"Link Target"
+					})).append($('<input/>',{
+						id:"imgHidden",
+						type:"hidden"						
+					}))
+					
+				return edtTablecntr;
+
+		},
+
+		getHTMLTable: function(tblRows,tblColumns,attributes){
+			//Function to generate html table. Supplied arguments: tablerows-no.of rows, no.of columns, table attributes.
+			var tableElement = $('<table/>',{ class:"table" });
+			for (var i = 0; i < attributes.length; i++){
+				if(attributes[i].value!=''){
+					if(attributes[i].attribute=="width" || attributes[i].attribute=="height")
+	                  	tableElement.css(attributes[i].attribute,attributes[i].value);
+					else
+						tableElement.attr(attributes[i].attribute,attributes[i].value);
+				}
+			}
+			for(var i=1; i<=tblRows; i++){
+				var tblRow = $('<tr/>');
+			 	for(var j=1; j<=tblColumns; j++){
+			 		var tblColumn = $('<td/>').html('&nbsp;');
+			 		tblColumn.appendTo(tblRow);
+			 	}				
+				tblRow.appendTo(tableElement);
+			}
+			return tableElement;
+		},
+
+		init : function( options )
+		{
+			if ($(this).attr("id") === undefined || $(this).attr("id") === "") {
+				$(this).attr("id", Date.now());
+			}
+			var fonts = { "Sans serif"	 : "arial,helvetica,sans-serif",
+						  "Serif"	 	 : "times new roman,serif",
+						  "Wide"	 	 : "arial black,sans-serif",
+						  "Narrow"	 	 : "arial narrow,sans-serif",
+						  "Comic Sans MS": "comic sans ms,sans-serif",
+						  "Courier New"  : "courier new,monospace",
+						  "Garamond"	 : "garamond,serif",
+						  "Georgia"	 	 : "georgia,serif",
+						  "Tahoma" 		 : "tahoma,sans-serif",
+						  "Trebuchet MS" : "trebuchet ms,sans-serif",
+						  "Verdana" 	 : "verdana,sans-serif"};
+
+			var styles = {  "Heading 1":"<h1>",
+							"Heading 2":"<h2>",
+							"Heading 3":"<h3>",
+							"Heading 4":"<h4>",
+							"Heading 5":"<h5>",
+							"Heading 6":"<h6>",
+							"Paragraph":"<p>" };
+
+			var fontsizes = {	"Small"	:"2",
+								"Normal":"3",
+								"Medium":"4",
+								"Large"	:"5",
+								"Huge"	:"6" };
+
+			var colors = [	{ name: 'Black', hex: '#000000' },
+							{ name: 'MediumBlack', hex: '#444444' },
+							{ name: 'LightBlack', hex: '#666666' },
+							{ name: 'DimBlack', hex: '#999999' },
+							{ name: 'Gray', hex: '#CCCCCC' },
+							{ name: 'DimGray', hex: '#EEEEEE' },
+							{ name: 'LightGray', hex: '#F3F3F3' },
+							{ name: 'White', hex: '#FFFFFF' },
+
+							{ name: 'libreak', hex: null },
+
+							{ name: 'Red', hex: '#FF0000' },
+							{ name: 'Orange', hex: '#FF9900' },
+							{ name: 'Yellow', hex: '#FFFF00' },
+							{ name: 'Lime', hex: '#00FF00' },
+							{ name: 'Cyan', hex: '#00FFFF' },
+							{ name: 'Blue', hex: '#0000FF' },
+							{ name: 'BlueViolet', hex: '#8A2BE2' },
+							{ name: 'Magenta', hex: '#FF00FF' },
+
+							{ name: 'libreak', hex: null },
+							
+							{ name: 'LightPink', hex: '#FFB6C1'},
+							{ name: 'Bisque', hex: '#FCE5CD'},
+							{ name: 'BlanchedAlmond', hex: '#FFF2CC'},
+							{ name: 'LightLime', hex: '#D9EAD3'},
+							{ name: 'LightCyan', hex: '#D0E0E3'},
+							{ name: 'AliceBlue', hex: '#CFE2F3'},
+							{ name: 'Lavender', hex: '#D9D2E9'},
+							{ name: 'Thistle', hex: '#EAD1DC'},
+
+							{ name: 'LightCoral', hex: '#EA9999' },
+							{ name: 'Wheat', hex: '#F9CB9C' },
+							{ name: 'NavajoWhite', hex: '#FFE599' },
+							{ name: 'DarkSeaGreen', hex: '#B6D7A8' },
+							{ name: 'LightBlue', hex: '#A2C4C9' },
+							{ name: 'SkyBlue', hex: '#9FC5E8' },
+							{ name: 'LightPurple', hex: '#B4A7D6' },
+							{ name: 'PaleVioletRed', hex: '#D5A6BD' },
+
+							{ name: 'IndianRed', hex: '#E06666' },
+							{ name: 'LightSandyBrown', hex: '#F6B26B' },
+							{ name: 'Khaki', hex: '#FFD966' },
+							{ name: 'YellowGreen', hex: '#93C47D' },
+							{ name: 'CadetBlue', hex: '#76A5AF' },
+							{ name: 'DeepSkyBlue', hex: '#6FA8DC' },
+							{ name: 'MediumPurple', hex: '#8E7CC3' },
+							{ name: 'MediumVioletRed', hex: '#C27BA0' },
+
+							{ name: 'Crimson', hex: '#CC0000' },
+							{ name: 'SandyBrown', hex: '#E69138' },
+							{ name: 'Gold', hex: '#F1C232' },
+							{ name: 'MediumSeaGreen', hex: '#6AA84F' },
+							{ name: 'Teal', hex: '#45818E' },
+							{ name: 'SteelBlue', hex: '#3D85C6' },
+							{ name: 'SlateBlue', hex: '#674EA7' },
+							{ name: 'VioletRed', hex: '#A64D79' },
+
+							{ name: 'Brown', hex: '#990000' },
+							{ name: 'Chocolate', hex: '#B45F06' },
+							{ name: 'GoldenRod', hex: '#BF9000' },
+							{ name: 'Green', hex: '#38761D' },
+							{ name: 'SlateGray', hex: '#134F5C' },
+							{ name: 'RoyalBlue', hex: '#0B5394' },
+							{ name: 'Indigo', hex: '#351C75' },
+							{ name: 'Maroon', hex: '#741B47' },
+
+							{ name: 'DarkRed', hex: '#660000' },
+							{ name: 'SaddleBrown', hex: '#783F04' },
+							{ name: 'DarkGoldenRod', hex: '#7F6000' },
+							{ name: 'DarkGreen', hex: '#274E13' },
+							{ name: 'DarkSlateGray', hex: '#0C343D' },
+							{ name: 'Navy', hex: '#073763' },
+							{ name: 'MidnightBlue', hex: '#20124D' },
+							{ name: 'DarkMaroon', hex: '#4C1130' } ];
+
+			var specialchars = [{ name:"Exclamation ", text:"!"},
+								{ name:"At", text:"@"},
+								{ name:"Hash", text:"#"},
+								{ name:"Percentage", text:"%"},
+								{ name:"Uppercase", text:"^"},
+								{ name:"Ampersand", text:"&"},
+								{ name:"Asterisk", text:"*"},
+								{ name:"OpenBracket", text:"("},
+								{ name:"CloseBracket", text:")"},
+								{ name:"Underscore", text:"_"},
+								{ name:"Hiphen", text:"-"},
+								{ name:"Plus", text:"+"},
+								{ name:"Equalto", text:"="},
+								{ name:"OpenSquareBracket", text:"["},
+								{ name:"CloseSquareBracket", text:"]"},
+								{ name:"OpenCurly", text:"{"},
+								{ name:"CloseCurly", text:"}"},
+								{ name:"Pipe", text:"|"},
+								{ name:"Colon", text:":"},
+								{ name:"Semicolon", text:";"},
+								{ name:"Single quote", text:"&#39;"},
+								{ name:"Double quote", text:"&#34;"},
+								{ name:"Left single curly quote", text:"&lsquo;"},
+								{ name:"right single curly quote", text:"&rsquo;"},
+								{ name:"Forward-slash", text:"&#47;"},
+								{ name:"Back-slash", text:"&#92;"},
+								{ name:"LessThan", text:"<"},
+								{ name:"GreaterThan", text:">"},
+								{ name:"QuestionMark", text:"?"},
+								{ name:"Tilda", text:"~"},
+								{ name:"Grave accent", text:"`"},
+								{ name:"Micron", text:"&micro;"},
+								{ name:"Paragraph sign", text:"&para;"},
+								{ name:"Plus/minus", text:"&plusmn;"},
+								{ name:"Trademark", text:"&trade;"},
+								{ name:"Copyright", text:"&copy;"},
+								{ name:"Registered", text:"&reg;"},
+								{ name:"Section", text:"&sect;"},
+								{ name:"right double angle quotes", text:"&#187;"},
+								{ name:"fraction one quarter", text:"&#188;"},
+								{ name:"fraction one half", text:"&#189;"},
+								{ name:"fraction three quarters", text:"&#190;"},
+								{ name:"Dollar", text:"$"},
+								{ name:"Euro", text:"&euro;"},
+								{ name:"Pound", text:"&pound;"},
+								{ name:"Yen", text:"&yen;"},
+								{ name:"Cent", text:"&#162;"},
+								{ name:"IndianRupee", text:"&#8377;"},];
+			
+			var menuItems = { 'fonteffects': true,
+							  'texteffects': true,
+							  'aligneffects': true,
+							  'textformats':true,
+							  'actions' : true,
+							  'insertoptions' : true,
+							  'extraeffects' : true,
+							  'advancedoptions' : true,
+							  'screeneffects':true,
+
+							  'fonts'	: { "select":true,
+											"default": "Font",
+											"tooltip": "Fonts",
+											"commandname": "fontName",
+											"custom":null },
+
+							  'styles'	: { "select":true,
+											"default": "Formatting",
+											"tooltip": "Paragraph Format",
+											"commandname": "formatBlock",
+												"custom":null },
+
+							 'font_size': {	"select":true,
+											"default": "Font size",
+											"tooltip": "Font Size",
+											"commandname":"fontSize", 
+											"custom":null },
+
+							  'color'	: { "text":"A",
+											"icon": "fa fa-font", 
+											"tooltip": "Text/Background Color",
+											"commandname":null,
+											"custom":function(button){
+													var editor = $(this);
+													var flag = 0;
+													var paletteCntr   = $('<div/>',{id:"paletteCntr",class:"activeColour", css :{"display":"none","width":"335px"}}).click(function(event){event.stopPropagation();});
+													var paletteDiv    = $('<div/>',{id:"colorpellete"});
+													var palette       = $('<ul />',{id:"color_ui"}).append($('<li />').css({"width":"145px","display":"Block","height":"25px"}).html('<div>Text Color</div>'));
+													var bgPalletteDiv = $('<div/>',{id:"bg_colorpellete"});
+													var bgPallette    = $('<ul />',{id:"bgcolor_ui"}).append($('<li />').css({"width":"145px","display":"Block","height":"25px"}).html('<div>Background Color</div>'));
+													if(editor.data("colorBtn")){
+														flag = 1;
+														editor.data("colorBtn",null);
+													}
+													else
+														editor.data("colorBtn",1);
+													if(flag==0){
+														for (var i = 0; i < colors.length; i++){
+															if(colors[i].hex!=null){
+															    palette.append($('<li />').css('background-color', colors[i].hex).mousedown(function(event){ event.preventDefault();}).click(function(){															
+																	var hexcolor = methods.rgbToHex.apply(this,[$(this).css('background-color')]);
+																	methods.restoreSelection.apply(this);
+																	methods.setStyleWithCSS.apply(this);
+																	document.execCommand('forecolor',false,hexcolor);
+																	$('#paletteCntr').remove();
+
+																	editor.data("colorBtn",null);
+																}));
+
+																bgPallette.append($('<li />').css('background-color', colors[i].hex).mousedown(function(event){ event.preventDefault();}).click(function(){															
+																var hexcolor = methods.rgbToHex.apply(this,[$(this).css('background-color')]);
+																methods.restoreSelection.apply(this);
+																methods.setStyleWithCSS.apply(this);
+																document.execCommand('backColor',false,hexcolor);
+																$('#paletteCntr').remove();
+																editor.data("colorBtn",null);
+																}));
+															}
+															else{
+																palette.append($('<li />').css({"width":"145px","display":"Block","height":"5px"}));
+																bgPallette.append($('<li />').css({"width":"145px","display":"Block","height":"5px"}));
+															}
+														} 
+														palette.appendTo(paletteDiv);
+														bgPallette.appendTo(bgPalletteDiv);
+														paletteDiv.appendTo(paletteCntr);
+														bgPalletteDiv.appendTo(paletteCntr)																												
+														paletteCntr.insertAfter(button);
+														$('#paletteCntr').slideDown('slow');
+													}
+													else 
+														$('#paletteCntr').remove();
+												}},
+							
+							  'bold'	: { "text": "B", 
+											"icon": "fa fa-bold", 
+											"tooltip": "Bold", 
+											"commandname":"bold", 
+											"custom":null },
+
+						      'italics'	: { "text":"I", 
+											"icon":"fa fa-italic", 
+											"tooltip":"Italics", 
+											"commandname":"italic",
+											"custom":null },
+
+						     'underline': { "text":"U", 
+											"icon":"fa fa-underline", 
+											"tooltip":"Underline", 
+											"commandname":"underline",
+											"custom":null },
+											
+						     'strikeout': { "text": "Strikeout", 
+											"icon":"fa fa-strikethrough", 
+											"tooltip": "Strike Through", 
+											"commandname":"strikeThrough", 
+											"custom":null },
+
+						     'ol'		: { "text": "N", 
+											"icon": "fa fa-list-ol", 
+											"tooltip": "Insert/Remove Numbered List", 
+											"commandname":"insertorderedlist", 
+											"custom":null },
+
+						     'ul'		: { "text": "Bullet", 
+											"icon": "fa fa-list-ul", 
+											"tooltip": "Insert/Remove Bulleted List", 
+											"commandname":"insertunorderedlist", 
+											"custom":null },
+
+						     'undo'		: { "text": "undo", 
+											"icon": "fa fa-undo", 
+											"tooltip": "Undo", 
+											"commandname":"undo", 
+											"custom":null },
+
+						     'redo'		: { "text": "redo", 
+											"icon": "fa fa-repeat", 
+											"tooltip": "Redo", 
+											"commandname":"redo", 
+											"custom":null },
+
+						     'l_align'	: { "text": "leftalign", 
+											"icon": "fa fa-align-left", 
+											"tooltip": "Align Left", 
+											"commandname":"justifyleft", 
+											"custom":null },
+
+						     'r_align'	: { "text": "rightalign", 
+											"icon": "fa fa-align-right", 
+											"tooltip": "Align Right", 
+											"commandname":"justifyright", 
+											"custom":null },
+
+						     'c_align'	: { "text": "centeralign", 
+											"icon": "fa fa-align-center", 
+											"tooltip": "Align Center", 
+											"commandname":"justifycenter", 
+											"custom":null },
+
+						     'justify'	: { "text": "justify", 
+											"icon": "fa fa-align-justify", 
+											"tooltip": "Justify", 
+											"commandname":"justifyfull", 
+											"custom":null },
+
+							  'unlink'	: { "text": "Unlink", 
+											"icon": "fa fa-unlink", 
+											"tooltip": "Unlink", 
+											"commandname":"unlink", 
+											"custom":null },
+
+						   'insert_link': { "modal": true,
+						   					"modalId": "InsertLink_" + $(this).attr("id"),
+											"icon":"fa fa-link", 
+											"tooltip": "Insert Link", 
+											"modalHeader": "Insert Hyperlink",
+											"modalBody": $('<div/>',{   class:"form-group"
+																	}).append($('<div/>',{
+																		id :"errMsg_" + $(this).attr("id")
+																	})).append($('<input/>',{
+																		type:"text",
+																		id:"inputText_" + $(this).attr("id"),
+																		class:"form-control form-control-link ",
+																		placeholder:"Text to Display",
+																	})).append($('<input/>',{
+																		type:"text",
+																		id:"inputUrl_" + $(this).attr("id"),
+																		required:true,
+																		class:"form-control form-control-link",
+																		placeholder:"Enter URL"
+																	})),
+											"beforeLoad":function(){ 
+												editorObj = this;
+												var _idSuffix = "_" + this.attr("id");
+												$('#inputText' + _idSuffix);
+												$('#inputUrl' + _idSuffix);
+												$(".alert").alert("close");
+												if($(editorObj).data('currentRange')!=''){ 
+													$('#inputText_' +  _idSuffix).val($(editorObj).data('currentRange'));
+												}
+											},
+											"onSave":function(){
+												var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
+												var _idSuffix = "_" + editorObj.attr("id");
+												var targetText = $('#inputText' + _idSuffix).val();
+												var targetURL  = $('#inputUrl' + _idSuffix).val();
+												var range      = $(editorObj).data('currentRange');
+												if(targetURL ==''){
+													methods.showMessage.apply(editorObj,["errMsg","Please enter url"]);
+													return false;
+												}												
+												if(!targetURL.match(urlPattern)){
+													methods.showMessage.apply(editorObj,["errMsg","Enter valid url"]);
+													return false;
+												}													
+												if(range=='' && targetText==''){ 
+													targetText =targetURL;	
+												}
+												if(navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Windows NT.*Trident\//)){	
+													var targetLink='<a href="'+targetURL+'" target="_blank">'+targetText+'</a>';
+													methods.restoreSelection.apply(editorObj,[targetLink,'html']);
+												}
+												else{
+												    methods.restoreSelection.apply(editorObj, [targetText]);																																		
+													document.execCommand('createLink',false,targetURL);
+												}
+												$(editorObj).data("editor").find('a[href="'+targetURL+'"]').each(function(){ $(this).attr("target", "_blank"); });
+												$(".alert").alert("close");
+												$("#InsertLink" + _idSuffix).modal("hide");
+												$(editorObj).data("editor").focus();
+												return false;
+											}},
+
+						   'insert_img'	: { "modal": true,
+						   					"modalId": "InsertImage_" + $(this).attr("id"), 
+											"icon":"fa fa-picture-o", 
+											"tooltip": "Insert Image", 
+											"modalHeader": "Insert Image",
+											"modalBody": methods.imageWidget.apply(this),
+											"beforeLoad":function(){
+												editorObj = this;
+												var _idSuffix = editorObj.attr("id");
+												$('#imageURL_' + _idSuffix).val("");
+												$("#uploadImageBar_" + _idSuffix + " :input").val("");
+												$('#imageList_' + _idSuffix).data('current',"");																																				
+											},
+											"onSave": function(){
+												var _idSuffix = "_" + editorObj.attr("id");
+												methods.restoreSelection.apply(this);												
+												if($('#imageList' + _idSuffix).data('current')){
+													if(navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Windows NT.*Trident\//)){
+														var imageStr = '<img src="'+$('#imageList' + _idSuffix).data('current')+'"/>'
+														methods.restoreSelection.apply(this,[imageStr,'html'])
+													}
+													else{
+														document.execCommand('insertimage', false, $('#imageList' + _idSuffix).data('current'));
+													}
+												}
+												else{
+													methods.showMessage.apply(this,["imgErrMsg" + _idSuffix,"Please select an image"]);
+													return false;
+												}
+												$("#InsertImage" + _idSuffix).modal("hide");
+												$(this).data("editor").focus();
+											}},
+
+						'insert_table'	: { "modal": true,
+					   						"modalId": "InsertTable_" + $(this).attr("id"), 
+											"icon":"fa fa-table", 
+											"tooltip": "Insert Table", 
+											"modalHeader": "Insert Table",
+											"modalBody":methods.tableWidget.apply(this),
+											"beforeLoad":function(){
+												editorObj = this;
+												$('#tblForm_' + editorObj.attr("id")).each (function(){ this.reset(); });																																	
+											},
+											"onSave": function(){
+												_idSuffix = "_" + editorObj.attr("id");
+												methods.restoreSelection.apply(this);
+												var tblRows        = $('#tblRows' + _idSuffix).val();
+												var tblColumns     = $('#tblColumns' + _idSuffix).val();
+												var tblWidth       = $('#tblWidth' + _idSuffix).val();
+												var tblHeight      = $('#tblHeight' + _idSuffix).val();
+												var tblAlign       = $('#tblAlign'  + _idSuffix).val();
+												var tblBorder      = $('#tblBorder' + _idSuffix).val();
+												var tblCellspacing = $('#tblCellspacing' + _idSuffix).val();
+												var tblCellpadding = $('#tblCellpadding' + _idSuffix).val();
+												var intReg 		   = /^[0-9]+$/;
+												var cssReg 		   = /^auto$|^[+-]?[0-9]+\.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc)?$/ig;
+												var numReg 		   = /^[0-9]+\.?([0-9])?$/;
+												
+												if(!tblRows.match(intReg)){
+													methods.showMessage.apply(this,["tblErrMsg","Rows must be a positive number"]);
+													return false;
+												}													
+												if(!tblColumns.match(intReg)){
+													methods.showMessage.apply(this,["tblErrMsg","Columns must be a positive number"]);
+													return false;
+												}
+												if(tblWidth!="" && !tblWidth.match(cssReg)){
+													methods.showMessage.apply(this,["tblErrMsg","Please enter positive number with or without a valid CSS measurement unit (px,em,ex,%,in,cm,mm,pt,pc)"]);
+													return false;
+												}
+												if(tblHeight!="" && !tblHeight.match(cssReg)){
+													methods.showMessage.apply(this,["tblErrMsg","Please enter positive number with or without a valid CSS measurement unit (px,em,ex,%,in,cm,mm,pt,pc)"]);
+													return false;
+												}
+												if(tblBorder!="" && !tblBorder.match(numReg)){
+													methods.showMessage.apply(this,["tblErrMsg","Border size must be a positive number"]);
+													return false;
+												}
+												if(tblCellspacing!="" && !tblCellspacing.match(numReg)){
+													methods.showMessage.apply(this,["tblErrMsg","Cell spacing must be a positive number"]);
+													return false;
+												}
+												if(tblCellpadding!="" && !tblCellpadding.match(numReg)){
+													methods.showMessage.apply(this,["tblErrMsg","Cell padding must be a positive number"]);
+													return false;
+												}
+
+												var htmlTableCntr = $('<div/>');
+												var tblAttributes = [	
+																		{attribute:"align",value:tblAlign},
+																		{attribute:"border",value:tblBorder},
+																		{attribute:"cellspacing",value:tblCellspacing},
+																		{attribute:"cellpadding",value:tblCellpadding},
+																		{attribute:"width",value:tblWidth},
+																		{attribute:"height",value:tblHeight},
+																	];
+												var htmlTable     = methods.getHTMLTable.apply(this, [tblRows, tblColumns, tblAttributes]);
+												htmlTable.appendTo(htmlTableCntr);
+												if(navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Windows NT.*Trident\//))
+												methods.restoreSelection.apply(this,[htmlTableCntr.html(),'html']);
+												else
+												document.execCommand('insertHTML', false, htmlTableCntr.html());
+												$("#InsertTable" + _idSuffix).modal("hide");
+												$(this).data("editor").focus();
+											}},
+
+						   'hr_line'	: { "text": "HR", 
+											"icon":"fa fa-minus", 
+											"tooltip": "Horizontal Rule", 
+											"commandname":"insertHorizontalRule", 
+											"custom":null },
+
+						   'block_quote': { "text": "Block Quote", 
+											"icon":"fa fa-quote-right", 
+											"tooltip": "Block Quote", 
+											"commandname":null, 
+											"custom":function(){ 
+												methods.setStyleWithCSS.apply(this);
+												if(navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Windows NT.*Trident\//)){													 
+													document.execCommand('indent', false, null); 	
+												}
+												else{
+													document.execCommand('formatBlock', false, '<blockquote>');
+												}
+											}},						   
+
+						   'indent'		: { "text": "Indent", 
+											"icon":"fa fa-indent", 
+											"tooltip": "Increase Indent", 
+											"commandname":"indent", 
+											"custom":null },
+
+						   'outdent'	: { "text": "Outdent", 
+											"icon":"fa fa-outdent", 
+											"tooltip": "Decrease Indent", 
+											"commandname":"outdent", 
+											"custom":null },
+
+							'print'		: { "text": "Print", 
+											"icon":"fa fa-print", 
+											"tooltip": "Print", 
+											"commandname":null, 
+											"custom":function(){
+											oDoc = $(this).data("editor");
+											var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+											oPrntWin.document.open();
+											oPrntWin.document.write("<!doctype html><html><head><title>Print</title></head><body onload=\"print();\">" + oDoc.html() + "</body></html>");
+											oPrntWin.document.close();
+											}},
+
+							'rm_format'	: { "text": "Remove format", 
+											"icon":"fa fa-eraser", 
+											"tooltip": "Remove Formatting", 
+											"commandname":"removeformat", 
+											"custom":null },
+
+							'select_all': { "text": "Select all", 
+											"icon":"fa fa-file-text", 
+											"tooltip": "Select All", 
+											"commandname":null, 
+											"custom":function(){ 
+												document.execCommand("selectall", null, null);												    
+											}},
+
+							'togglescreen':{ "text": "Toggle Screen",
+											 "icon": "fa fa-arrows-alt",
+											 "tooltip": "Toggle Screen",
+											 "commandname":null,
+											 "custom":function(button, parameters){
+												$(this).data("editor").parent().toggleClass('fullscreen');
+												var statusdBarHeight=0;
+												if($(this).data("statusBar").length)
+												{
+													statusdBarHeight = $(this).data("statusBar").height();
+												}
+												if($(this).data("editor").parent().hasClass('fullscreen'))
+													$(this).data("editor").css({"height":$(this).data("editor").parent().height()-($(this).data("menuBar").height()+statusdBarHeight)-13});
+						                        else
+													$(this).data("editor").css({"height":""});
+						                    }},
+
+							'splchars'	: { "text": "S", 
+											"icon": "fa fa-asterisk", 
+											"tooltip": "Insert Special Character", 
+											"commandname":null, 
+											"custom":function(button){
+													methods.restoreIESelection.apply(this);
+													var flag =0;
+													var splCharDiv = $('<div/>',{id:"specialchar", class:"specialCntr", css :{"display":"none"}}).click(function(event) { event.stopPropagation();});
+													var splCharUi  = $('<ul />',{id:"special_ui"});
+													var editor_Content = this; 
+													if($(this).data("editor").data("splcharsBtn")){
+														flag = 1;
+														$(this).data("editor").data("splcharsBtn", null);
+													}
+													else
+														$(this).data("editor").data("splcharsBtn", 1);
+
+													if(flag==0){
+														for (var i = 0; i < specialchars.length; i++){															
+															splCharUi.append($('<li />').html(specialchars[i].text).attr('title',specialchars[i].name).mousedown(function(event){ event.preventDefault();}).click(function(event){
+																if(navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Windows NT.*Trident\//)){
+																	var specCharHtml = $(this).html();
+																	methods.insertTextAtSelection.apply(this,[specCharHtml,'html']);
+																}
+																else{
+																	document.execCommand('insertHTML',false,$(this).html());
+																}
+																$('#specialchar').remove();
+																$(editor_Content).data("editor").data("splcharsBtn", null);
+															}));
+														}														
+														splCharUi.prependTo(splCharDiv);
+														splCharDiv.insertAfter(button)
+														$('#specialchar').slideDown('slow');
+													}
+													else
+														$('#specialchar').remove();
+											}},
+
+							'source'	: { "text": "Source", 
+											"icon":"fa fa-code", 
+											"tooltip": "Source", 
+											"commandname":null, 
+											"custom":function(button, params){ methods.getSource.apply(this, [button, params]) } },
+											"params": {"obj":null},
+										   };
+
+			var menuGroups = {'texteffects' : ['bold', 'italics', 'underline', 'color'],
+							  'aligneffects': ['l_align','c_align', 'r_align', 'justify'],
+							  'textformats': ['indent', 'outdent', 'block_quote', 'ol', 'ul'],
+							  'fonteffects' : ['fonts', 'styles', 'font_size'],
+							  'actions' : ['undo', 'redo'],
+							  'insertoptions' : ['insert_link', 'unlink', 'insert_img', 'insert_table'],
+							  'extraeffects' : ['strikeout', 'hr_line', 'splchars'],
+							  'advancedoptions' : ['print', 'rm_format', 'select_all', 'source'],
+							  'screeneffects' : ['togglescreen']
+							};
+
+			var settings = $.extend({				
+				'texteffects':true,
+				'aligneffects':true,
+				'textformats':true,
+				'fonteffects':true,
+				'actions' : true,
+				'insertoptions' : true,
+				'extraeffects' : true,
+				'advancedoptions' : true,
+				'screeneffects':true,
+				'bold': true,
+				'italics': true,
+				'underline':true,
+				'ol':true,
+				'ul':true,
+				'undo':true,
+				'redo':true,
+				'l_align':true,
+				'r_align':true,
+				'c_align':true,
+				'justify':true,
+				'insert_link':true,
+				'unlink':true,
+				'insert_img':true,
+				'hr_line':true,
+				'block_quote':true,
+				'source':true,
+				'strikeout':true,
+				'indent':true,
+				'outdent':true,
+				'fonts':fonts,
+				'styles':styles,
+				'print':true,
+				'rm_format':true,
+				'status_bar':true,
+				'font_size':fontsizes,
+				'color':colors,
+				'splchars':specialchars,
+				'insert_table':true,
+				'select_all':true,
+				'togglescreen':true
+			},options);
+
+	       	var containerDiv = $("<div/>",{ class : "row-fluid Editor-container" });
+			var $this = $(this).hide();	       	
+	       	$this.after(containerDiv); 
+	       	var menuBar = $( "<div/>",{ id : "menuBarDiv_" + $(this).attr("id"),
+								  		class : "row-fluid line-control-menu-bar"
+							}).prependTo(containerDiv);
+	       	var editor  = $( "<div/>",{	class : "Editor-editor",
+										css : {overflow: "auto"},
+										contenteditable:"true"
+						 	}).appendTo(containerDiv);
+			var statusBar = $("<div/>", {	id : "statusbar_" + $(this).attr("id"),
+											class: "row-fluid line-control-status-bar",
+											unselectable:"on",
+							}).appendTo(containerDiv);
+	       	$(this).data("menuBar", menuBar);
+	       	$(this).data("editor", editor);
+	       	$(this).data("statusBar", statusBar);
+	       	var editor_Content = this;
+	       	if(settings['status_bar']){
+				editor.keyup(function(event){
+					var wordCount = methods.getWordCount.apply(editor_Content);
+					var charCount = methods.getCharCount.apply(editor_Content);
+					$(editor_Content).data("statusBar").html('<div class="label">'+'Words : '+wordCount+'</div>');
+					$(editor_Content).data("statusBar").append('<div class="label">'+'Characters : '+charCount+'</div>');
+            	});
+	        }	        
+	       	
+	       	
+	       	for(var item in menuItems){
+	       		if(!settings[item] ){ //if the display is not set to true for the button in the settings.	       		
+	       			if(settings[item] in menuGroups){
+	       				for(var each in menuGroups[item]){
+	       					settings[each] = false;
+	       				}
+	       			}
+	       			continue;
+	       		}
+	       		if(item in menuGroups){
+	       			var group = $("<div/>",{class:"btn-group"});	       			
+	       			for(var index=0;index<menuGroups[item].length;index++){
+	       				var value = menuGroups[item][index];	       				
+	       				if(settings[value]){
+       						var menuItem = methods.createMenuItem.apply(this,[menuItems[value], settings[value], true]);
+       						group.append(menuItem);
+       					}
+       					settings[value] = false;
+	       			}
+	       			menuBar.append(group);	       				       			
+	       		}
+	       		else{
+	       			var menuItem = methods.createMenuItem.apply(this,[menuItems[item], settings[item],true]);
+	       			menuBar.append(menuItem);
+	       		}	       		
+	       	}
+
+	       	//For contextmenu	       	
+		    $(document.body).mousedown(function(event) {
+		        var target = $(event.target);
+		        if (!target.parents().andSelf().is('#context-menu')) { // Clicked outside
+		            $('#context-menu').remove();
+		        } 
+		        if (!target.parents().andSelf().is('#specialchar') && (target.closest('a').html()!='<i class="fa fa-asterisk"></i>')) { //Clicked outside
+		        	if($("#specialchar").is(':visible'))
+		            {
+						$(editor_Content).data("editor").data("splcharsBtn", null);
+						$('#specialchar').remove();
+		           	}
+		        }
+		        if (!target.parents().andSelf().is('#paletteCntr') && (target.closest('a').html()!='<i class="fa fa-font"></i>')) { //Clicked outside
+		        	if($("#paletteCntr").is(':visible'))
+		            {
+						$(editor_Content).data("editor").data("colorBtn", null);
+						$('#paletteCntr').remove();
+		           	}
+		        }
+		    });
+		    editor.bind("contextmenu", function(e){
+	       		if($('#context-menu').length)
+	       			$('#context-menu').remove();
+	       		var cMenu 	= $('<div/>',{id:"context-menu"
+	       						}).css({position:"absolute", top:e.pageY, left: e.pageX, "z-index":9999
+	       						}).click(function(event){
+								    event.stopPropagation();
+								});
+	       		var cMenuUl = $('<ul/>',{ class:"dropdown-menu on","role":"menu"});
+	       		e.preventDefault();
+	       		if($(e.target).is('a')){
+				methods.createOpenLinkContext.apply(this,[e,cMenuUl]);
+	       			methods.createLinkContext.apply(this,[e,cMenuUl]);
+	       			cMenuUl.appendTo(cMenu);
+	       		    cMenu.appendTo('body');
+	       		}
+	       		else if($(e.target).is('td') || $(e.target).is("th")){
+	       			methods.createTableContext.apply(this,[e,cMenuUl]);
+	       			cMenuUl.appendTo(cMenu);
+	       		    cMenu.appendTo('body');
+	       		}
+	       		else if($(e.target).is('img')){
+	       				       			
+	       			methods.createImageContext.apply(this,[e,cMenuUl]);
+	       			cMenuUl.appendTo(cMenu);
+	       			cMenu.appendTo('body');
+	       		}
+	       	});
+		},
+		createLinkContext: function(event,cMenuUl){
+			var cMenuli = $('<li/>').append($('<a/>',{
+				id:"rem_link",
+				"href":"javascript:void(0)",
+				"text":"RemoveLink"
+			}).click(function(e){
+				return function(){
+				$(e.target).contents().unwrap();
+				$('#context-menu').remove();
+			}}(event)));
+			cMenuli.appendTo(cMenuUl);
+
+		},
+		createOpenLinkContext: function(event,cMenuUl){
+			var cMenulia = $('<li/>').append($('<a/>',{
+				id:"open_link",
+				"text":"OpenLink"
+			}).click(function(e){
+				return function(){
+				window.open(e.target.getAttribute('href'), '_blank');				
+			}}(event)));
+			cMenulia.appendTo(cMenuUl);
+		},
+		createImageContext: function(event,cMenuUl){
+			var cModalId="imgAttribute";
+			var cModalHeader="Image Attributes";
+			var imgModalBody=methods.imageAttributeWidget.apply(this,["edit"]);
+			var onSave = function(){
+				var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
+				var imageAlt = $('#imgAlt').val();
+				var imageTarget = $('#imgTarget').val();
+				if(imageAlt==""){
+					methods.showMessage.apply(this,["imageErrMsg","Please enter image alternative text"]);
+					return false;
+				}
+				if(imageTarget!=""&& !imageTarget.match(urlPattern)){
+					methods.showMessage.apply(this,["imageErrMsg","Please enter valid url"]);
+					return false;
+				}
+				if($("#imgHidden").val()!=""){
+                        var imgId = $("#imgHidden").val();
+	       				$("#"+imgId).attr('alt',imageAlt);
+	       				if(imageTarget!="")
+	       				{
+	       				 if($("#wrap_"+imgId).length)
+	       				 $("#wrap_"+imgId).attr("href",imageTarget);	
+	       				 else
+					     $("#"+imgId).wrap($('<a/>',{ id:"wrap_"+imgId,href:imageTarget,target:"_blank"}));
+					    }
+					    else
+					    {
+					    	if($("#wrap_"+imgId).length)
+					    	$("#"+imgId).unwrap();
+					    }
+	       		}	       		
+				$("#imgAttribute").modal("hide");
+				editorObj.data("editor").focus();
+			};
+			methods.createModal.apply(this,[cModalId,cModalHeader, imgModalBody, onSave]);
+			var modalTrigger = $('<a/>',{	href:"#"+cModalId,
+       										"text":"Image Attributes",
+											"data-toggle":"modal"
+			}).click( function(e){ 
+				return function(){	
+			        $('#context-menu').remove();
+			        var stamp   = (new Date).getTime();			        
+			        $('#imgAlt').val($(e.target).closest("img").attr("alt"));
+			        $('#imgTarget').val('');
+
+			        if(typeof $(e.target).closest("img").attr("id")!=="undefined"){	
+			            var identifier = $(e.target).closest("img").attr("id");		        	
+			        	$('#imgHidden').val(identifier);
+			        	if($('#wrap_'+identifier).length)
+			        		$('#imgTarget').val($('#wrap_'+identifier).attr("href"));
+			        	else
+			        	 	$('#imgTarget').val('');	
+			        }
+			    	else{			    		
+			    		$(e.target).closest("img").attr("id","img_"+stamp)
+			    		$('#imgHidden').val("img_"+stamp);
+			    	}
+					
+			}}(event));
+			cMenuUl.append($('<li/>').append(modalTrigger))
+					.append($('<li/>').append($('<a/>',{text:"Remove Image"}).click( 
+						function(e) { return function(){ 
+								$('#context-menu').remove();
+								$(e.target).closest("img").remove(); 
+						}}(event))));
+		},
+
+		createTableContext: function(event,cMenuUl){
+			var _idSuffix = "_" + editorObj.attr("id") + "_Edt";
+			var modalId="editProperties_" + editorObj.attr("id");
+			$("#" + modalId).remove();
+       		var modalHeader="Table Properties";
+       		var tblModalBody= methods.tableWidget.apply(this,["edit"]);
+       		var onSave = function(){ 
+       			var tblWidthEdt			= $('#tblWidth' + _idSuffix).val();
+       			var tblHeightEdt		= $('#tblHeight' + _idSuffix).val();
+       			var tblBorderEdt		= $('#tblBorder' + _idSuffix).val();
+       			var tblAlignEdt	        = $('#tblAlign' + _idSuffix).val();
+       			var tblCellspacingEdt	= $('#tblCellspacing' + _idSuffix).val();
+       			var tblCellpaddingEdt	= $('#tblCellpadding' + _idSuffix).val();
+				var tblEdtCssReg 		= /^auto$|^[+-]?[0-9]+\.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc)?$/ig;
+				var tblEdtNumReg 		= /^[0-9]+\.?([0-9])?$/;
+				if(tblWidthEdt!="" && !tblWidthEdt.match(tblEdtCssReg)){
+					methods.showMessage.apply(this,["tblErrMsgEdt","Please enter positive number with or without a valid CSS measurement unit (px,em,ex,%,in,cm,mm,pt,pc)"]);
+					return false;
+				}
+				if(tblHeightEdt!="" && !tblHeightEdt.match(tblEdtCssReg)){
+					methods.showMessage.apply(this,["tblErrMsgEdt","Please enter positive number with or without a valid CSS measurement unit (px,em,ex,%,in,cm,mm,pt,pc)"]);
+					return false;
+				}
+				if(tblBorderEdt!="" && !tblBorderEdt.match(tblEdtNumReg)){
+					methods.showMessage.apply(this,["tblErrMsgEdt","Border size must be a positive number"]);
+					return false;
+				}
+				if(tblCellspacingEdt!="" && !tblCellspacingEdt.match(tblEdtNumReg)){
+					methods.showMessage.apply(this,["tblErrMsgEdt","Cell spacing must be a positive number"]);
+					return false;
+				}
+				if(tblCellpaddingEdt!="" && !tblCellpaddingEdt.match(tblEdtNumReg)){
+					methods.showMessage.apply(this,["tblErrMsgEdt","Cell padding must be a positive number"]);
+					return false;
+				}
+				$(event.target).closest('table').css('width',tblWidthEdt);
+				if(tblHeightEdt!="")
+				$(event.target).closest('table').css('height',tblHeightEdt);
+			    $(event.target).closest('table').attr('align',tblAlignEdt);
+			    $(event.target).closest('table').attr('border',tblBorderEdt);
+			    $(event.target).closest('table').attr('cellspacing',tblCellspacingEdt);
+			    $(event.target).closest('table').attr('cellpadding',tblCellpaddingEdt);
+			    $("#" + modalId).modal("hide");
+				editorObj.data("editor").focus();
+       		};
+       		methods.createModal.apply(this,[modalId,modalHeader, tblModalBody, onSave]);
+       		var modalTrigger = $('<a/>',{	href:"#"+modalId,
+       										"text":"Table Properties",
+											"data-toggle":"modal"
+			}).click( function(e){ return function(){
+					var _idSuffix = "_" + editorObj.attr("id") + "_Edt";
+			        $('#context-menu').remove();			
+					$('#tblRows' + _idSuffix).val($(e.target).closest('table').prop('rows').length);			
+				    $('#tblColumns' + _idSuffix).val($(e.target).closest('table').find('tr')[0].cells.length);
+				    $('#tblRows' + _idSuffix).attr('disabled','disabled');   
+				    $('#tblColumns' + _idSuffix).attr('disabled','disabled');
+				    $('#tblWidth' + _idSuffix).val($(e.target).closest('table').get(0).style.width);
+				    $('#tblHeight' + _idSuffix).val($(e.target).closest('table').get(0).style.height);
+				    $('#tblAlign' + _idSuffix).val($(e.target).closest('table').attr("align"));
+				    $('#tblBorder' + _idSuffix).val($(e.target).closest('table').attr("border"));
+				    $('#tblCellspacing' + _idSuffix).val($(e.target).closest('table').attr("cellspacing"));
+				    $('#tblCellpadding' + _idSuffix).val($(e.target).closest('table').attr("cellpadding"));
+
+				    
+			}}(event));
+       		
+			cMenuUl.append($('<li/>',{class:"dropdown-submenu",css:{display:"block"}})
+       						.append($('<a/>',{"tabindex":"-1", href:"javascript:void(0)","text":"Row"}))
+       						.append($('<ul/>',{class:"dropdown-menu"})
+       								.append($('<li/>').append($('<a/>',{
+											id:"tbl_addrow",
+											"href":"javascript:void(0)",
+											"text":"Add Row"
+											}).click(function(e){
+												return function(){
+													$("#context-menu").remove();
+													var selectedRow = $(e.target).closest("tr");
+													var newRow = $("<tr/>");
+													selectedRow.children().each(function() {
+														var newColumn = $("<" + $(this).prop("nodeName") + "/>").html("&nbsp;");
+														newRow.append(newColumn);
+													});
+													selectedRow.after(newRow);
+												}
+											}(event))))
+       								.append($('<li/>').append($('<a/>',{text:"Remove Row"}).click( 
+											function(e) { return function(){ 
+													$('#context-menu').remove();
+													$(e.target).closest("tr").remove(); 
+											}}(event))))
+       			)).append($('<li/>',{class:"dropdown-submenu",css:{display:"block"}})
+   						.append($('<a/>',{"tabindex":"-1", href:"javascript:void(0)","text":"Column"}))
+   						.append($('<ul/>',{class:"dropdown-menu"})
+   								.append($('<li/>').append($('<a/>',{
+										id:"tbl_addcolumn",
+										"href":"javascript:void(0)",
+										"text":"Add Column",
+										}).click(function(e){
+											return function(){
+												$('#context-menu').remove();
+												var selectedCell = $(e.target);
+												var columnIndex = selectedCell.siblings().addBack().index(selectedCell);
+												selectedCell.closest("table").find("tr").each(function() {
+													var cellInSelectedColumn = $(this).children(":eq(" + columnIndex + ")");
+													var newCell = $("<" + cellInSelectedColumn.prop("nodeName") + "/>").html("&nbsp;");
+													cellInSelectedColumn.after(newCell);
+												});
+											}
+										}(event))))
+   								.append($('<li/>').append($('<a/>',{text:"Remove Column"}).click( 
+										function(e) { return function(){ 
+												$('#context-menu').remove();
+												var selectedCell = $(e.target);
+												var columnIndex = selectedCell.siblings().addBack().index(selectedCell);
+												selectedCell.closest("table").find("tr").each(function() {
+													$(this).children(":eq(" + columnIndex + ")").remove();
+												});
+										}}(event))))
+   						));
+			cMenuUl.append($('<li/>').append(modalTrigger))
+					.append($('<li/>',{class:"divider"}))
+					.append($('<li/>').append($('<a/>',{text:"Remove Table"}).click( 
+						function(e){ return function(){ 
+								$('#context-menu').remove();
+								$(e.target).closest("table").remove(); 
+						}}(event))));
+
+		},
+
+		createModal: function(modalId, modalHeader, modalBody, onSave){
+			//Create a Modal for the button.		
+			var modalTrigger = $('<a/>',{	href:"#"+modalId,
+											role:"button",
+											class:"btn btn-default",
+											"data-toggle":"modal"
+			});
+			var modalElement = $('<div/>',{ id: modalId,
+								           class: "modal fade",
+								              tabindex: "-1",
+								              role: "dialog",
+								              "aria-labelledby":"h3_"+modalId,
+								              "aria-hidden":"true"
+								          }).append($('<div>',{
+								            	class:"modal-dialog"
+								         		}).append($('<div>',{
+							            			class:"modal-content"
+									         		}).append($('<div>',{
+									           			class:"modal-header"
+									           			}).append($('<button/>',{
+										                	type:"button",
+										                	class:"close",
+										                	"data-dismiss":"modal",
+										                	"aria-hidden":"true"
+										               		}).html('x')
+									            		).append($('<h3/>',{
+									                		id:"h3_"+modalId
+									           				}).html(modalHeader))
+									         		).append($('<div>',{
+									           			class:"modal-body"
+									           			}).append(modalBody)
+									          		).append($('<div>',{
+									            		class:"modal-footer"
+									         			}).append($('<button/>',{
+									                		type:"button",
+									                		class:"btn btn-default",
+									                		"data-dismiss":"modal",
+									                		"aria-hidden":"true"
+									               			}).html('Cancel')
+								           	  			).append($('<button/>',{
+								                			type:"button",
+								                			class:"btn btn-success",
+								               				}).html('Done').mousedown(function(e){
+								                			e.preventDefault();
+								               				}).click(function(obj){return function(){onSave.apply(obj)}}(this)))
+	         								  		)
+       											)	
+       									);	
+			modalElement.appendTo("body");
+			return modalTrigger;
+		},
+
+		createMenuItem: function(itemSettings, options, returnElement){
+			//Function to perform multiple actions.supplied arguments: itemsettings-list of buttons and button options, options: options for select input, returnelement: boolean.
+			//1.Create Select Options using Bootstrap Dropdown.
+			//2.Create modal dialog using bootstrap options
+			//3.Create menubar buttons binded with corresponding event actions
+			typeof returnElement !== 'undefined' ? returnElement : false;
+
+			if(itemSettings["select"]){
+				var menuWrapElement = $("<div/>", {class:"btn-group"});
+				var menuElement 	= $("<ul/>", {class:"dropdown-menu"});
+				menuWrapElement.append($('<a/>',{
+										class:"btn btn-default dropdown-toggle",
+										"data-toggle":"dropdown",
+										"href":"javascript:void(0)",
+										"title":itemSettings["tooltip"]
+										}).html(itemSettings["default"]).append($("<span/>",{class:"caret"})).mousedown(function(e){
+											e.preventDefault();
+										}));
+				$.each(options,function(i,v){
+					var option = $('<li/>')
+		            $("<a/>",{
+		              tabindex : "-1",
+		              href : "javascript:void(0)"
+		            }).html(i).appendTo(option);
+
+		            option.click(function(){
+		            	$(this).parent().parent().data("value", v);
+		            	$(this).parent().parent().trigger("change")
+		            });
+		            menuElement.append(option);		            
+		        });
+				var action = "change";
+		    }
+		    else if(itemSettings["modal"]){
+		    	var menuWrapElement = methods.createModal.apply(this,[itemSettings["modalId"], itemSettings["modalHeader"], itemSettings["modalBody"], itemSettings["onSave"]]);		    			    	
+		    	var menuElement = $("<i/>");
+		    	if(itemSettings["icon"])
+					menuElement.addClass(itemSettings["icon"]);
+				else
+					menuElement.html(itemSettings["text"]);
+				menuWrapElement.append(menuElement);
+				menuWrapElement.mousedown(function(obj, methods, beforeLoad){
+					return function(e){
+						e.preventDefault();
+						methods.saveSelection.apply(obj);
+						if(beforeLoad){		    	    
+							beforeLoad.apply(obj); 					
+				    	}
+					}
+				}(this, methods,itemSettings["beforeLoad"]));
+				menuWrapElement.attr('title', itemSettings['tooltip']);
+				return menuWrapElement;
+		    }
+			else{
+				var menuWrapElement = $("<a/>",{href:'javascript:void(0)', class:'btn btn-default'});
+				var menuElement = $("<i/>");
+				if(itemSettings["icon"])
+					menuElement.addClass(itemSettings["icon"]);
+				else
+					menuElement.html(itemSettings["text"]);
+				var action = "click";
+			}
+			if(itemSettings["custom"]){
+				menuWrapElement.bind(action, (function(obj, params){
+						return function(){
+						methods.saveSelection.apply(obj);
+						itemSettings["custom"].apply(obj, [$(this), params]);
+						}
+					})(this, itemSettings['params']));
+			}
+			else{
+				menuWrapElement.data("commandName", itemSettings["commandname"]);
+				menuWrapElement.data("editor", $(this).data("editor"));
+				menuWrapElement.bind(action, function(){ methods.setTextFormat.apply(this) });
+			}
+			menuWrapElement.attr('title', itemSettings['tooltip']);
+			menuWrapElement.css('cursor', 'pointer');
+			menuWrapElement.append(menuElement);
+			if(returnElement)
+				return menuWrapElement;
+			$(this).data("menuBar").append(menuWrapElement);
+		},
+
+		setTextFormat: function(){			
+			//Function to run the text formatting options using execCommand.
+			methods.setStyleWithCSS.apply(this);
+			document.execCommand($(this).data("commandName"), false, $(this).data("value") || null);
+			$(this).data("editor").focus();
+			return false;
+		},
+
+		getSource: function(button, params){
+			//Function to show the html source code to the editor and toggle the text display.
+			var flag = 0;
+			if(button.data('state')){
+				flag = 1;
+				button.data('state', null);
+			}
+			else
+				button.data('state', 1);
+			$(this).data("source-mode", !flag);
+			var editor = $(this).data('editor');
+			var content;
+			if(flag==0){ //Convert text to HTML			
+				content = document.createTextNode(editor.html());
+				editor.empty();
+				editor.attr('contenteditable', false);
+				preElement = $("<pre/>",{
+					contenteditable: true					
+					});
+				preElement.append(content);				
+				editor.append(preElement);
+				button.parent().siblings().hide();
+				button.siblings().hide();
+			}
+			else{
+				var html = editor.children().first().text();
+				editor.html(html);
+				editor.attr('contenteditable', true);
+				button.parent().siblings().show();
+				button.siblings().show();
+			}
+		},
+
+		countWords: function(node){
+			//Function to count the number of words recursively as the text grows in the editor.
+			var count = 0;	
+    		var textNodes = node.contents().filter(function() { 
+				return (this.nodeType == 3); 
+			});			
+			for(var index=0;index<textNodes.length;index++){
+				text = textNodes[index].textContent;
+				text = text.replace(/[^-\w\s]/gi, ' ');
+				text = $.trim(text);
+				count = count + text.split(/\s+/).length;
+			}
+			var childNodes = node.children().each(function(){
+				count = count + methods.countWords.apply(this, [$(this)]);
+			});
+			return count
+		},
+
+		countChars: function(node){
+			//Function to count the number of characters recursively as the text grows in the editor.
+			var count = 0;
+    		var textNodes = node.contents().filter(function() { 
+				return (this.nodeType == 3); 
+			});
+			for(var index=0;index<textNodes.length;index++){
+				text = textNodes[index].textContent;
+				count = count + text.length;
+			}
+			var childNodes = node.children().each(function(){
+				count = count + methods.countChars.apply(this, [$(this)]);
+			});
+			return count;
+		},
+
+		getWordCount: function(){
+			//Function to return the word count of the text in the editor
+			return methods.countWords.apply(this, [$(this).data("editor")]);
+		},
+
+		getCharCount: function(){
+			//Function to return the character count of the text in the editor
+			return methods.countChars.apply(this, [$(this).data("editor")]);
+		},
+
+		rgbToHex: function(rgb){
+			//Function to convert the rgb color codes into hexadecimal code
+			rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+			return "#" +
+			("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+			("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
+			("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
+		},
+
+		showMessage: function(target,message){
+			//Function to show the error message. Supplied arguments:target-div id, message-message text to be displayed.
+			var errorDiv=$('<div/>',{ class:"alert alert-danger"	}
+				).append($('<button/>',{
+									type:"button",
+									class:"close",
+									"data-dismiss":"alert",
+									html:"x"
+				})).append($('<span/>').html(message));
+			errorDiv.appendTo($('#'+target));
+			setTimeout(function() { $('.alert').alert('close'); }, 3000);								
+		},
+		
+		getText: function(){
+			//Function to get the source code.
+			if(!$(this).data("source-mode"))
+				return $(this).data("editor").html();
+			else
+				return $(this).data("editor").children().first().text();
+		},
+
+		setText: function(text){
+			//Function to set the source code
+			if(!$(this).data("source-mode"))
+				$(this).data("editor").html(text);
+			else
+				$(this).data("editor").children().first().text(text);
+		},
+
+		setStyleWithCSS:function(){
+			if(navigator.userAgent.match(/MSIE/i)){	//for IE10
+				try {
+                	Editor.execCommand("styleWithCSS", 0, false);
+            	} catch (e) {
+	                try {
+	                    Editor.execCommand("useCSS", 0, true);
+	                } catch (e) {
+	                    try {
+	                        Editor.execCommand('styleWithCSS', false, false);
+	                    }
+	                    catch (e) {
+	                    }
+	                }
+            	}
+			}
+			else{
+				document.execCommand("styleWithCSS", null, true);
+			}
+		},				
+
+	}
+
+	$.fn.Editor = function( method ){
+
+		if ( methods[method] ) {
+			return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
+		} else if ( typeof method === 'object' || ! method ) {
+			return methods.init.apply( this, arguments );
+		} else {
+			$.error( 'Method ' +  method + ' does not exist on jQuery.Editor' );
+		}    
+	}; 
+})( jQuery );

backstage/static/js/old/editor.js

@@ -0,0 +1,299 @@
+const contentDiv = document.getElementById('editor_block');
+const titleButton = document.getElementById('title_button');
+const submitButton = document.getElementById('submit_button');
+contentApiUrl = `${PORTAL_SERVER}contents?url=${(JSON.parse(document.getElementById('url').textContent)).url}`
+
+aa = "";
+frontMatters = [];
+contentMatters = [];
+editorBlocks = [];
+var editor;
+axios.get(contentApiUrl).then(({ data }) => {
+  const content = data[0]['content'];
+  var blockArray = [{ title: '', data: [] }];
+  var blockCount = 0;
+  blocks = parseMd(content);
+  aa = new MDParser(content);
+  editor_block = document.getElementById('editor_block');
+  //alert(blocks[0]['text']);
+
+  //ul = document.createElement('ul');
+  //ul.id = "sortable";
+  for (i = 0; i < blocks.length; i++) {
+    //li = document.createElement('li');
+    //odiv = document.createElement('div');
+    //odiv.style.border = 'inset 1px gray';
+    if (blocks[i]['type'] == "para") {
+      editorBlocks.push({ type: "paragraph", data: { text: blocks[i]['text'] } });
+      //tmp = document.createElement('textarea');
+      //tmp.style.border = 'outset 5px pink';
+      //tmp.style.width = '100%';
+      //tmp.value = blocks[i]['text'];
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "br") {
+      editorBlocks.push({ type: "paragraph", data: { text: "" } });
+      //tmp = document.createElement('br');
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "img") {
+      ampimg = blocks[i]['text'];
+      //alert(ampimg.indexOf("width=\"",84));
+      //alert(ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5));
+      tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+      //tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.lastIndexOf(".") - ampimg.indexOf("src=\"") -1);
+      //tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf(".webp") - ampimg.indexOf("src=\""));
+      editorBlocks.push({
+        type: "image", data: {
+          file: {
+            url: tmpsrc,
+            width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
+            height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
+          },
+          caption: ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5).toString(),
+          stretched: false,
+          withBorder: true,
+          withBackground: false,
+        }
+      });
+      //alert(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8));
+      //img = document.createElement('img');
+      //img.style.width = '100%';
+      //img.src = tmpsrc;
+      //odiv.appendChild(img);
+    }
+    else if (blocks[i]['type'] == "youtube") {
+      ampimg = blocks[i]['text'];
+      vid = ampimg.substr(ampimg.indexOf("data-videoid=\"") + 14, ampimg.indexOf("\"", ampimg.indexOf("data-videoid=\"") + 14) - ampimg.indexOf("data-videoid=\"") - 14)
+      editorBlocks.push({
+        type: "embed", data: {
+          service: 'youtube',
+          source: 'https://www.youtube.com/watch?' + vid,
+          embed: 'https://www.youtube.com/embed/' + vid,
+          width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
+          height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
+        }
+      });
+    }
+    else if (blocks[i]['type'] == "title") {
+      blocks[i]['text'] = blocks[i]['text'].replace("### **", "").replace("**", "")
+      editorBlocks.push({ type: "header", data: { text: blocks[i]['text'] } });
+      //tmp = document.createElement('h3');
+      //tmp.innerHTML = blocks[i]['text'];
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "hr") {
+      //alert('yo');
+      editorBlocks.push({ type: "paragraph", data: { text: "---" } });
+    }
+    else if (blocks[i]['type'] == "mt5") {
+      //alert('yo');
+      editorBlocks.push({ type: "delimiter", data: {} });
+    }
+    else if (blocks[i]['type'] == "table") {
+      //alert('yo');
+      editorBlocks.push({ type: "table", data: { content: tableTextToArray(blocks[i]['text']) } });
+    }
+    //li.appendChild(odiv);
+    //ul.appendChild(li);
+  }
+  //editor_block.appendChild(ul);
+  //$("#sortable").sortable();
+  //$("#sortable").disableSelection();
+  $("#editor_block").css({ "display": "none" });
+  //alert(JSON.parse(document.getElementById('url').textContent).url);
+  $('#editorjs')[0].innerHTML = "";
+  //alert(JSON.stringify(editorBlocks));
+  editor = new EditorJS({
+    readOnly: false,
+    holder: 'editorjs',
+
+    tools: {
+      header: {
+        class: Header,
+        config: {
+          placeholder: 'Header'
+        }
+      },
+
+      image: {
+        class: ImageTool,
+        config: {
+          endpoints: {
+            byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url, // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url, // Your endpoint that provides uploading by Url
+            /* byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your endpoint that provides uploading by Url */
+            /* byFile: '/backstage/upload/' + $('#ctitle').val(), // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage/' + $('#ctitle').val(), // Your endpoint that provides uploading by Url */
+          }
+        }
+      }
+      ,
+      // warning: {
+      //   class: Warning,
+      //   inlineToolbar: true,
+      //   config: {
+      //     titlePlaceholder: 'Title',
+      //     messagePlaceholder: 'Message',
+      //   },
+      // },
+      table: Table,
+      delimiter: Delimiter,
+      embed: Embed,
+    }
+    ,
+    data: { blocks: editorBlocks }
+    ,
+    onReady: function () {
+      //saveButton.click();
+    },
+    onChange: function (api, block) {
+      //console.log('something changed', block);
+    }
+  });
+
+  /*   for (var blockData of preBlockArray) {
+      blockCount = loadDataToBlock(blockArray, blockCount, blockData);
+    }
+    titleButton.onclick = function () {
+      blockCount = loadDataToBlock(blockArray, blockCount);
+    } */
+});
+
+function editorSave() {
+  editor.save().then((outputData) => {
+    //console.log('Article data: ', outputData);
+    //var mdContent = GetMdHeader();
+    //var mdContent = frontMatters.join('\n');
+    //console.log(mdContent);
+    //console.log(frontMatters.join('\n'));
+    //mdContent = mdContent.replace('draft: ' + (!$('#cdraft').is(':checked')), 'draft: ' + $('#cdraft').val())
+    //alert(mdContent);
+    /*
+    for (var frontMatter of frontMatters) {
+      mdContent += frontMatter + '\n';
+    }
+    
+    //alert($('#cdescription').val());
+    mdContent += '---\n';
+    mdContent += 'title: "' + $('#ctitle').val() + '"\n';
+    mdContent += 'date: ' + $('#cdate').val() + '\n';
+    mdContent += 'draft: ' + $('#cdraft').val() + '\n';
+    mdContent += 'type: "' + $('#ctype').val() + '"\n';
+    mdContent += 'url: "' + $('#curl').val() + '"\n';
+    mdContent += 'image: "' + $('#cimage').val() + '"\n';
+    mdContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+    mdContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
+    mdContent += 'tag: "' + ($('#ctag').val() == 'undefined' ? "" : $('#ctag').val()) + '"\n';
+    mdContent += '---\n\n';
+    */
+
+    var mdContent = '\n';
+    var articleinfo = frontMatters.join('\n');
+    var opening = '\n<div class="container-fluid blog_article p-0">\n';
+    //var chapterlist = '<section><div class="question-box">\n<ul>\n<li data-gt-duration="100" data-gt-offset="0">小寶優居的客變懶人包將幫你解決以下客變問題：</li>\n';
+    var numChapters = 0;
+    var sectionstarted = false;
+
+    for (i = 0; i < outputData.blocks.length; i++) {
+      //alert(block.type);
+      block = outputData.blocks[i];
+      if (block.type == "header") {
+        mdContent += '<h4>' + block.data.text + '</h4>\n';
+      }
+      else if (block.type == "paragraph") {
+        mdContent += '\n' + block.data.text + '\n';
+      }
+      else if (block.type == "hr") {
+        //alert('hr');
+        mdContent += '\n---\n';
+      }
+      else if (block.type == "image") {
+        //console.log(block.data.file.url);
+        //console.log(JSON.parse(document.getElementById('url').textContent).url);
+        iurl = block.data.file.url.split('/');
+        mdContent += '<img class="w-100" src="' + iurl[iurl.length - 2] + '/' + iurl[iurl.length - 1] + ' alt="' + block.data.caption + '"\n >\n</img>\n'
+        if (block.data.caption != '')
+        {
+          mdContent += '<div class="img-text">\n<p>' + block.data.caption + '</p>\n</div>\n';
+        }
+      }
+      else if (block.type == "delimiter") {
+        mdContent += '\n{{% chuz-div class="mt-5" %}}\n';
+      }
+      else if (block.type == "embed") {
+        mdContent += '<iframe'
+          + '\n  data-videoid="' + block.data.embed.replace('https://www.youtube.com/embed/', '')
+          + '"\n  layout="responsive'
+          + '"\n  width="' + block.data.width
+          + '"\n  height="' + block.data.height
+          + '">\n</iframe>\n</div>\n';
+      }
+      else if (block.type == "table") {
+        //alert(tableArrayToHtml(block.data).length);
+        mdContent += '\n' + tableArrayToHtml(block.data.content) + '\n'
+        //console.log(tableArrayToHtml(block.data.content));
+      }
+    }
+    console.log(mdContent);
+
+    postData = {
+      content: mdContent,
+      url: (JSON.parse(document.getElementById('url').textContent)).url
+    };
+    axios.post(contentApiUrl, json = postData).then(({ data }) => {
+      alert('作品資料已儲存');
+    });
+  }).catch((error) => {
+    console.log('Saving failed: ', error)
+  });
+
+  /*   var mdContent = '';
+    for (var frontMatter of frontMatters) {
+      mdContent += frontMatter + '\n';
+    } */
+
+  //alert(bb);
+  /*     for(var eBlock in outputData.blocks)
+      {
+        alert(eBlock.type);
+      } */
+  /* 
+for (var idx = 0; idx < blockArray.length; idx++) {
+ if (_.get(blockArray[idx], 'title', '').includes('敘述')) {
+   mdContent += `\n<!-- ### **${_.get(blockArray[idx], 'title', '')}**-->\n`
+ } else {
+   mdContent += `\n### **${_.get(blockArray[idx], 'title', '')}**\n`
+ }
+ for (var data of _.get(blockArray[idx], 'data', [])) {
+   if (_.get(_.keys(data), 0) === 'description') {
+     if (_.get(data, 'description.text', '').includes('\n')) {
+       for (const line of _.get(data, 'description.text', '').split('\n')) {
+         mdContent += `\n${line}    `;
+       }
+     } else {
+       mdContent += `\n${_.get(data, 'description.text', '')}`;
+     }
+   } else if (_.get(_.keys(data), 0) === 'image') {
+     ampImgForm = `\n<amp-img\
+\n  alt="${_.get(data, 'image.alt', '小寶優居')}"\
+\n  src="${_.get(data, 'image.src', '')}"\
+\n  height="${_.get(data, 'image.height', 300)}"\
+\n  width="${_.get(data, 'image.width', 400)}"\
+\n  layout="${_.get(data, 'image.layout', 'responsive')}">\
+\n</amp-img>\n`;
+     mdContent += ampImgForm;
+   }
+ }
+}
+*/
+  /* const postData = {
+    content: mdContent,
+    url: (JSON.parse(document.getElementById('url').textContent)).url
+  }; */
+
+  //axios.post(contentApiUrl, json = postData);
+
+}
+submitButton.onclick = editorSave

backstage/static/js/old/parsers.js

@@ -0,0 +1,91 @@
+function parseMd(content) {
+  var frontMatters = [];
+  var blockCount;
+  var preDataIndex;
+  var parseBlockDiv;
+  var preImgObject = { 'image': {} };
+  var isNotFrontMatterCount = 0;
+  var isAmpImgRange = false;
+  var result = [];
+
+  for (const line of content.split('\n')) {
+    if (isNotFrontMatterCount < 2) {
+      frontMatters.push(line)
+      if (line.includes('---')) {
+        isNotFrontMatterCount += 1;
+      }
+      continue;
+    }
+
+    if (isAmpImgRange === true && !(line.includes('</img>'))) {
+      imgParamObject = parseAmpImg(line);
+      preImgObject.image = { ...preImgObject.image, ...imgParamObject };
+      continue;
+    }
+
+    if (line.includes('###')) {
+      parseBlockDiv = true;
+      preDataIndex = 0;
+      blockCount = blockCount + 1 | 0;
+      const preBlockindex = blockCount;
+      const title = parseTitle(line);
+      result[preBlockindex] = { title: title };
+
+    } else if (line.includes('img')) {
+      const preBlockindex = blockCount;
+      if (line.includes('</img>')) {
+        addDataToBlockArray(preImgObject, result, preBlockindex, preDataIndex);
+        isAmpImgRange = false;
+        preImgObject = { 'image': {} }
+        preDataIndex += 1;
+        continue;
+      }
+      isAmpImgRange = true;
+    } else {
+      if (parseBlockDiv === undefined) {
+        // for skipping space before first title
+        continue
+      }
+      if (line === '') {
+        // for skipping space
+        continue
+      }
+      const preBlockindex = blockCount;
+      const ownDataIndex = preDataIndex;
+      preDataIndex += 1;
+      //addDataToBlockArray({ description: { text: line } }, result, preBlockindex, ownDataIndex);
+      addDataToBlockArray({ text: line }, result, preBlockindex, ownDataIndex);
+    }
+  }
+  alert(JSON.stringify(result));
+  return { frontMatters: frontMatters, preBlockArray: result }
+}
+
+const parseTitle = line => {
+  var title = '';
+  title = line.replace('### **', '');
+  title = title.replace('**', '');
+  if (title.includes('敘述')) {
+    title = title.replace('<!-- ', '');
+    title = title.replace('-->', '');
+  }
+  return title;
+};
+
+const parseAmpImg = line => {
+  if (line.includes('alt')) {
+    const altParameter = line.replace(/ |alt=|"/g, '');
+    return { alt: altParameter };
+  } else if (line.includes('src')) {
+    const srcParameter = line.replace(/ |src=|"/g, '');
+    return { src: srcParameter };
+  } else if (line.includes('height')) {
+    const heightParameter = line.replace(/ |height=|"/g, '');
+    return { height: heightParameter };
+  } else if (line.includes('width')) {
+    const widthParameter = line.replace(/ |width=|"/g, '');
+    return { width: widthParameter };
+  } else if (line.includes('layout')) {
+    const layoutParameter = line.replace(/ |layout=|"|>/g, '');
+  }
+}

backstage/static/js/old/yo.js

@@ -0,0 +1,783 @@
+contentApiUrl = `${PORTAL_SERVER}contents?url=`;
+frontMatters = [];
+contentMatters = [];
+tagOptionIds = ['thousetype', 'tpinsize', 'tbudget', 'troomscount'];
+
+var SwfType = {};
+if (location.pathname.indexOf('system_furniture') >= 0) {
+    SwfType = {
+        "custom_made_system_cabinet": "客製模組系統櫃",
+        "system_cabinet": "模組系統櫃單品",
+    };
+}
+else {
+    SwfType = {
+        "other_furniture": "其他",
+        "master_bedroom": "臥室",
+        "living_room": "客廳",
+        "study_room": "書房",
+        "dining_room": "餐廳",
+    };
+}
+
+//document.ready
+$(function () {
+
+    $("#dialog-form").hide();
+    if ($('#editorjs').length > 0)
+        editor = new EditorJS({
+            readOnly: false,
+            holder: 'editorjs',
+        });
+    if ($('#editorjs1').length > 0)
+        editor1 = new EditorJS({
+            readOnly: false,
+            holder: 'editorjs1',
+        });
+
+});
+
+function getHeader(url) {
+    axios.get(contentApiUrl + url).then(({ data }) => {
+        frontMatters = [];
+        contentMatters = [];
+        editTarget = url;
+        mdType = url.split('/')[1];
+        aa = data[0]['content'];
+        for (var toi of tagOptionIds) {
+            $('#' + toi).val("");
+        }
+        //const content = _.get(data, '0.content', '');
+        blocks = parseMd(aa);
+        oTitle = $("#ctitle").val();
+        // $("#dialog-form").dialog();
+        if ($("#ctype").val() == "collection") {
+            $("#scat").hide();
+        }
+        else if ($("#ctype").val() == "blog") {
+            $("#sdesc").hide();
+        }
+        else if ($("#ctype").val() == "news") {
+            $("#sdesc").hide();
+            $("#scat").hide();
+            $("#simg").hide();
+        }
+        else {
+            ParseProductSection(contentMatters.join(''));
+        }
+        $("#myModal").modal();
+
+        //console.log(frontMatters);
+        //alert($('#cimage').val());
+    });
+}
+
+function toggleDraft(obj, url) {
+    axios.get(contentApiUrl + url).then(({ data }) => {
+        frontMatters = [];
+        contentMatters = [];
+        aa = data[0]['content'];
+        const content = _.get(data, '0.content', '');
+        blocks = parseMd(aa);
+        editTarget = url;
+        $('#cdraft').removeAttr('checked');
+        $('#cdraft').prop('checked', obj.checked);
+        updateHeader();
+        oTitle = "";
+    });
+}
+
+function updateHeader() {
+    /* if (oTitle != $('#ctitle').val() && $('#ctitle').val() != "" && oTitle != "") {
+      axios.get('/backstage/modTitle/' + oTitle + '/' + $('#ctitle').val()).then(({ data }) => {
+        if (data.success == "0") {
+          alert('已有重複的標題，請重新設定');
+          return;
+        }
+        else {
+          writeMd();
+        }
+      });
+    }
+    else {
+      writeMd();
+    } */
+    $("#uptbtn").attr('disabled', true);
+    writeMd();
+    // location.reload();
+}
+
+function writeMd() {
+
+    axios.get('/backstage/utils?trantext=' + $('#ccategories').val()).then(({ data }) => { $('#ccol1').val(data); })
+        .finally(() => {
+            mdContent = GetMdHeader();
+            mdContent += contentMatters.join("\n");
+            var formData = new FormData();
+            var imagefile = document.querySelector('#cfile');
+            formData.append("image", imagefile.files[0]);
+            axios.post('/backstage/upload/title', formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            }).then(({ data }) => {
+                $('#cfile').val("");
+                if (data.success == "1") {
+                    mdContent = mdContent.replace($('#cimage').val(), '/img/collection/' + data.file.url.substring(data.file.url.lastIndexOf('/') + 1));
+                    //alert(data.file.url.substring(data.file.url.lastIndexOf('/')+1));
+                }
+
+                postData = {
+                    content: mdContent,
+                    url: editTarget
+                };
+                //console.log(mdContent);
+                axios.post(contentApiUrl + editTarget, json = postData).then(({ data }) => {
+                });
+            }).finally(() => {
+                alert('資料已更新'); // test
+                location.reload();
+            });
+
+        });
+}
+
+function parseMd(content) {
+    //var frontMatters = [];
+    var blockCount;
+    var preDataIndex;
+    var parseBlockDiv;
+    var preImgObject = { 'image': {} };
+    var isNotFrontMatterCount = 0;
+    var isAmpImgRange = false;
+    var result = [];
+
+    var rblocks = new Array();
+    lineIdx = 1;
+    foundImg = false;
+    foundYT = false;
+    foundTBL = false;
+    crossLine = "";
+
+    for (var line of content.split('\n')) {
+        lineIdx++;
+        if (isNotFrontMatterCount < 2) {
+            frontMatters.push(line)
+            if (line.includes('title: ')) {
+                $('#ctitle').val(line.replace('title: ', '').replaceAll('\"', ''));
+                //alert($('#ctitle').val());
+            }
+            if (line.includes('date: ')) {
+                //alert(line);
+                $('#cdate').val(line.replace('date: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('draft: ')) {
+                //alert(line);
+                $('#cdraft').val(line.replace('draft: ', '').replaceAll('\"', ''));
+                //console.log($('#cdraft').val());
+                $('#cdraft').removeAttr('checked');
+                if ($('#cdraft').val() == 'false')
+                    $('#cdraft').prop('checked', true);
+                /*
+                if($('#cdraft').val() == 'true') 
+                    $('#cdraft').removeAttr('checked');
+                else
+                    $('#cdraft').attr('checked','true');
+                    */
+            }
+            if (line.includes('type: ')) {
+                //alert(line);
+                $('#ctype').val(line.replace('type: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('url: ')) {
+                //alert(line);
+                $('#curl').val(line.replace('url: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('image: ')) {
+                //alert(line);
+                $('#cimage').val(line.replace('image: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('description: ')) {
+                //alert(line);
+                $('#cdescription').val(line.replace('description: ', '').replaceAll('\"', '').replaceAll('<br>', '\r\n'));
+            }
+            if (line.includes('weight: ')) {
+                //alert(line);
+                $('#cweight').val(line.replace('weight: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('tag: ')) {
+                //alert(line);
+                $('#ctag').val(line.replace('tag: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('tags: ')) {
+                //alert(line);
+                if ($('#ctags').length > 0) {
+                    $('#ctags').val(line.replace('tags: ', '').replaceAll('\"', ''));
+                    tags = $('#ctags').val().split(',');
+                    for (var tag of tags) {
+                        //console.log(tag);
+                        for (var toi of tagOptionIds) {
+                            $('#' + toi + ' option').each(function () {
+                                if (this.value == tag)
+                                    this.selected = true;
+                            });
+                        }
+                    }
+                }
+            }
+            if (line.includes('categories: ')) {
+                //alert(line);
+                $('#ccategories').val(line.replace('categories: ', '').replace('categories: ', '').replace(/\[|]/g, '').replace(/\"/g, ''));
+            }
+            /* if (line.includes('caturl: ')) {
+                //alert(line);
+                $('#ccaturl').val(line.replace('caturl: ', '').replaceAll('\"', ''));
+            } */
+            if (line.includes('col1: ')) {
+                //alert(line);
+                $('#ccol1').val(line.replace('col1: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('col2: ')) {
+                //alert(line);
+                $('#ccol2').val(line.replace('col2: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('meta_title: ')) {
+                //alert(line);
+                $('#cmetattl').val(line.replace('title: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('meta_description: ')) {
+                //alert(line);
+                $('#cmetadsc').val(line.replace('title: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('introduction: ')) {
+                //alert(line);
+                $('#cintroduction').val(line.replace('description: ', '').replaceAll('\"', '').replaceAll('<br>', '\r\n'));
+            }
+            if (line.includes('question_box_intro: ')) {
+                //alert(line);
+                $('#cquestionboxintro').val(line.replace('title: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('---')) {
+                isNotFrontMatterCount += 1;
+            }
+            continue;
+        }
+        contentMatters.push(line)
+        /*         if (line.toString().trim() == "") {
+                    rblocks.push({ 'type': 'br', 'text': line });
+                    continue;
+                } */
+
+        if (line.includes('---')) {
+            rblocks.push({ 'type': 'hr', 'text': line });
+            continue;
+        }
+
+        if (line.includes('<h4>')) {
+            rblocks.push({ 'type': 'title', 'text': line });
+            continue;
+        }
+
+        if (line.includes('{{% chuz-div class=\"mt-5\" %}}')) {
+            rblocks.push({ 'type': 'mt5', 'text': line });
+            continue;
+        }
+
+        if (line.includes('<img') || foundImg) {
+            crossLine += line;
+            foundImg = true;
+            if (line.includes('</img>')) {
+                rblocks.push({ 'type': 'img', 'text': crossLine });
+                foundImg = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        if (line.includes('<iframe') || foundYT) {
+            crossLine += line;
+            foundYT = true;
+            if (line.includes('</iframe>')) {
+                rblocks.push({ 'type': 'youtube', 'text': crossLine });
+                foundYT = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        if (line.includes('<table') || foundTBL) {
+            crossLine += line;
+            foundTBL = true;
+            if (line.includes('</table>')) {
+                rblocks.push({ 'type': 'table', 'text': crossLine });
+                foundTBL = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        rblocks.push({ 'type': 'para', 'text': line });
+    }
+
+    return rblocks
+}
+
+function GetMdHeader() {
+    rContent = "";
+    rContent += '---\n';
+    rContent += 'title: "' + $('#ctitle').val() + '"\n';
+    rContent += 'date: ' + $('#cdate').val() + '\n';
+    rContent += 'draft: ' + (!$('#cdraft').is(':checked')) + '\n';
+    rContent += 'type: "' + $('#ctype').val() + '"\n';
+    rContent += 'url: "' + $('#curl').val() + '"\n';
+    //mdContent += 'url: "' + $('#curl').val() + '"\n';
+    rContent += 'image: "' + $('#cimage').val() + '"\n';
+    if ($('#ctype').val() == "collection") {
+        rContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+        rContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
+
+        tags = [];
+        for (var toi of tagOptionIds) {
+            if ($('#' + toi).val() != "")
+                tags.push($('#' + toi).val());
+        }
+        rContent += 'tags: "' + tags.join(',') + '"\n';
+        //rContent += 'tags: "' + ($('#ctags').val() == 'undefined' ? "" : $('#ctags').val()) + '"\n';
+    }
+    else if ($('#ctype').val() == "blog") {
+        rContent += 'categories: ["' + $('#ccategories').val() + '"]\n';
+        //rContent += 'caturl: "' + $('#ccaturl').val() + '"\n';
+        rContent += 'col1: "' + ($('#ccol1').val() == 'undefined' ? "" : $('#ccol1').val()) + '"\n';
+        rContent += 'col2: "' + ($('#ccol2').val() == 'undefined' ? "" : $('#ccol2').val()) + '"\n';
+    }
+    rContent += '---\n';
+    //alert(rContent);
+    return rContent
+}
+
+const parseTitle = line => {
+    var title = '';
+    title = line.replace('### **', '');
+    title = title.replace('**', '');
+    if (title.includes('敘述')) {
+        title = title.replace('<!-- ', '');
+        title = title.replace('-->', '');
+    }
+    return title;
+};
+
+const parseAmpImg = line => {
+    if (line.includes('alt')) {
+        const altParameter = line.replace(/ |alt=|"/g, '');
+        return { alt: altParameter };
+    } else if (line.includes('src')) {
+        const srcParameter = line.replace(/ |src=|"/g, '');
+        return { src: srcParameter };
+    } else if (line.includes('height')) {
+        const heightParameter = line.replace(/ |height=|"/g, '');
+        return { height: heightParameter };
+    } else if (line.includes('width')) {
+        const widthParameter = line.replace(/ |width=|"/g, '');
+        return { width: widthParameter };
+    } else if (line.includes('layout')) {
+        const layoutParameter = line.replace(/ |layout=|"|>/g, '');
+    }
+}
+
+function tableTextToArray(tableHtml) {
+    tbl = document.createElement('table');
+    tbl.innerHTML = tableHtml.replace('<table>', '').replace('</table>', '');
+    var tableInfo = Array.prototype.map.call(tbl.querySelectorAll('tr'), function (tr) {
+        return Array.prototype.map.call(tr.querySelectorAll('td'), function (td) {
+            return td.innerHTML;
+        });
+    });
+    return tableInfo;
+}
+
+function tableArrayToHtml(tableArray) {
+    tbl = document.createElement('table');
+    for (j = 0; j < tableArray.length; j++) {
+        tr = document.createElement('tr');
+        for (k = 0; k < tableArray[j].length; k++) {
+            td = document.createElement('td');
+            if (k == 0)
+                td.style.width = "25%";
+            td.innerHTML = tableArray[j][k];
+            tr.appendChild(td);
+        }
+        tbl.appendChild(tr);
+    }
+    //alert(tbl.outerHTML.toString());
+    return tbl.outerHTML.toString();
+}
+
+function GenSwfDD(obj) {
+    Object.entries(SwfType).forEach(([key, value]) => {
+        op = document.createElement('option');
+        op.value = key;
+        op.text = value;
+        obj.appendChild(op);
+    });
+}
+
+function ReplaceSwfType(inContent) {
+    Object.entries(SwfType).forEach(([key, value]) => {
+        inContent = inContent.replaceAll('[' + key + ']', '[' + value + ']');
+    });
+    return inContent;
+}
+
+var editor;
+var editor1;
+editorBlocks = [];
+editorBlocks1 = [];
+function ParseProductSection(inContent) {
+    editorBlocks = [];
+    editorBlocks1 = [];
+    var aa = $.parseHTML(inContent.trim());
+    //處理圖片
+    if ($("[id='carousel-with-preview']", aa).length > 0) {
+        imgnodes = $("[id='carousel-with-preview']", aa)[0].childNodes;
+        for (i = 0; i < imgnodes.length; i++) {
+            var tmpsrc, tmpw, tmph, ampimg;
+            if (imgnodes[i].nodeName == "AMP-IMG") {
+                //alert(imgnodes[i].nodeName);
+                ampimg = imgnodes[i].outerHTML;
+                tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+                //alert(tmpsrc);
+                tmpw = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                tmph = ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8);
+                //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                editorBlocks.push({
+                    type: "image", data: {
+                        file: {
+                            url: BHOUSE_SERVER + editTarget + '/' + tmpsrc,
+                            width: parseInt(tmpw),
+                            height: parseInt(tmph),
+                        },
+                        caption: "小寶優居 | " + $('#ctitle').val(),
+                    }
+                });
+            }
+        }
+    }
+    /*     else {
+            editorBlocks.push({
+                type: "image", data: {
+                    file: {
+                        url: 'https://bhouse.com.tw/img/logo2.png',
+                        width: 300,
+                        height: 300,
+                    },
+                    caption: "小寶優居 | " + $('#ctitle').val(),
+                }
+            });
+        } */
+    //editor.api.blocks.render(editorBlocks);
+    $('#editorjs')[0].innerHTML = "";
+    //alert(editorBlocks);
+    editor = new EditorJS({
+        readOnly: false,
+        holder: 'editorjs',
+        tools: {
+            paragraph: { inlineToolbar: false },
+            image: {
+                class: ImageTool,
+                config: {
+                    endpoints: {
+                        byFile: '/backstage/upload' + $('#curl').val(),
+                        byUrl: '/backstage/getimage' + $('#curl').val(),
+                    }
+                }
+            }
+        }
+        , data: { blocks: editorBlocks }
+        ,
+        onReady: function () {
+            //alert(editor.blocks.getBlocksCount());
+            //saveButton.click();
+        },
+        onChange: function (api, block) {
+            //$('#cimage')[0].val();
+            //console.log('something changed', block);
+        }
+    });
+
+    //類別
+    Object.entries(SwfType).forEach(([key, value]) => {
+        if ($("#ctype").val() == key) {
+            //alert($("#ctype").val());
+            $("#swfDropdown").val($("#ctype").val());
+        }
+    });
+
+    //敘述
+    $("#swfDesc").val("");
+    if ($("[class='description']", aa).length > 0) {
+        $("#swfDesc").val($(".description", aa)[0].innerHTML.trim().replaceAll('<b>', '').replaceAll('</b>', ''));
+    }
+    //alert(editorBlocks);
+    //其他
+    $("#swfPrice").val("");
+    $("#swfColor").val("");
+    $("#swfSize").val("");
+    $("#swfMat").val("");
+    $("#swfMemo").val("");
+    if ($("[class='detail']", aa).length > 0) {
+        onodes = $("[class='detail']", aa)[0].childNodes;
+        for (i = 0; i < onodes.length; i++) {
+            if (onodes[i].nodeName != "#text") {
+                if (onodes[i].innerHTML.trim().indexOf("定價 ： ") >= 0)
+                    $("#swfPrice").val(onodes[i].innerHTML.replace("定價 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("顏色 ： ") >= 0)
+                    $("#swfColor").val(onodes[i].innerHTML.replace("顏色 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("尺寸(mm) ： ") >= 0)
+                    $("#swfSize").val(onodes[i].innerHTML.replace("尺寸(mm) ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("材質 ： ") >= 0)
+                    $("#swfMat").val(onodes[i].innerHTML.replace("材質 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("備註 ： ") >= 0)
+                    $("#swfMemo").val(onodes[i].innerHTML.replace("備註 ： ", "").trim());
+                //alert(nodes[i].innerHTML);
+            }
+        }
+    }
+
+    //處理規格圖片
+    if ($("[class='spec']", aa).length > 0) {
+        snodes = $("[class='spec']", aa)[0].childNodes;
+        //alert(snodes[0].innerHTML);
+        for (i = 0; i < snodes.length; i++) {
+            var tmpsrc, tmpw, tmph, ampimg;
+            if (snodes[i].nodeName == "AMP-IMG") {
+                ampimg = snodes[i].outerHTML;
+                tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+                tmpw = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                tmph = ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8);
+                //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                editorBlocks1.push({
+                    type: "image", data: {
+                        file: {
+                            url: BHOUSE_SERVER + editTarget + '/' + tmpsrc,
+                            width: parseInt(tmpw),
+                            height: parseInt(tmph),
+                        },
+                        caption: "小寶優居 | " + $('#ctitle').val(),
+                    }
+                });
+            }
+        }
+    }
+    /* else {
+        editorBlocks1.push({
+            type: "image", data: {
+                file: {
+                    url: 'https://bhouse.com.tw/img/logo2.png',
+                    width: 300,
+                    height: 300,
+                },
+                caption: "小寶優居 | " + $('#ctitle').val(),
+            }
+        });
+    } */
+    $('#editorjs1')[0].innerHTML = "";
+    editor1 = new EditorJS({
+        readOnly: false,
+        holder: 'editorjs1',
+        tools: {
+            paragraph: { inlineToolbar: false },
+            image: {
+                class: ImageTool,
+                config: {
+                    endpoints: {
+                        byFile: '/backstage/upload' + $('#curl').val(),
+                        byUrl: '/backstage/getimage' + $('#curl').val(),
+                    }
+                }
+            }
+        }
+        , data: { blocks: editorBlocks1 }
+        ,
+        onReady: function () {
+            //saveButton.click();
+        },
+        onChange: function (api, block) {
+            //console.log('something changed', block);
+        }
+    });
+    //$('.image-tool__caption').css('display', 'none');
+}
+
+function GenProductSection(mimg, specimg) {
+
+    section = document.createElement('section')
+    tmpstr = `<section class="section44 mb-5">
+    <div class="container">
+      <div class="mb-5">
+        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/##ctype##">##ctypec##</a> > <a href="##curl##">##ctitle##</a>
+      </div>
+      <div class="row">
+        <div class="col-md-5 col-sm-12">
+          <div class="block">
+            <div class="section-title text-center">
+              <amp-carousel
+                id="carousel-with-preview"
+                width="300"
+                height="300"
+                layout="responsive"
+                type="slides"
+                autoplay
+                delay="2500"
+                role="region"
+                aria-label="小寶優居 | ##ctitle##"
+              >
+##AMP-IMG##
+              </amp-carousel>
+              <div class="mt-3 carousel-preview">
+##PREV-IMG##
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-7 col-sm-12">
+          <div class="block ms-md-5 mb-5">
+            <div class="title mb-4"><b>##ctitle##</b></div>
+            <div class="description">
+<b>##swfDesc##</b>
+            </div>
+            <hr>
+            <div class="detail">
+##swfPrice##
+##swfColor##
+##swfSize##
+##swfMat##
+##swfMemo##
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
+          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        </div>
+      </div>
+##SPEC-IMG##
+</div>
+  </section>`;
+
+    tmpstr = tmpstr.replaceAll('##ctitle##', $("#ctitle").val());
+    tmpstr = tmpstr.replaceAll('##ctype##', $("#ctype").val());
+    tmpstr = tmpstr.replaceAll('##curl##', $("#curl").val());
+    Object.entries(SwfType).forEach(([key, value]) => {
+        if ($("#ctype").val() == key)
+            tmpstr = tmpstr.replaceAll('##ctypec##', value);
+    });
+    tmpstr = tmpstr.replaceAll('##swfDesc##', $("#swfDesc").val());
+    if ($("#swfPrice").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfPrice##', "<div>定價 ： " + $("#swfPrice").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfPrice##', '<span></span>');
+    if ($("#swfColor").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfColor##', "<div>顏色 ： " + $("#swfColor").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfColor##', '<span></span>');
+    if ($("#swfSize").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfSize##', "<div>尺寸(mm) ： " + $("#swfSize").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfSize##', '<span></span>');
+    if ($("#swfMat").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfMat##', "<div>材質 ： " + $("#swfMat").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfMat##', '<span></span>');
+    if ($("#swfMemo").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfMemo##', "<div>備註 ： " + $("#swfMemo").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfMemo##', '<span></span>');
+
+    mimgstr = "";
+    firstimg = true;
+    for (i = 0; i < mimg.blocks.length; i++) {
+        //alert(block.type);
+        block = mimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                if (firstimg) {
+                    $("#cimage").val($("#curl").val() + '/' + iurl[iurl.length - 1]);
+                    firstimg = false;
+                }
+                mimgstr += '<amp-img\n  alt="小寶優居 | ' + $("#ctitle").val()
+                    + '"\n  src="' + iurl[iurl.length - 1]
+                    + '"\n  height="' + block.data.file.height
+                    + '"\n  width="' + block.data.file.width
+                    + '"\n  layout="responsive">\n</amp-img>';
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##AMP-IMG##', mimgstr == "" ? "" : mimgstr);
+
+    previmgstr = "";
+    for (i = 0; i < mimg.blocks.length; i++) {
+        //alert(block.type);
+        block = mimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                previmgstr += (previmgstr == "" ? "" : '\n') + `<button on="tap:carousel-with-preview.goToSlide(index=` + i + `)">
+            <amp-img
+              src="`+ iurl[iurl.length - 1] + `"
+              width="40"
+              height="40"
+              alt="`+ block.data.caption + `"
+            ></amp-img>
+          </button>`;
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##PREV-IMG##', previmgstr == "" ? "" : previmgstr);
+
+    specimgstr = "";
+    for (i = 0; i < specimg.blocks.length; i++) {
+        //alert(block.type);
+        block = specimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                specimgstr += '<amp-img\n  alt="小寶優居 | ' + $("#ctitle").val()
+                    + '"\n  src="' + iurl[iurl.length - 1]
+                    + '"\n  height="' + block.data.file.height
+                    + '"\n  width="' + block.data.file.width
+                    + '"\n  layout="responsive">\n</amp-img>';
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##SPEC-IMG##', specimgstr == "" ? "" : '<div class="spec"><div class="mb-4"><b>尺寸規格</b></div>' + specimgstr + '</div>');
+
+    return tmpstr;
+
+}
+
+class MDParser {
+
+    constructor(MDtext) {
+        this.headerText = "";
+        this.contentText = "";
+        this.title = "";
+        this.date = new Date();
+        this.draft = true;
+        this.type = "";
+        this.url = "";
+        this.image = "";
+        this.description = "";
+        this.weight = 1;
+        this.tag = [];
+        for (var line of MDtext.split('\n')) {
+            //console.log(line);
+        }
+    }
+
+
+}
+
+

backstage/static/js/old2/editor.js

@@ -0,0 +1,299 @@
+const contentDiv = document.getElementById('editor_block');
+const titleButton = document.getElementById('title_button');
+const submitButton = document.getElementById('submit_button');
+contentApiUrl = `${PORTAL_SERVER}contents?url=${(JSON.parse(document.getElementById('url').textContent)).url}`
+
+aa = "";
+frontMatters = [];
+contentMatters = [];
+editorBlocks = [];
+var editor;
+axios.get(contentApiUrl).then(({ data }) => {
+  const content = data[0]['content'];
+  var blockArray = [{ title: '', data: [] }];
+  var blockCount = 0;
+  blocks = parseMd(content);
+  aa = new MDParser(content);
+  editor_block = document.getElementById('editor_block');
+  //alert(blocks[0]['text']);
+
+  //ul = document.createElement('ul');
+  //ul.id = "sortable";
+  for (i = 0; i < blocks.length; i++) {
+    //li = document.createElement('li');
+    //odiv = document.createElement('div');
+    //odiv.style.border = 'inset 1px gray';
+    if (blocks[i]['type'] == "para") {
+      editorBlocks.push({ type: "paragraph", data: { text: blocks[i]['text'] } });
+      //tmp = document.createElement('textarea');
+      //tmp.style.border = 'outset 5px pink';
+      //tmp.style.width = '100%';
+      //tmp.value = blocks[i]['text'];
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "br") {
+      editorBlocks.push({ type: "paragraph", data: { text: "" } });
+      //tmp = document.createElement('br');
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "img") {
+      ampimg = blocks[i]['text'];
+      //alert(ampimg.indexOf("width=\"",84));
+      //alert(ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5));
+      tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+      //tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.lastIndexOf(".") - ampimg.indexOf("src=\"") -1);
+      //tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf(".webp") - ampimg.indexOf("src=\""));
+      editorBlocks.push({
+        type: "image", data: {
+          file: {
+            url: tmpsrc,
+            width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
+            height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
+          },
+          caption: ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5).toString(),
+          stretched: false,
+          withBorder: true,
+          withBackground: false,
+        }
+      });
+      //alert(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8));
+      //img = document.createElement('img');
+      //img.style.width = '100%';
+      //img.src = tmpsrc;
+      //odiv.appendChild(img);
+    }
+    else if (blocks[i]['type'] == "youtube") {
+      ampimg = blocks[i]['text'];
+      vid = ampimg.substr(ampimg.indexOf("data-videoid=\"") + 14, ampimg.indexOf("\"", ampimg.indexOf("data-videoid=\"") + 14) - ampimg.indexOf("data-videoid=\"") - 14)
+      editorBlocks.push({
+        type: "embed", data: {
+          service: 'youtube',
+          source: 'https://www.youtube.com/watch?' + vid,
+          embed: 'https://www.youtube.com/embed/' + vid,
+          width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
+          height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
+        }
+      });
+    }
+    else if (blocks[i]['type'] == "title") {
+      blocks[i]['text'] = blocks[i]['text'].replace("### **", "").replace("**", "")
+      editorBlocks.push({ type: "header", data: { text: blocks[i]['text'] } });
+      //tmp = document.createElement('h3');
+      //tmp.innerHTML = blocks[i]['text'];
+      //odiv.appendChild(tmp);
+    }
+    else if (blocks[i]['type'] == "hr") {
+      //alert('yo');
+      editorBlocks.push({ type: "paragraph", data: { text: "---" } });
+    }
+    else if (blocks[i]['type'] == "mt5") {
+      //alert('yo');
+      editorBlocks.push({ type: "delimiter", data: {} });
+    }
+    else if (blocks[i]['type'] == "table") {
+      //alert('yo');
+      editorBlocks.push({ type: "table", data: { content: tableTextToArray(blocks[i]['text']) } });
+    }
+    //li.appendChild(odiv);
+    //ul.appendChild(li);
+  }
+  //editor_block.appendChild(ul);
+  //$("#sortable").sortable();
+  //$("#sortable").disableSelection();
+  $("#editor_block").css({ "display": "none" });
+  //alert(JSON.parse(document.getElementById('url').textContent).url);
+  $('#editorjs')[0].innerHTML = "";
+  //alert(JSON.stringify(editorBlocks));
+  editor = new EditorJS({
+    readOnly: false,
+    holder: 'editorjs',
+
+    tools: {
+      header: {
+        class: Header,
+        config: {
+          placeholder: 'Header'
+        }
+      },
+
+      image: {
+        class: ImageTool,
+        config: {
+          endpoints: {
+            byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url, // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url, // Your endpoint that provides uploading by Url
+            /* byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your endpoint that provides uploading by Url */
+            /* byFile: '/backstage/upload/' + $('#ctitle').val(), // Your backend file uploader endpoint
+            byUrl: '/backstage/getimage/' + $('#ctitle').val(), // Your endpoint that provides uploading by Url */
+          }
+        }
+      }
+      ,
+      // warning: {
+      //   class: Warning,
+      //   inlineToolbar: true,
+      //   config: {
+      //     titlePlaceholder: 'Title',
+      //     messagePlaceholder: 'Message',
+      //   },
+      // },
+      table: Table,
+      delimiter: Delimiter,
+      embed: Embed,
+    }
+    ,
+    data: { blocks: editorBlocks }
+    ,
+    onReady: function () {
+      //saveButton.click();
+    },
+    onChange: function (api, block) {
+      //console.log('something changed', block);
+    }
+  });
+
+  /*   for (var blockData of preBlockArray) {
+      blockCount = loadDataToBlock(blockArray, blockCount, blockData);
+    }
+    titleButton.onclick = function () {
+      blockCount = loadDataToBlock(blockArray, blockCount);
+    } */
+});
+
+function editorSave() {
+  editor.save().then((outputData) => {
+    //console.log('Article data: ', outputData);
+    //var mdContent = GetMdHeader();
+    //var mdContent = frontMatters.join('\n');
+    //console.log(mdContent);
+    //console.log(frontMatters.join('\n'));
+    //mdContent = mdContent.replace('draft: ' + (!$('#cdraft').is(':checked')), 'draft: ' + $('#cdraft').val())
+    //alert(mdContent);
+    /*
+    for (var frontMatter of frontMatters) {
+      mdContent += frontMatter + '\n';
+    }
+    
+    //alert($('#cdescription').val());
+    mdContent += '---\n';
+    mdContent += 'title: "' + $('#ctitle').val() + '"\n';
+    mdContent += 'date: ' + $('#cdate').val() + '\n';
+    mdContent += 'draft: ' + $('#cdraft').val() + '\n';
+    mdContent += 'type: "' + $('#ctype').val() + '"\n';
+    mdContent += 'url: "' + $('#curl').val() + '"\n';
+    mdContent += 'image: "' + $('#cimage').val() + '"\n';
+    mdContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+    mdContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
+    mdContent += 'tag: "' + ($('#ctag').val() == 'undefined' ? "" : $('#ctag').val()) + '"\n';
+    mdContent += '---\n\n';
+    */
+
+    var mdContent = '\n';
+    var articleinfo = frontMatters.join('\n');
+    var opening = '\n<div class="container-fluid blog_article p-0">\n';
+    //var chapterlist = '<section><div class="question-box">\n<ul>\n<li data-gt-duration="100" data-gt-offset="0">小寶優居的客變懶人包將幫你解決以下客變問題：</li>\n';
+    var numChapters = 0;
+    var sectionstarted = false;
+
+    for (i = 0; i < outputData.blocks.length; i++) {
+      //alert(block.type);
+      block = outputData.blocks[i];
+      if (block.type == "header") {
+        mdContent += '<h4>' + block.data.text + '</h4>\n';
+      }
+      else if (block.type == "paragraph") {
+        mdContent += '\n' + block.data.text + '\n';
+      }
+      else if (block.type == "hr") {
+        //alert('hr');
+        mdContent += '\n---\n';
+      }
+      else if (block.type == "image") {
+        //console.log(block.data.file.url);
+        //console.log(JSON.parse(document.getElementById('url').textContent).url);
+        iurl = block.data.file.url.split('/');
+        mdContent += '<img class="w-100" src="' + iurl[iurl.length - 2] + '/' + iurl[iurl.length - 1] + ' alt="' + block.data.caption + '"\n >\n</img>\n'
+        if (block.data.caption != '')
+        {
+          mdContent += '<div class="img-text">\n<p>' + block.data.caption + '</p>\n</div>\n';
+        }
+      }
+      else if (block.type == "delimiter") {
+        mdContent += '\n{{% chuz-div class="mt-5" %}}\n';
+      }
+      else if (block.type == "embed") {
+        mdContent += '<iframe'
+          + '\n  data-videoid="' + block.data.embed.replace('https://www.youtube.com/embed/', '')
+          + '"\n  layout="responsive'
+          + '"\n  width="' + block.data.width
+          + '"\n  height="' + block.data.height
+          + '">\n</iframe>\n</div>\n';
+      }
+      else if (block.type == "table") {
+        //alert(tableArrayToHtml(block.data).length);
+        mdContent += '\n' + tableArrayToHtml(block.data.content) + '\n'
+        //console.log(tableArrayToHtml(block.data.content));
+      }
+    }
+    console.log(mdContent);
+
+    postData = {
+      content: mdContent,
+      url: (JSON.parse(document.getElementById('url').textContent)).url
+    };
+    axios.post(contentApiUrl, json = postData).then(({ data }) => {
+      alert('作品資料已儲存');
+    });
+  }).catch((error) => {
+    console.log('Saving failed: ', error)
+  });
+
+  /*   var mdContent = '';
+    for (var frontMatter of frontMatters) {
+      mdContent += frontMatter + '\n';
+    } */
+
+  //alert(bb);
+  /*     for(var eBlock in outputData.blocks)
+      {
+        alert(eBlock.type);
+      } */
+  /* 
+for (var idx = 0; idx < blockArray.length; idx++) {
+ if (_.get(blockArray[idx], 'title', '').includes('敘述')) {
+   mdContent += `\n<!-- ### **${_.get(blockArray[idx], 'title', '')}**-->\n`
+ } else {
+   mdContent += `\n### **${_.get(blockArray[idx], 'title', '')}**\n`
+ }
+ for (var data of _.get(blockArray[idx], 'data', [])) {
+   if (_.get(_.keys(data), 0) === 'description') {
+     if (_.get(data, 'description.text', '').includes('\n')) {
+       for (const line of _.get(data, 'description.text', '').split('\n')) {
+         mdContent += `\n${line}    `;
+       }
+     } else {
+       mdContent += `\n${_.get(data, 'description.text', '')}`;
+     }
+   } else if (_.get(_.keys(data), 0) === 'image') {
+     ampImgForm = `\n<amp-img\
+\n  alt="${_.get(data, 'image.alt', '小寶優居')}"\
+\n  src="${_.get(data, 'image.src', '')}"\
+\n  height="${_.get(data, 'image.height', 300)}"\
+\n  width="${_.get(data, 'image.width', 400)}"\
+\n  layout="${_.get(data, 'image.layout', 'responsive')}">\
+\n</amp-img>\n`;
+     mdContent += ampImgForm;
+   }
+ }
+}
+*/
+  /* const postData = {
+    content: mdContent,
+    url: (JSON.parse(document.getElementById('url').textContent)).url
+  }; */
+
+  //axios.post(contentApiUrl, json = postData);
+
+}
+submitButton.onclick = editorSave

backstage/static/js/old2/parsers.js

@@ -0,0 +1,91 @@
+function parseMd(content) {
+  var frontMatters = [];
+  var blockCount;
+  var preDataIndex;
+  var parseBlockDiv;
+  var preImgObject = { 'image': {} };
+  var isNotFrontMatterCount = 0;
+  var isAmpImgRange = false;
+  var result = [];
+
+  for (const line of content.split('\n')) {
+    if (isNotFrontMatterCount < 2) {
+      frontMatters.push(line)
+      if (line.includes('---')) {
+        isNotFrontMatterCount += 1;
+      }
+      continue;
+    }
+
+    if (isAmpImgRange === true && !(line.includes('</img>'))) {
+      imgParamObject = parseAmpImg(line);
+      preImgObject.image = { ...preImgObject.image, ...imgParamObject };
+      continue;
+    }
+
+    if (line.includes('<h4>')) {
+      parseBlockDiv = true;
+      preDataIndex = 0;
+      blockCount = blockCount + 1 | 0;
+      const preBlockindex = blockCount;
+      const title = parseTitle(line);
+      result[preBlockindex] = { title: title };
+
+    } else if (line.includes('img')) {
+      const preBlockindex = blockCount;
+      if (line.includes('</img>')) {
+        addDataToBlockArray(preImgObject, result, preBlockindex, preDataIndex);
+        isAmpImgRange = false;
+        preImgObject = { 'image': {} }
+        preDataIndex += 1;
+        continue;
+      }
+      isAmpImgRange = true;
+    } else {
+      if (parseBlockDiv === undefined) {
+        // for skipping space before first title
+        continue
+      }
+      if (line === '') {
+        // for skipping space
+        continue
+      }
+      const preBlockindex = blockCount;
+      const ownDataIndex = preDataIndex;
+      preDataIndex += 1;
+      //addDataToBlockArray({ description: { text: line } }, result, preBlockindex, ownDataIndex);
+      addDataToBlockArray({ text: line }, result, preBlockindex, ownDataIndex);
+    }
+  }
+  alert(JSON.stringify(result));
+  return { frontMatters: frontMatters, preBlockArray: result }
+}
+
+const parseTitle = line => {
+  var title = '';
+  title = line.replace('### **', '');
+  title = title.replace('**', '');
+  if (title.includes('敘述')) {
+    title = title.replace('<!-- ', '');
+    title = title.replace('-->', '');
+  }
+  return title;
+};
+
+const parseAmpImg = line => {
+  if (line.includes('alt')) {
+    const altParameter = line.replace(/ |alt=|"/g, '');
+    return { alt: altParameter };
+  } else if (line.includes('src')) {
+    const srcParameter = line.replace(/ |src=|"/g, '');
+    return { src: srcParameter };
+  } else if (line.includes('height')) {
+    const heightParameter = line.replace(/ |height=|"/g, '');
+    return { height: heightParameter };
+  } else if (line.includes('width')) {
+    const widthParameter = line.replace(/ |width=|"/g, '');
+    return { width: widthParameter };
+  } else if (line.includes('layout')) {
+    const layoutParameter = line.replace(/ |layout=|"|>/g, '');
+  }
+}

backstage/static/js/old2/yo.js

@@ -0,0 +1,783 @@
+contentApiUrl = `${PORTAL_SERVER}contents?url=`;
+frontMatters = [];
+contentMatters = [];
+tagOptionIds = ['thousetype', 'tpinsize', 'tbudget', 'troomscount'];
+
+var SwfType = {};
+if (location.pathname.indexOf('system_furniture') >= 0) {
+    SwfType = {
+        "custom_made_system_cabinet": "客製模組系統櫃",
+        "system_cabinet": "模組系統櫃單品",
+    };
+}
+else {
+    SwfType = {
+        "other_furniture": "其他",
+        "master_bedroom": "臥室",
+        "living_room": "客廳",
+        "study_room": "書房",
+        "dining_room": "餐廳",
+    };
+}
+
+//document.ready
+$(function () {
+
+    $("#dialog-form").hide();
+    if ($('#editorjs').length > 0)
+        editor = new EditorJS({
+            readOnly: false,
+            holder: 'editorjs',
+        });
+    if ($('#editorjs1').length > 0)
+        editor1 = new EditorJS({
+            readOnly: false,
+            holder: 'editorjs1',
+        });
+
+});
+
+function getHeader(url) {
+    axios.get(contentApiUrl + url).then(({ data }) => {
+        frontMatters = [];
+        contentMatters = [];
+        editTarget = url;
+        mdType = url.split('/')[1];
+        aa = data[0]['content'];
+        for (var toi of tagOptionIds) {
+            $('#' + toi).val("");
+        }
+        //const content = _.get(data, '0.content', '');
+        blocks = parseMd(aa);
+        oTitle = $("#ctitle").val();
+        // $("#dialog-form").dialog();
+        if ($("#ctype").val() == "collection") {
+            $("#scat").hide();
+        }
+        else if ($("#ctype").val() == "blog") {
+            $("#sdesc").hide();
+        }
+        else if ($("#ctype").val() == "news") {
+            $("#sdesc").hide();
+            $("#scat").hide();
+            $("#simg").hide();
+        }
+        else {
+            ParseProductSection(contentMatters.join(''));
+        }
+        $("#myModal").modal();
+
+        //console.log(frontMatters);
+        //alert($('#cimage').val());
+    });
+}
+
+function toggleDraft(obj, url) {
+    axios.get(contentApiUrl + url).then(({ data }) => {
+        frontMatters = [];
+        contentMatters = [];
+        aa = data[0]['content'];
+        const content = _.get(data, '0.content', '');
+        blocks = parseMd(aa);
+        editTarget = url;
+        $('#cdraft').removeAttr('checked');
+        $('#cdraft').prop('checked', obj.checked);
+        updateHeader();
+        oTitle = "";
+    });
+}
+
+function updateHeader() {
+    /* if (oTitle != $('#ctitle').val() && $('#ctitle').val() != "" && oTitle != "") {
+      axios.get('/backstage/modTitle/' + oTitle + '/' + $('#ctitle').val()).then(({ data }) => {
+        if (data.success == "0") {
+          alert('已有重複的標題，請重新設定');
+          return;
+        }
+        else {
+          writeMd();
+        }
+      });
+    }
+    else {
+      writeMd();
+    } */
+    $("#uptbtn").attr('disabled', true);
+    writeMd();
+    // location.reload();
+}
+
+function writeMd() {
+
+    axios.get('/backstage/utils?trantext=' + $('#ccategories').val()).then(({ data }) => { $('#ccol1').val(data); })
+        .finally(() => {
+            mdContent = GetMdHeader();
+            mdContent += contentMatters.join("\n");
+            var formData = new FormData();
+            var imagefile = document.querySelector('#cfile');
+            formData.append("image", imagefile.files[0]);
+            axios.post('/backstage/upload/title', formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            }).then(({ data }) => {
+                $('#cfile').val("");
+                if (data.success == "1") {
+                    mdContent = mdContent.replace($('#cimage').val(), '/img/collection/' + data.file.url.substring(data.file.url.lastIndexOf('/') + 1));
+                    //alert(data.file.url.substring(data.file.url.lastIndexOf('/')+1));
+                }
+
+                postData = {
+                    content: mdContent,
+                    url: editTarget
+                };
+                //console.log(mdContent);
+                axios.post(contentApiUrl + editTarget, json = postData).then(({ data }) => {
+                });
+            }).finally(() => {
+                alert('資料已更新'); // test
+                location.reload();
+            });
+
+        });
+}
+
+function parseMd(content) {
+    //var frontMatters = [];
+    var blockCount;
+    var preDataIndex;
+    var parseBlockDiv;
+    var preImgObject = { 'image': {} };
+    var isNotFrontMatterCount = 0;
+    var isAmpImgRange = false;
+    var result = [];
+
+    var rblocks = new Array();
+    lineIdx = 1;
+    foundImg = false;
+    foundYT = false;
+    foundTBL = false;
+    crossLine = "";
+
+    for (var line of content.split('\n')) {
+        lineIdx++;
+        if (isNotFrontMatterCount < 2) {
+            frontMatters.push(line)
+            if (line.includes('title: ')) {
+                $('#ctitle').val(line.replace('title: ', '').replaceAll('\"', ''));
+                //alert($('#ctitle').val());
+            }
+            if (line.includes('date: ')) {
+                //alert(line);
+                $('#cdate').val(line.replace('date: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('draft: ')) {
+                //alert(line);
+                $('#cdraft').val(line.replace('draft: ', '').replaceAll('\"', ''));
+                //console.log($('#cdraft').val());
+                $('#cdraft').removeAttr('checked');
+                if ($('#cdraft').val() == 'false')
+                    $('#cdraft').prop('checked', true);
+                /*
+                if($('#cdraft').val() == 'true') 
+                    $('#cdraft').removeAttr('checked');
+                else
+                    $('#cdraft').attr('checked','true');
+                    */
+            }
+            if (line.includes('type: ')) {
+                //alert(line);
+                $('#ctype').val(line.replace('type: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('url: ')) {
+                //alert(line);
+                $('#curl').val(line.replace('url: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('image: ')) {
+                //alert(line);
+                $('#cimage').val(line.replace('image: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('description: ')) {
+                //alert(line);
+                $('#cdescription').val(line.replace('description: ', '').replaceAll('\"', '').replaceAll('<br>', '\r\n'));
+            }
+            if (line.includes('weight: ')) {
+                //alert(line);
+                $('#cweight').val(line.replace('weight: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('tag: ')) {
+                //alert(line);
+                $('#ctag').val(line.replace('tag: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('tags: ')) {
+                //alert(line);
+                if ($('#ctags').length > 0) {
+                    $('#ctags').val(line.replace('tags: ', '').replaceAll('\"', ''));
+                    tags = $('#ctags').val().split(',');
+                    for (var tag of tags) {
+                        //console.log(tag);
+                        for (var toi of tagOptionIds) {
+                            $('#' + toi + ' option').each(function () {
+                                if (this.value == tag)
+                                    this.selected = true;
+                            });
+                        }
+                    }
+                }
+            }
+            if (line.includes('categories: ')) {
+                //alert(line);
+                $('#ccategories').val(line.replace('categories: ', '').replace('categories: ', '').replace(/\[|]/g, '').replace(/\"/g, ''));
+            }
+            /* if (line.includes('caturl: ')) {
+                //alert(line);
+                $('#ccaturl').val(line.replace('caturl: ', '').replaceAll('\"', ''));
+            } */
+            if (line.includes('col1: ')) {
+                //alert(line);
+                $('#ccol1').val(line.replace('col1: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('col2: ')) {
+                //alert(line);
+                $('#ccol2').val(line.replace('col2: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('meta_title: ')) {
+                //alert(line);
+                $('#cmetattl').val(line.replace('title: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('meta_description: ')) {
+                //alert(line);
+                $('#cmetadsc').val(line.replace('title: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('introduction: ')) {
+                //alert(line);
+                $('#cintroduction').val(line.replace('description: ', '').replaceAll('\"', '').replaceAll('<br>', '\r\n'));
+            }
+            if (line.includes('question_box_intro: ')) {
+                //alert(line);
+                $('#cquestionboxintro').val(line.replace('title: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('---')) {
+                isNotFrontMatterCount += 1;
+            }
+            continue;
+        }
+        contentMatters.push(line)
+        /*         if (line.toString().trim() == "") {
+                    rblocks.push({ 'type': 'br', 'text': line });
+                    continue;
+                } */
+
+        if (line.includes('---')) {
+            rblocks.push({ 'type': 'hr', 'text': line });
+            continue;
+        }
+
+        if (line.includes('<h4>')) {
+            rblocks.push({ 'type': 'title', 'text': line });
+            continue;
+        }
+
+        if (line.includes('{{% chuz-div class=\"mt-5\" %}}')) {
+            rblocks.push({ 'type': 'mt5', 'text': line });
+            continue;
+        }
+
+        if (line.includes('<img') || foundImg) {
+            crossLine += line;
+            foundImg = true;
+            if (line.includes('</img>')) {
+                rblocks.push({ 'type': 'img', 'text': crossLine });
+                foundImg = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        if (line.includes('<iframe') || foundYT) {
+            crossLine += line;
+            foundYT = true;
+            if (line.includes('</iframe>')) {
+                rblocks.push({ 'type': 'youtube', 'text': crossLine });
+                foundYT = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        if (line.includes('<table') || foundTBL) {
+            crossLine += line;
+            foundTBL = true;
+            if (line.includes('</table>')) {
+                rblocks.push({ 'type': 'table', 'text': crossLine });
+                foundTBL = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        rblocks.push({ 'type': 'para', 'text': line });
+    }
+
+    return rblocks
+}
+
+function GetMdHeader() {
+    rContent = "";
+    rContent += '---\n';
+    rContent += 'title: "' + $('#ctitle').val() + '"\n';
+    rContent += 'date: ' + $('#cdate').val() + '\n';
+    rContent += 'draft: ' + (!$('#cdraft').is(':checked')) + '\n';
+    rContent += 'type: "' + $('#ctype').val() + '"\n';
+    rContent += 'url: "' + $('#curl').val() + '"\n';
+    //mdContent += 'url: "' + $('#curl').val() + '"\n';
+    rContent += 'image: "' + $('#cimage').val() + '"\n';
+    if ($('#ctype').val() == "collection") {
+        rContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+        rContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
+
+        tags = [];
+        for (var toi of tagOptionIds) {
+            if ($('#' + toi).val() != "")
+                tags.push($('#' + toi).val());
+        }
+        rContent += 'tags: "' + tags.join(',') + '"\n';
+        //rContent += 'tags: "' + ($('#ctags').val() == 'undefined' ? "" : $('#ctags').val()) + '"\n';
+    }
+    else if ($('#ctype').val() == "blog") {
+        rContent += 'categories: ["' + $('#ccategories').val() + '"]\n';
+        //rContent += 'caturl: "' + $('#ccaturl').val() + '"\n';
+        rContent += 'col1: "' + ($('#ccol1').val() == 'undefined' ? "" : $('#ccol1').val()) + '"\n';
+        rContent += 'col2: "' + ($('#ccol2').val() == 'undefined' ? "" : $('#ccol2').val()) + '"\n';
+    }
+    rContent += '---\n';
+    //alert(rContent);
+    return rContent
+}
+
+const parseTitle = line => {
+    var title = '';
+    title = line.replace('### **', '');
+    title = title.replace('**', '');
+    if (title.includes('敘述')) {
+        title = title.replace('<!-- ', '');
+        title = title.replace('-->', '');
+    }
+    return title;
+};
+
+const parseAmpImg = line => {
+    if (line.includes('alt')) {
+        const altParameter = line.replace(/ |alt=|"/g, '');
+        return { alt: altParameter };
+    } else if (line.includes('src')) {
+        const srcParameter = line.replace(/ |src=|"/g, '');
+        return { src: srcParameter };
+    } else if (line.includes('height')) {
+        const heightParameter = line.replace(/ |height=|"/g, '');
+        return { height: heightParameter };
+    } else if (line.includes('width')) {
+        const widthParameter = line.replace(/ |width=|"/g, '');
+        return { width: widthParameter };
+    } else if (line.includes('layout')) {
+        const layoutParameter = line.replace(/ |layout=|"|>/g, '');
+    }
+}
+
+function tableTextToArray(tableHtml) {
+    tbl = document.createElement('table');
+    tbl.innerHTML = tableHtml.replace('<table>', '').replace('</table>', '');
+    var tableInfo = Array.prototype.map.call(tbl.querySelectorAll('tr'), function (tr) {
+        return Array.prototype.map.call(tr.querySelectorAll('td'), function (td) {
+            return td.innerHTML;
+        });
+    });
+    return tableInfo;
+}
+
+function tableArrayToHtml(tableArray) {
+    tbl = document.createElement('table');
+    for (j = 0; j < tableArray.length; j++) {
+        tr = document.createElement('tr');
+        for (k = 0; k < tableArray[j].length; k++) {
+            td = document.createElement('td');
+            if (k == 0)
+                td.style.width = "25%";
+            td.innerHTML = tableArray[j][k];
+            tr.appendChild(td);
+        }
+        tbl.appendChild(tr);
+    }
+    //alert(tbl.outerHTML.toString());
+    return tbl.outerHTML.toString();
+}
+
+function GenSwfDD(obj) {
+    Object.entries(SwfType).forEach(([key, value]) => {
+        op = document.createElement('option');
+        op.value = key;
+        op.text = value;
+        obj.appendChild(op);
+    });
+}
+
+function ReplaceSwfType(inContent) {
+    Object.entries(SwfType).forEach(([key, value]) => {
+        inContent = inContent.replaceAll('[' + key + ']', '[' + value + ']');
+    });
+    return inContent;
+}
+
+var editor;
+var editor1;
+editorBlocks = [];
+editorBlocks1 = [];
+function ParseProductSection(inContent) {
+    editorBlocks = [];
+    editorBlocks1 = [];
+    var aa = $.parseHTML(inContent.trim());
+    //處理圖片
+    if ($("[id='carousel-with-preview']", aa).length > 0) {
+        imgnodes = $("[id='carousel-with-preview']", aa)[0].childNodes;
+        for (i = 0; i < imgnodes.length; i++) {
+            var tmpsrc, tmpw, tmph, ampimg;
+            if (imgnodes[i].nodeName == "AMP-IMG") {
+                //alert(imgnodes[i].nodeName);
+                ampimg = imgnodes[i].outerHTML;
+                tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+                //alert(tmpsrc);
+                tmpw = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                tmph = ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8);
+                //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                editorBlocks.push({
+                    type: "image", data: {
+                        file: {
+                            url: BHOUSE_SERVER + editTarget + '/' + tmpsrc,
+                            width: parseInt(tmpw),
+                            height: parseInt(tmph),
+                        },
+                        caption: "小寶優居 | " + $('#ctitle').val(),
+                    }
+                });
+            }
+        }
+    }
+    /*     else {
+            editorBlocks.push({
+                type: "image", data: {
+                    file: {
+                        url: 'https://bhouse.com.tw/img/logo2.png',
+                        width: 300,
+                        height: 300,
+                    },
+                    caption: "小寶優居 | " + $('#ctitle').val(),
+                }
+            });
+        } */
+    //editor.api.blocks.render(editorBlocks);
+    $('#editorjs')[0].innerHTML = "";
+    //alert(editorBlocks);
+    editor = new EditorJS({
+        readOnly: false,
+        holder: 'editorjs',
+        tools: {
+            paragraph: { inlineToolbar: false },
+            image: {
+                class: ImageTool,
+                config: {
+                    endpoints: {
+                        byFile: '/backstage/upload' + $('#curl').val(),
+                        byUrl: '/backstage/getimage' + $('#curl').val(),
+                    }
+                }
+            }
+        }
+        , data: { blocks: editorBlocks }
+        ,
+        onReady: function () {
+            //alert(editor.blocks.getBlocksCount());
+            //saveButton.click();
+        },
+        onChange: function (api, block) {
+            //$('#cimage')[0].val();
+            //console.log('something changed', block);
+        }
+    });
+
+    //類別
+    Object.entries(SwfType).forEach(([key, value]) => {
+        if ($("#ctype").val() == key) {
+            //alert($("#ctype").val());
+            $("#swfDropdown").val($("#ctype").val());
+        }
+    });
+
+    //敘述
+    $("#swfDesc").val("");
+    if ($("[class='description']", aa).length > 0) {
+        $("#swfDesc").val($(".description", aa)[0].innerHTML.trim().replaceAll('<b>', '').replaceAll('</b>', ''));
+    }
+    //alert(editorBlocks);
+    //其他
+    $("#swfPrice").val("");
+    $("#swfColor").val("");
+    $("#swfSize").val("");
+    $("#swfMat").val("");
+    $("#swfMemo").val("");
+    if ($("[class='detail']", aa).length > 0) {
+        onodes = $("[class='detail']", aa)[0].childNodes;
+        for (i = 0; i < onodes.length; i++) {
+            if (onodes[i].nodeName != "#text") {
+                if (onodes[i].innerHTML.trim().indexOf("定價 ： ") >= 0)
+                    $("#swfPrice").val(onodes[i].innerHTML.replace("定價 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("顏色 ： ") >= 0)
+                    $("#swfColor").val(onodes[i].innerHTML.replace("顏色 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("尺寸(mm) ： ") >= 0)
+                    $("#swfSize").val(onodes[i].innerHTML.replace("尺寸(mm) ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("材質 ： ") >= 0)
+                    $("#swfMat").val(onodes[i].innerHTML.replace("材質 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("備註 ： ") >= 0)
+                    $("#swfMemo").val(onodes[i].innerHTML.replace("備註 ： ", "").trim());
+                //alert(nodes[i].innerHTML);
+            }
+        }
+    }
+
+    //處理規格圖片
+    if ($("[class='spec']", aa).length > 0) {
+        snodes = $("[class='spec']", aa)[0].childNodes;
+        //alert(snodes[0].innerHTML);
+        for (i = 0; i < snodes.length; i++) {
+            var tmpsrc, tmpw, tmph, ampimg;
+            if (snodes[i].nodeName == "AMP-IMG") {
+                ampimg = snodes[i].outerHTML;
+                tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+                tmpw = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                tmph = ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8);
+                //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                editorBlocks1.push({
+                    type: "image", data: {
+                        file: {
+                            url: BHOUSE_SERVER + editTarget + '/' + tmpsrc,
+                            width: parseInt(tmpw),
+                            height: parseInt(tmph),
+                        },
+                        caption: "小寶優居 | " + $('#ctitle').val(),
+                    }
+                });
+            }
+        }
+    }
+    /* else {
+        editorBlocks1.push({
+            type: "image", data: {
+                file: {
+                    url: 'https://bhouse.com.tw/img/logo2.png',
+                    width: 300,
+                    height: 300,
+                },
+                caption: "小寶優居 | " + $('#ctitle').val(),
+            }
+        });
+    } */
+    $('#editorjs1')[0].innerHTML = "";
+    editor1 = new EditorJS({
+        readOnly: false,
+        holder: 'editorjs1',
+        tools: {
+            paragraph: { inlineToolbar: false },
+            image: {
+                class: ImageTool,
+                config: {
+                    endpoints: {
+                        byFile: '/backstage/upload' + $('#curl').val(),
+                        byUrl: '/backstage/getimage' + $('#curl').val(),
+                    }
+                }
+            }
+        }
+        , data: { blocks: editorBlocks1 }
+        ,
+        onReady: function () {
+            //saveButton.click();
+        },
+        onChange: function (api, block) {
+            //console.log('something changed', block);
+        }
+    });
+    //$('.image-tool__caption').css('display', 'none');
+}
+
+function GenProductSection(mimg, specimg) {
+
+    section = document.createElement('section')
+    tmpstr = `<section class="section44 mb-5">
+    <div class="container">
+      <div class="mb-5">
+        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/##ctype##">##ctypec##</a> > <a href="##curl##">##ctitle##</a>
+      </div>
+      <div class="row">
+        <div class="col-md-5 col-sm-12">
+          <div class="block">
+            <div class="section-title text-center">
+              <amp-carousel
+                id="carousel-with-preview"
+                width="300"
+                height="300"
+                layout="responsive"
+                type="slides"
+                autoplay
+                delay="2500"
+                role="region"
+                aria-label="小寶優居 | ##ctitle##"
+              >
+##AMP-IMG##
+              </amp-carousel>
+              <div class="mt-3 carousel-preview">
+##PREV-IMG##
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-7 col-sm-12">
+          <div class="block ms-md-5 mb-5">
+            <div class="title mb-4"><b>##ctitle##</b></div>
+            <div class="description">
+<b>##swfDesc##</b>
+            </div>
+            <hr>
+            <div class="detail">
+##swfPrice##
+##swfColor##
+##swfSize##
+##swfMat##
+##swfMemo##
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
+          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        </div>
+      </div>
+##SPEC-IMG##
+</div>
+  </section>`;
+
+    tmpstr = tmpstr.replaceAll('##ctitle##', $("#ctitle").val());
+    tmpstr = tmpstr.replaceAll('##ctype##', $("#ctype").val());
+    tmpstr = tmpstr.replaceAll('##curl##', $("#curl").val());
+    Object.entries(SwfType).forEach(([key, value]) => {
+        if ($("#ctype").val() == key)
+            tmpstr = tmpstr.replaceAll('##ctypec##', value);
+    });
+    tmpstr = tmpstr.replaceAll('##swfDesc##', $("#swfDesc").val());
+    if ($("#swfPrice").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfPrice##', "<div>定價 ： " + $("#swfPrice").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfPrice##', '<span></span>');
+    if ($("#swfColor").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfColor##', "<div>顏色 ： " + $("#swfColor").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfColor##', '<span></span>');
+    if ($("#swfSize").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfSize##', "<div>尺寸(mm) ： " + $("#swfSize").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfSize##', '<span></span>');
+    if ($("#swfMat").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfMat##', "<div>材質 ： " + $("#swfMat").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfMat##', '<span></span>');
+    if ($("#swfMemo").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfMemo##', "<div>備註 ： " + $("#swfMemo").val() + "</div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfMemo##', '<span></span>');
+
+    mimgstr = "";
+    firstimg = true;
+    for (i = 0; i < mimg.blocks.length; i++) {
+        //alert(block.type);
+        block = mimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                if (firstimg) {
+                    $("#cimage").val($("#curl").val() + '/' + iurl[iurl.length - 1]);
+                    firstimg = false;
+                }
+                mimgstr += '<amp-img\n  alt="小寶優居 | ' + $("#ctitle").val()
+                    + '"\n  src="' + iurl[iurl.length - 1]
+                    + '"\n  height="' + block.data.file.height
+                    + '"\n  width="' + block.data.file.width
+                    + '"\n  layout="responsive">\n</amp-img>';
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##AMP-IMG##', mimgstr == "" ? "" : mimgstr);
+
+    previmgstr = "";
+    for (i = 0; i < mimg.blocks.length; i++) {
+        //alert(block.type);
+        block = mimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                previmgstr += (previmgstr == "" ? "" : '\n') + `<button on="tap:carousel-with-preview.goToSlide(index=` + i + `)">
+            <amp-img
+              src="`+ iurl[iurl.length - 1] + `"
+              width="40"
+              height="40"
+              alt="`+ block.data.caption + `"
+            ></amp-img>
+          </button>`;
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##PREV-IMG##', previmgstr == "" ? "" : previmgstr);
+
+    specimgstr = "";
+    for (i = 0; i < specimg.blocks.length; i++) {
+        //alert(block.type);
+        block = specimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                specimgstr += '<amp-img\n  alt="小寶優居 | ' + $("#ctitle").val()
+                    + '"\n  src="' + iurl[iurl.length - 1]
+                    + '"\n  height="' + block.data.file.height
+                    + '"\n  width="' + block.data.file.width
+                    + '"\n  layout="responsive">\n</amp-img>';
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##SPEC-IMG##', specimgstr == "" ? "" : '<div class="spec"><div class="mb-4"><b>尺寸規格</b></div>' + specimgstr + '</div>');
+
+    return tmpstr;
+
+}
+
+class MDParser {
+
+    constructor(MDtext) {
+        this.headerText = "";
+        this.contentText = "";
+        this.title = "";
+        this.date = new Date();
+        this.draft = true;
+        this.type = "";
+        this.url = "";
+        this.image = "";
+        this.description = "";
+        this.weight = 1;
+        this.tag = [];
+        for (var line of MDtext.split('\n')) {
+            //console.log(line);
+        }
+    }
+
+
+}
+
+

backstage/static/js/parsers.js

@@ -0,0 +1,91 @@
+function parseMd(content) {
+  var frontMatters = [];
+  var blockCount;
+  var preDataIndex;
+  var parseBlockDiv;
+  var preImgObject = { 'image': {} };
+  var isNotFrontMatterCount = 0;
+  var isAmpImgRange = false;
+  var result = [];
+
+  for (const line of content.split('\n')) {
+    if (isNotFrontMatterCount < 2) {
+      frontMatters.push(line)
+      if (line.includes('---')) {
+        isNotFrontMatterCount += 1;
+      }
+      continue;
+    }
+
+    if (isAmpImgRange === true && !(line.includes('</amp-img>'))) {
+      imgParamObject = parseAmpImg(line);
+      preImgObject.image = { ...preImgObject.image, ...imgParamObject };
+      continue;
+    }
+
+    if (line.includes('###')) {
+      parseBlockDiv = true;
+      preDataIndex = 0;
+      blockCount = blockCount + 1 | 0;
+      const preBlockindex = blockCount;
+      const title = parseTitle(line);
+      result[preBlockindex] = { title: title };
+
+    } else if (line.includes('amp-img')) {
+      const preBlockindex = blockCount;
+      if (line.includes('</amp-img>')) {
+        addDataToBlockArray(preImgObject, result, preBlockindex, preDataIndex);
+        isAmpImgRange = false;
+        preImgObject = { 'image': {} }
+        preDataIndex += 1;
+        continue;
+      }
+      isAmpImgRange = true;
+    } else {
+      if (parseBlockDiv === undefined) {
+        // for skipping space before first title
+        continue
+      }
+      if (line === '') {
+        // for skipping space
+        continue
+      }
+      const preBlockindex = blockCount;
+      const ownDataIndex = preDataIndex;
+      preDataIndex += 1;
+      //addDataToBlockArray({ description: { text: line } }, result, preBlockindex, ownDataIndex);
+      addDataToBlockArray({ text: line }, result, preBlockindex, ownDataIndex);
+    }
+  }
+  alert(JSON.stringify(result));
+  return { frontMatters: frontMatters, preBlockArray: result }
+}
+
+const parseTitle = line => {
+  var title = '';
+  title = line.replace('### **', '');
+  title = title.replace('**', '');
+  if (title.includes('敘述')) {
+    title = title.replace('<!-- ', '');
+    title = title.replace('-->', '');
+  }
+  return title;
+};
+
+const parseAmpImg = line => {
+  if (line.includes('alt')) {
+    const altParameter = line.replace(/ |alt=|"/g, '');
+    return { alt: altParameter };
+  } else if (line.includes('src')) {
+    const srcParameter = line.replace(/ |src=|"/g, '');
+    return { src: srcParameter };
+  } else if (line.includes('height')) {
+    const heightParameter = line.replace(/ |height=|"/g, '');
+    return { height: heightParameter };
+  } else if (line.includes('width')) {
+    const widthParameter = line.replace(/ |width=|"/g, '');
+    return { width: widthParameter };
+  } else if (line.includes('layout')) {
+    const layoutParameter = line.replace(/ |layout=|"|>/g, '');
+  }
+}

backstage/static/js/sidebar.js

@@ -0,0 +1,76 @@
+$('#body-row .collapse').collapse('hide'); 
+
+// Collapse/Expand icon
+$('#collapse-icon').addClass('fa-angle-double-left'); 
+
+// Collapse click
+$('[data-toggle=sidebar-colapse]').click(function() {
+  SidebarCollapse();
+});
+
+const toTopButton = document.querySelector('.toTop');
+
+function SidebarCollapse () {
+  const collapseFlag = true;
+  $('.list-group i').toggleClass('menu-icon');
+  $('.menu-collapsed').toggleClass('d-none');
+  $('.sidebar-submenu').toggleClass('d-none');
+  $('.submenu-icon').toggleClass('d-none');
+  $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed col-2 col-1');
+  $('.main').toggleClass('col-10 col-11');
+  
+  
+  // Treating d-flex/d-none on separators with title
+  var SeparatorTitle = $('.sidebar-separator-title');
+  if ( SeparatorTitle.hasClass('d-flex') ) {
+      SeparatorTitle.removeClass('d-flex');
+  } else {
+      SeparatorTitle.addClass('d-flex');
+  }
+  
+  // Collapse/Expand icon
+  $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
+}
+
+  // Scroll To Top
+window.addEventListener('scroll', autoFade);
+toTopButton.addEventListener('click', scrollTop);
+function scrollTop() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}
+
+// To Top Button Display
+function autoFade() {
+  if(document.body.scrollTop >= 300 || document.documentElement.scrollTop >= 300) {
+    toTopButton.style.display = 1;
+  } else {
+    toTopButton.style.display = 0;
+  }
+}
+
+  // Show Font Text
+const txtcut = document.querySelectorAll('.txt__cut');
+for(let i = 0; i < txtcut.length;i++) {
+  if(txtcut[i].textContent.length > 16) {
+    txtcut[i].textContent = txtcut[i].textContent.slice(0, 60).concat(['...']);
+  }
+}
+
+//  Open Table Button
+const btn__opentab = document.querySelectorAll('.btn__opentab');
+const form__action = document.querySelectorAll('.form__action');
+
+for(let i = 0; i < btn__opentab.length;i++) {
+  btn__opentab[i].addEventListener('click', function() {
+    $(this).next().toggleClass('autoHeight');
+    if($(this).children().hasClass('fa-chevron-down')) {
+      $(this).children().removeClass();
+      $(this).children().addClass('fas fa-chevron-up');
+    } else {
+      $(this).children().removeClass();
+      $(this).children().addClass('fas fa-chevron-down');
+    }
+  })
+}
+

backstage/static/js/utils.js

@@ -0,0 +1,29 @@
+function removeImgElement(img, input, widthInput, heightInput, inputButton, removeButton) {
+  img.remove();
+  input.remove();
+  widthInput.remove();
+  heightInput.remove();
+  inputButton.remove();
+  removeButton.remove();
+}
+
+function removeImgData(blockArray, blockIndex, dataIndex, contentUrl) {
+  const removeData = blockArray[blockIndex].data.splice(dataIndex, 1);
+  const filename = _.get(removeData, '0.image.src').replace('img/', '')
+  axios.delete(`${PORTAL_SERVER}delete/img?url=${contentUrl}&filename=${filename}`)
+  return blockArray;
+}
+
+function removeDescElement(textArea, inputButton, removeButton) {
+  textArea.remove();
+  inputButton.remove();
+  removeButton.remove();
+}
+
+function removeDescData(blockArray, blockIndex, dataIndex) {
+  blockArray[blockIndex].data.splice(dataIndex, 1);
+}
+
+const contentUrl = () => {
+  return BHOUSE_SERVER + (JSON.parse(document.getElementById('url').textContent)).url + '/';
+}

backstage/static/js/yo.js

@@ -0,0 +1,793 @@
+contentApiUrl = `${PORTAL_SERVER}contents?url=`;
+frontMatters = [];
+contentMatters = [];
+tagOptionIds = ['thousetype', 'tpinsize', 'tbudget', 'troomscount'];
+
+var SwfType = {};
+if (location.pathname.indexOf('system_furniture') >= 0) {
+    SwfType = {
+        "custom_made_system_cabinet": "客製模組系統櫃",
+        "system_cabinet": "模組系統櫃單品",
+    };
+}
+else {
+    SwfType = {
+        "sofa":"沙發",
+        "cabinet":"電視櫃",
+        "desk":"書桌/工作桌",
+        "dining_chair":"餐椅/中島椅",
+        "dining_table":"餐桌",
+        "mattress":"床組",
+        "other_furniture":"其他單品設計",
+        "side_cabinet":"邊櫃/邊几",
+        "side_table":"茶几",
+        "wardrobe":"衣櫃/收納櫃/中島",
+
+    };
+}
+
+//document.ready
+$(function () {
+
+    $("#dialog-form").hide();
+    if ($('#editorjs').length > 0)
+        editor = new EditorJS({
+            readOnly: false,
+            holder: 'editorjs',
+        });
+    if ($('#editorjs1').length > 0)
+        editor1 = new EditorJS({
+            readOnly: false,
+            holder: 'editorjs1',
+        });
+
+});
+
+function getHeader(url) {
+    axios.get(contentApiUrl + url).then(({ data }) => {
+        frontMatters = [];
+        contentMatters = [];
+        editTarget = url;
+        mdType = url.split('/')[1];
+        aa = data[0]['content'];
+        for (var toi of tagOptionIds) {
+            $('#' + toi).val("");
+        }
+        //const content = _.get(data, '0.content', '');
+        blocks = parseMd(aa);
+        oTitle = $("#ctitle").val();
+        // console.log($("#ctitle"));
+        // $("#dialog-form").dialog();
+        if ($("#ctype").val() == "collection") {
+            $("#scat").hide();
+        }
+        else if ($("#ctype").val() == "maincategories" || $("#ctype").val() == "blog") {
+            $("#sdesc").hide();
+        }
+        else if ($("#ctype").val() == "news") {
+            $("#sdesc").hide();
+            $("#scat").hide();
+            $("#simg").hide();
+        }
+        else {
+            ParseProductSection(contentMatters.join(''));
+        }
+        $("#myModal").modal();
+
+        //console.log(frontMatters);
+        //alert($('#cimage').val());
+    });
+}
+
+function toggleDraft(obj, url) {
+    axios.get(contentApiUrl + url).then(({ data }) => {
+        frontMatters = [];
+        contentMatters = [];
+        aa = data[0]['content'];
+        const content = _.get(data, '0.content', '');
+        blocks = parseMd(aa);
+        editTarget = url;
+        $('#cdraft').removeAttr('checked');
+        $('#cdraft').prop('checked', obj.checked);
+        updateHeader();
+        oTitle = "";
+    });
+}
+
+function updateHeader() {
+    /* if (oTitle != $('#ctitle').val() && $('#ctitle').val() != "" && oTitle != "") {
+      axios.get('/backstage/modTitle/' + oTitle + '/' + $('#ctitle').val()).then(({ data }) => {
+        if (data.success == "0") {
+          alert('已有重複的標題，請重新設定');
+          return;
+        }
+        else {
+          writeMd();
+        }
+      });
+    }
+    else {
+      writeMd();
+    } */
+    $("#uptbtn").attr('disabled', true);
+    writeMd();
+    // location.reload();
+}
+
+function writeMd() {
+
+    axios.get('/backstage/utils?trantext=' + $('#ccategories').val()).then(({ data }) => { $('#ccol1').val(data); })
+        .finally(() => {
+            mdContent = GetMdHeader();
+            mdContent += contentMatters.join("\n");
+            var formData = new FormData();
+            var imagefile = document.querySelector('#cfile');
+            formData.append("image", imagefile.files[0]);
+            axios.post('/backstage/upload/title', formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            }).then(({ data }) => {
+                $('#cfile').val("");
+                if (data.success == "1") {
+                    mdContent = mdContent.replace($('#cimage').val(), '/img/title/' + data.file.url.substring(data.file.url.lastIndexOf('/') + 1));
+                    //alert(data.file.url.substring(data.file.url.lastIndexOf('/')+1));
+                }
+
+                postData = {
+                    content: mdContent,
+                    url: editTarget
+                };
+                //console.log(mdContent);
+                axios.post(contentApiUrl + editTarget, json = postData).then(({ data }) => {
+                });
+            }).finally(() => {
+                alert('資料已更新'); // test
+                location.reload();
+            });
+
+        });
+}
+
+function parseMd(content) {
+    //var frontMatters = [];
+    var blockCount;
+    var preDataIndex;
+    var parseBlockDiv;
+    var preImgObject = { 'image': {} };
+    var isNotFrontMatterCount = 0;
+    var isAmpImgRange = false;
+    var result = [];
+
+    var rblocks = new Array();
+    lineIdx = 1;
+    foundImg = false;
+    foundYT = false;
+    foundTBL = false;
+    crossLine = "";
+
+    for (var line of content.split('\n')) {
+        lineIdx++;
+        if (isNotFrontMatterCount < 2) {
+            frontMatters.push(line)
+            if (line.includes('meta_title: ')) {
+                //alert(line);
+                $('#cmetattl').val(line.replace('meta_title: ', '').replaceAll('\"', ''));
+            }
+            else if (line.includes('title: ')) {
+                $('#ctitle').val(line.replace('title: ', '').replaceAll('\"', ''));
+                console.log($('#ctitle').val());
+                //alert($('#ctitle').val());
+            }
+            if (line.includes('date: ')) {
+                //alert(line);
+                $('#cdate').val(line.replace('date: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('draft: ')) {
+                //alert(line);
+                $('#cdraft').val(line.replace('draft: ', '').replaceAll('\"', ''));
+                //console.log($('#cdraft').val());
+                $('#cdraft').removeAttr('checked');
+                if ($('#cdraft').val() == 'false')
+                    $('#cdraft').prop('checked', true);
+                /*
+                if($('#cdraft').val() == 'true') 
+                    $('#cdraft').removeAttr('checked');
+                else
+                    $('#cdraft').attr('checked','true');
+                    */
+            }
+            if (line.includes('type: ')) {
+                //alert(line);
+                $('#ctype').val(line.replace('type: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('url: ')) {
+                //alert(line);
+                $('#curl').val(line.replace('url: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('image: ')) {
+                //alert(line);
+                $('#cimage').val(line.replace('image: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('meta_description: ')) {
+                //alert(line);
+                $('#cmetadsc').val(line.replace('meta_description: ', '').replaceAll('\"', ''));
+            }
+            else if (line.includes('description: ')) {
+                $('#cdescription').val(line.replace('description: ', '').replaceAll('\"', '').replaceAll('<br>', '\r\n'));
+                console.log($('#cdescription').val());
+            }
+            if (line.includes('weight: ')) {
+                //alert(line);
+                $('#cweight').val(line.replace('weight: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('tag: ')) {
+                //alert(line);
+                $('#ctag').val(line.replace('tag: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('tags: ')) {
+                //alert(line);
+                if ($('#ctags').length > 0) {
+                    $('#ctags').val(line.replace('tags: ', '').replaceAll('\"', ''));
+                    tags = $('#ctags').val().split(',');
+                    for (var tag of tags) {
+                        //console.log(tag);
+                        for (var toi of tagOptionIds) {
+                            $('#' + toi + ' option').each(function () {
+                                if (this.value == tag)
+                                    this.selected = true;
+                            });
+                        }
+                    }
+                }
+            }
+            if (line.includes('categories: ')) {
+                //alert(line);
+                $('#ccategories').val(line.replace('categories: ', '').replace('categories: ', '').replace(/\[|]/g, '').replace(/\"/g, ''));
+            }
+            /* if (line.includes('caturl: ')) {
+                //alert(line);
+                $('#ccaturl').val(line.replace('caturl: ', '').replaceAll('\"', ''));
+            } */
+            if (line.includes('col1: ')) {
+                //alert(line);
+                $('#ccol1').val(line.replace('col1: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('col2: ')) {
+                //alert(line);
+                $('#ccol2').val(line.replace('col2: ', '').replaceAll('\"', ''));
+            }
+            if (line.includes('introduction: ')) {
+                //alert(line);
+                $('#cintroduction').val(line.replace('introduction: ', '').replaceAll('\"', '').replaceAll('<br>', '\r\n'));
+            }
+            if (line.includes('question_box_intro: ')) {
+                //alert(line);
+                $('#cquestionboxintro').val(line.replace('question_box_intro: ', '').replaceAll('\"', ''));
+            }            
+            if (line.includes('---')) {
+                isNotFrontMatterCount += 1;
+            }
+            continue;
+        }
+        contentMatters.push(line)
+        /*         if (line.toString().trim() == "") {
+                    rblocks.push({ 'type': 'br', 'text': line });
+                    continue;
+                } */
+
+        if (line.includes('---')) {
+            rblocks.push({ 'type': 'mt5', 'text': line });
+            continue;
+        }
+
+        if (line.includes('##')) {
+            line = line.replaceAll('##', '')
+            rblocks.push({ 'type': 'title', 'text': line });
+            continue;
+        }
+
+        if (line.includes('{{% chuz-div class=\"mt-5\" %}}')) {
+            rblocks.push({ 'type': 'mt5', 'text': line });
+            continue;
+        }
+
+        if (line.includes('<img') || foundImg) {
+            crossLine += line;
+            foundImg = true;
+            if (line.includes('</img>')) {
+                rblocks.push({ 'type': 'img', 'text': crossLine });
+                foundImg = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        if (line.includes('<iframe') || foundYT) {
+            crossLine += line;
+            foundYT = true;
+            if (line.includes('</iframe>')) {
+                rblocks.push({ 'type': 'youtube', 'text': crossLine });
+                foundYT = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        if (line.includes('<table') || foundTBL) {
+            crossLine += line;
+            foundTBL = true;
+            if (line.includes('</table>')) {
+                rblocks.push({ 'type': 'table', 'text': crossLine });
+                foundTBL = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
+        if(line != "<p></p>" && line != "")
+        {
+            rblocks.push({ 'type': 'para', 'text': line });
+        }
+        else
+        {
+            console.log("Empty paragraph -- skipped.")
+        }
+    }
+    console.log(frontMatters);
+    return rblocks
+}
+
+function GetMdHeader() {
+    rContent = "";
+    rContent += '---\n';
+    rContent += 'meta_title: "' + $('#cmetattl').val() + '"\n';
+    rContent += 'meta_description: "' + $('#cmetadsc').val() + '"\n';
+    rContent += 'title: "' + $('#ctitle').val() + '"\n';
+    rContent += 'date: ' + $('#cdate').val() + '\n';
+    rContent += 'draft: ' + (!$('#cdraft').is(':checked')) + '\n';
+    rContent += 'type: "' + $('#ctype').val() + '"\n';
+    rContent += 'url: "' + $('#curl').val() + '"\n';
+    //mdContent += 'url: "' + $('#curl').val() + '"\n';
+    rContent += 'image: "' + $('#cimage').val() + '"\n';
+    if ($('#ctype').val() == "collection") {
+        rContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+        rContent += 'weight: ' + ($('#cweight').val() == 'undefined' ? "" : $('#cweight').val()) + '\n';
+
+        tags = [];
+        for (var toi of tagOptionIds) {
+            if ($('#' + toi).val() != "")
+                tags.push($('#' + toi).val());
+        }
+        rContent += 'tags: "' + tags.join(',') + '"\n';
+        //rContent += 'tags: "' + ($('#ctags').val() == 'undefined' ? "" : $('#ctags').val()) + '"\n';
+    }
+    else if ($('#ctype').val() == "blog" || $('#ctype').val() == "maincategories") {
+        rContent += 'categories: ["' + $('#ccategories').val() + '"]\n';
+        //rContent += 'caturl: "' + $('#ccaturl').val() + '"\n';
+        //rContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+        rContent += 'description: "' + $('#cdescription').val().replace(/\r?\n/g, '<br>') + '"\n';
+        rContent += 'col1: "' + ($('#ccol1').val() == 'undefined' ? "" : $('#ccol1').val()) + '"\n';
+        rContent += 'col2: "' + ($('#ccol2').val() == 'undefined' ? "" : $('#ccol2').val()) + '"\n';
+        rContent += 'introduction: "' + $('#cintroduction').val().replace(/\r?\n/g, '<br>') + '"\n';
+        rContent += 'question_box_intro: "' + $('#cquestionboxintro').val() + '"\n';
+        console.log($('#cdescription').val())
+    }
+    rContent += '---\n';
+    //alert(rContent);
+    // rContent.replaceAll('"',"&apos;"); # replace " with '' (two single quotes)
+
+    return rContent
+}
+
+const parseTitle = line => {
+    var title = '';
+    title = line.replace('### **', '');
+    title = title.replace('**', '');
+    if (title.includes('敘述')) {
+        title = title.replace('<!-- ', '');
+        title = title.replace('-->', '');
+    }
+    return title;
+};
+
+const parseAmpImg = line => {
+    if (line.includes('alt')) {
+        const altParameter = line.replace(/ |alt=|"/g, '');
+        return { alt: altParameter };
+    } else if (line.includes('src')) {
+        const srcParameter = line.replace(/ |src=|"/g, '');
+        return { src: srcParameter };
+    } else if (line.includes('height')) {
+        const heightParameter = line.replace(/ |height=|"/g, '');
+        return { height: heightParameter };
+    } else if (line.includes('width')) {
+        const widthParameter = line.replace(/ |width=|"/g, '');
+        return { width: widthParameter };
+    } else if (line.includes('layout')) {
+        const layoutParameter = line.replace(/ |layout=|"|>/g, '');
+    }
+}
+
+function tableTextToArray(tableHtml) {
+    tbl = document.createElement('table');
+    tbl.innerHTML = tableHtml.replace('<table>', '').replace('</table>', '');
+    var tableInfo = Array.prototype.map.call(tbl.querySelectorAll('tr'), function (tr) {
+        return Array.prototype.map.call(tr.querySelectorAll('td'), function (td) {
+            return td.innerHTML;
+        });
+    });
+    return tableInfo;
+}
+
+function tableArrayToHtml(tableArray) {
+    tbl = document.createElement('table');
+    for (j = 0; j < tableArray.length; j++) {
+        tr = document.createElement('tr');
+        for (k = 0; k < tableArray[j].length; k++) {
+            td = document.createElement('td');
+            if (k == 0)
+                td.style.width = "25%";
+            td.innerHTML = tableArray[j][k];
+            tr.appendChild(td);
+        }
+        tbl.appendChild(tr);
+    }
+    //alert(tbl.outerHTML.toString());
+    return tbl.outerHTML.toString();
+}
+
+function GenSwfDD(obj) {
+    Object.entries(SwfType).forEach(([key, value]) => {
+        op = document.createElement('option');
+        op.value = key;
+        op.text = value;
+        obj.appendChild(op);
+    });
+}
+
+function ReplaceSwfType(inContent) {
+    Object.entries(SwfType).forEach(([key, value]) => {
+        inContent = inContent.replaceAll('[' + key + ']', '[' + value + ']');
+    });
+    return inContent;
+}
+
+var editor;
+var editor1;
+editorBlocks = [];
+editorBlocks1 = [];
+function ParseProductSection(inContent) {
+    editorBlocks = [];
+    editorBlocks1 = [];
+    var aa = $.parseHTML(inContent.trim());
+    //處理圖片
+    if ($("[id='carousel-with-preview']", aa).length > 0) {
+        imgnodes = $("[id='carousel-with-preview']", aa)[0].childNodes;
+        for (i = 0; i < imgnodes.length; i++) {
+            var tmpsrc, tmpw, tmph, ampimg;
+            if (imgnodes[i].nodeName == "AMP-IMG") {
+                //alert(imgnodes[i].nodeName);
+                ampimg = imgnodes[i].outerHTML;
+                tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+                //alert(tmpsrc);
+                tmpw = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                tmph = ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8);
+                //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                editorBlocks.push({
+                    type: "image", data: {
+                        file: {
+                            url: BHOUSE_SERVER + editTarget + '/' + tmpsrc,
+                            width: parseInt(tmpw),
+                            height: parseInt(tmph),
+                        },
+                        caption: "小寶優居 | " + $('#ctitle').val(),
+                    }
+                });
+            }
+        }
+    }
+    /*     else {
+            editorBlocks.push({
+                type: "image", data: {
+                    file: {
+                        url: 'https://bhouse.com.tw/img/logo2.png',
+                        width: 300,
+                        height: 300,
+                    },
+                    caption: "小寶優居 | " + $('#ctitle').val(),
+                }
+            });
+        } */
+    //editor.api.blocks.render(editorBlocks);
+    $('#editorjs')[0].innerHTML = "";
+    //alert(editorBlocks);
+    editor = new EditorJS({
+        readOnly: false,
+        holder: 'editorjs',
+        tools: {
+            paragraph: { inlineToolbar: false },
+            image: {
+                class: ImageTool,
+                config: {
+                    endpoints: {
+                        byFile: '/backstage/upload' + $('#curl').val(),
+                        byUrl: '/backstage/getimage' + $('#curl').val(),
+                    }
+                }
+            }
+        }
+        , data: { blocks: editorBlocks }
+        ,
+        onReady: function () {
+            //alert(editor.blocks.getBlocksCount());
+            //saveButton.click();
+        },
+        onChange: function (api, block) {
+            //$('#cimage')[0].val();
+            //console.log('something changed', block);
+        }
+    });
+
+    //類別
+    Object.entries(SwfType).forEach(([key, value]) => {
+        if ($("#ctype").val() == key) {
+            //alert($("#ctype").val());
+            $("#swfDropdown").val($("#ctype").val());
+        }
+    });
+
+    //敘述
+    $("#swfDesc").val("");
+    if ($("[class='description']", aa).length > 0) {
+        $("#swfDesc").val($(".description", aa)[0].innerHTML.trim().replaceAll('<b>', '').replaceAll('</b>', ''));
+    }
+    //alert(editorBlocks);
+    //其他
+    $("#swfPrice").val("");
+    $("#swfColor").val("");
+    $("#swfSize").val("");
+    $("#swfMat").val("");
+    $("#swfMemo").val("");
+    if ($("[class='detail']", aa).length > 0) {
+        onodes = $("[class='detail']", aa)[0].childNodes;
+        for (i = 0; i < onodes.length; i++) {
+            if (onodes[i].nodeName != "#text") {
+                if (onodes[i].innerHTML.trim().indexOf("定價 ： ") >= 0)
+                    $("#swfPrice").val(onodes[i].innerHTML.replace("定價 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("顏色 ： ") >= 0)
+                    $("#swfColor").val(onodes[i].innerHTML.replace("顏色 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("尺寸(mm) ： ") >= 0)
+                    $("#swfSize").val(onodes[i].innerHTML.replace("尺寸(mm) ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("材質 ： ") >= 0)
+                    $("#swfMat").val(onodes[i].innerHTML.replace("材質 ： ", "").trim());
+                if (onodes[i].innerHTML.trim().indexOf("備註 ： ") >= 0)
+                    $("#swfMemo").val(onodes[i].innerHTML.replace("備註 ： ", "").trim());
+                //alert(nodes[i].innerHTML);
+            }
+        }
+    }
+
+    //處理規格圖片
+    if ($("[class='spec']", aa).length > 0) {
+        snodes = $("[class='spec']", aa)[0].childNodes;
+        //alert(snodes[0].innerHTML);
+        for (i = 0; i < snodes.length; i++) {
+            var tmpsrc, tmpw, tmph, ampimg;
+            if (snodes[i].nodeName == "AMP-IMG") {
+                ampimg = snodes[i].outerHTML;
+                tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+                tmpw = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                tmph = ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8);
+                //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
+                editorBlocks1.push({
+                    type: "image", data: {
+                        file: {
+                            url: BHOUSE_SERVER + editTarget + '/' + tmpsrc,
+                            width: parseInt(tmpw),
+                            height: parseInt(tmph),
+                        },
+                        caption: "小寶優居 | " + $('#ctitle').val(),
+                    }
+                });
+            }
+        }
+    }
+    /* else {
+        editorBlocks1.push({
+            type: "image", data: {
+                file: {
+                    url: 'https://bhouse.com.tw/img/logo2.png',
+                    width: 300,
+                    height: 300,
+                },
+                caption: "小寶優居 | " + $('#ctitle').val(),
+            }
+        });
+    } */
+    $('#editorjs1')[0].innerHTML = "";
+    editor1 = new EditorJS({
+        readOnly: false,
+        holder: 'editorjs1',
+        tools: {
+            paragraph: { inlineToolbar: false },
+            image: {
+                class: ImageTool,
+                config: {
+                    endpoints: {
+                        byFile: '/backstage/upload' + $('#curl').val(),
+                        byUrl: '/backstage/getimage' + $('#curl').val(),
+                    }
+                }
+            }
+        }
+        , data: { blocks: editorBlocks1 }
+        ,
+        onReady: function () {
+            //saveButton.click();
+        },
+        onChange: function (api, block) {
+            //console.log('something changed', block);
+        }
+    });
+    //$('.image-tool__caption').css('display', 'none');
+}
+
+function GenProductSection(mimg, specimg) {
+
+    section = document.createElement('div')
+    tmpstr = `<div class="furniture-design">
+    {{< furniture_design >}}
+    <div class="furniture_design_content">
+        <div class="sub-tab-content" id="pills-tabContent">
+            <div class="container px-0 design-container">
+                <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+                    <div class="slider-box">
+                        <div class="slider slider-for slider-design" id='carousel-with-preview'>
+                            ##AMP-IMG##
+                        </div>
+                        <div class="slider slider-nav mt-2" id='carousel-with-preview'>
+                            ##PREV-IMG##
+                        </div>
+                    </div>
+                    <div class="ms-2 fw-bold">
+                        <h3 class="mt-4">##ctitle##</h3>
+                        <p class="mb-5">##swfDesc##</p>
+                            ##swfPrice##
+                            ##swfColor##
+                            ##swfSize##
+                            ##swfMat##
+                            ##swfMemo##
+                    </div>
+                    </div> 
+                        ##SPEC-IMG##
+                        <h6 class="mt-4">說明</h6>
+                        <ul>
+                            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+                            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+                        </ul>
+                    <div class="mb-5">
+                        <a href="/furniture_design/other_furniture/">
+                            <p class="readMore text-center">
+                                <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到其他設計單品
+                            </p>
+                        </a>
+                    </div>  
+            </div>
+        </div>
+    </div>
+    </div>`;
+
+    tmpstr = tmpstr.replaceAll('##ctitle##', $("#ctitle").val());
+    tmpstr = tmpstr.replaceAll('##ctype##', $("#ctype").val());
+    tmpstr = tmpstr.replaceAll('##curl##', $("#curl").val());
+    Object.entries(SwfType).forEach(([key, value]) => {
+        if ($("#ctype").val() == key)
+            tmpstr = tmpstr.replaceAll('##ctypec##', value);
+    });
+    tmpstr = tmpstr.replaceAll('##swfDesc##', $("#swfDesc").val());
+    if ($("#swfPrice").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfPrice##', "<div class='me-3 my-2 d-flex'><div class='tw-15'>定價</div>"+ "<div class='tw-85'>"+ $("#swfPrice").val() + "</div></div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfPrice##', '<span></span>');
+    if ($("#swfColor").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfColor##', "<div class='my-2 d-flex'><div class='tw-15'>顏色</div>" + "<div class='tw-85'>" + $("#swfColor").val() + "</div></div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfColor##', '<span></span>');
+    if ($("#swfSize").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfSize##', "<div class='my-2 d-flex'><div class='tw-15'>尺寸</div>" + "<div class='tw-85'>" + $("#swfSize").val() + "</div></div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfSize##', '<span></span>');
+    if ($("#swfMat").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfMat##', "<div class='my-2 d-flex'><div class='tw-15'>材質</div>" + "<div class='tw-85'>" + $("#swfMat").val() + "</div></div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfMat##', '<span></span>');
+    if ($("#swfMemo").val() != "")
+        tmpstr = tmpstr.replaceAll('##swfMemo##', "<div class='my-2 d-flex'><div class='tw-15'>備註</div> " + "<div class='tw-85'>" + $("#swfMemo").val() + "</div></div>");
+    else
+        tmpstr = tmpstr.replaceAll('##swfMemo##', '<span></span>');
+
+    mimgstr = "";
+    firstimg = true;
+    for (i = 0; i < mimg.blocks.length; i++) {
+        //alert(block.type);
+        block = mimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            console.log(iurl);
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                if (firstimg) {
+                    $("#cimage").val($("#curl").val() + '/img/' + iurl[iurl.length - 1]);
+                    firstimg = false;
+                }
+                mimgstr += '<div class="design-img"><img\n  alt="小寶優居 | ' + $("#ctitle").val()
+                    + '"\n  src="img/' + iurl[iurl.length - 1]
+                    + '"\n  height="auto"\n  width="' + block.data.file.width
+                    + '"\n  layout="responsive">\n</img></div>';
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##AMP-IMG##', mimgstr == "" ? "" : mimgstr);
+
+    previmgstr = "";
+    for (i = 0; i < mimg.blocks.length; i++) {
+        //alert(block.type);
+        block = mimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                previmgstr += (previmgstr == "" ? "" : '\n') + ` <div class="middle-item">
+            <img
+              src="img/`+ iurl[iurl.length - 1] + `"
+              width="40"
+              height="auto"
+              alt="`+ block.data.caption + `"
+            ></img>
+          </div>`;
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##PREV-IMG##', previmgstr == "" ? "" : previmgstr);
+
+    specimgstr = "";
+    for (i = 0; i < specimg.blocks.length; i++) {
+        //alert(block.type);
+        block = specimg.blocks[i];
+        if (block.type == "image") {
+            iurl = block.data.file.url.split('/');
+            if (iurl[iurl.length - 1] != "logo2.png") {
+                specimgstr += '<img\n class="w-100 h-100" alt="小寶優居 | ' + $("#ctitle").val()
+                    + '"\n  src="img/' + iurl[iurl.length - 1]
+                    + '"\n >\n</img>';
+            }
+        }
+    }
+    tmpstr = tmpstr.replaceAll('##SPEC-IMG##', specimgstr == "" ? "" : '<div class="b-bottom pb-3 mb-5"><h6>尺寸規格</h6>' + specimgstr + '</div>');
+
+    return tmpstr;
+
+}
+
+class MDParser {
+
+    constructor(MDtext) {
+        this.headerText = "";
+        this.contentText = "";
+        this.title = "";
+        this.date = new Date();
+        this.draft = true;
+        this.type = "";
+        this.url = "";
+        this.image = "";
+        this.description = "";
+        this.weight = 1;
+        this.tag = [];
+        for (var line of MDtext.split('\n')) {
+            //console.log(line);
+        }
+    }
+
+
+}
+
+

backstage/static/styles/htmleditor.css

@@ -0,0 +1,322 @@
+/*!
+ * http://suyati.github.io/line-control
+ * LineControl 1.1.0
+ * Copyright (C) 2014, Suyati Technologies
+ * This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License along with this library; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
+ *
+*/
+
+@charset "utf-8";
+/* base styles */
+.jumbotron {
+   background-color: #67A754;
+  background-image: url(images/radial_bg.png);
+  background-position: center center;
+  background-repeat: no-repeat; 
+  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#B3ECFF), to(#7EDEFF)); /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
+  background: -webkit-radial-gradient(circle, #B3ECFF, #7EDEFF); /* Safari 5.1+, Chrome 10+ */
+  background: -moz-radial-gradient(circle, #B3ECFF, #7EDEFF); /* Firefox 3.6+ */
+  background: -ms-radial-gradient(circle, #B3ECFF, #7EDEFF); /* IE 10 */
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2) inset, 0 -3px 7px rgba(0, 0, 0, 0.2) inset;
+    color: #FFFFFF;
+    padding: 40px 0;
+    position: relative;
+    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.075);
+}
+.jumbotron h1{font-family: 'Roboto', sans-serif!important; font-size:45px;font-weight:300; border-bottom:1px solid rgba(255,255,255,0.4);padding-bottom:20px; }
+.jumbotron h1 span{color:rgba(0,0,0,0.4); }
+.jumbotron p {
+  font-family: 'Roboto', sans-serif!important;
+    font-size: 30px;
+    font-weight: 300;
+    line-height: 1.25;
+  color:#444;
+}
+
+.jumbotron .container {
+    position: relative;
+    z-index: 2;
+}
+.jumbotron:after {
+    background: url("../images/pattern.png") repeat scroll center center transparent;
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    opacity: 0.4;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.jumbotron:after {
+    background-size: 400px 400px;
+}
+.masthead {
+    color: #FFFFFF;
+    margin-bottom: 0;
+    padding: 30px 0 10px;
+}
+h2.demo-text{font-family: 'Roboto', sans-serif!important; font-size:45px; font-weight:300; color:#51D2FF; text-align:center; margin:20px 0; line-height:40px;}
+.features{padding:20px 0 10px 0;background:#EEE;font-family: 'Roboto', sans-serif!important; font-size:25px; line-height:35px; text-align:center;font-weight:300;}
+.footer{border-top:1px solid #DDD; margin:20px 0 10px 0; padding-top:10px; font-size:12px;}
+
+/* Editor Styles */
+
+.Editor-container{
+  margin-top:10px;
+  font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+  
+.line-control-menu-bar{
+   background-color: #f5f5f5;
+  *background-color: #e6e6e6;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  border: 1px solid #cccccc;
+  *border: 0;
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-bottom-color: #b3b3b3;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  *zoom: 1;
+      }
+  .line-control-status-bar{
+   background-color: #f5f5f5;
+  *background-color: #e6e6e6;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  border: 1px solid #cccccc;
+  *border: 0;
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-bottom-color: #b3b3b3;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  *zoom: 1;
+      }
+  
+.line-control-menu-bar{
+  border-radius:3px 3px 0 0;
+  border-bottom:none;
+  min-height:25px;
+  padding:5px 0;
+  }
+.line-control-menu-bar div:first-child{margin-left:3px;} 
+.line-control-menu-bar .dropdown{float:left;}
+.line-control-menu-bar .dropdown-toggle{font-size:14px; }
+.line-control-menu-bar .dropdown-toggle .caret{margin-left:5px; border-top-color:#999;}
+.line-control-menu-bar a.btn{position:relative; margin-bottom:3px;}
+#paletteCntr{}
+select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{height:auto; margin-bottom:10px;}
+  
+.line-control-status-bar{
+  min-height:30px;
+  border-radius:0 0 3px  3px;
+  border-top:none;
+  line-height:30px;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  }
+.line-control-status-bar .label{
+  float:right; 
+  margin:6px 10px 0 0; 
+  background:#BBB; 
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); 
+  padding: 2px 4px;
+  font-size: 11.844px;
+  line-height:14px;
+} 
+.Editor-editor{ 
+    height:300px;
+    padding:1%;  
+  border:1px solid #EEE;
+  border-radius:0;
+    word-wrap: break-word;
+  }
+#paletteCntr ul
+{    
+    width: 145px;
+    float: left;
+    z-index: 999;
+  margin:0 10px;
+}
+#paletteCntr li
+{
+    cursor: pointer;
+    display: block;
+    height: 16px;
+    float: left;
+    margin: 0;
+    padding: 0;
+    width: 16px;
+    margin:1px;
+}
+#paletteCntr li div{text-align:left; margin:0; font-size:12px;}
+div.activeColour
+{
+    position: absolute;
+    display: inline;
+    left: 0;
+    top:30px;
+    background:#E8E8E8;
+    padding-bottom:10px;
+    z-index:10000;
+          
+}
+#colorpellete, #bg_colorpellete{float:left;}
+
+.bg_activeColour
+{
+    position: absolute;
+    display: inline;
+    float: left;
+}
+
+.specialCntr
+{
+    background-color:#E8E8E8!important;
+    display:inline;
+    position:absolute;
+  width:176px;
+  top:30px;
+  left:0;
+}
+.specialCntr ul{float:left; margin:10px; white-space:normal; -webkit-padding-start: 0px; -moz-padding-start: 0px;}
+.specialCntr ul li{list-style:none; float:left; font-size:12px; width:20px; height:20px; background:#FFF; margin:3px; color:#333; text-align:center; font-weight:bold; cursor:pointer;}
+.specialCntr ul li:hover{background:#666; color:#FFF;}
+pre {
+  white-space: pre-wrap;       /* css-3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+.on{display:block; position:relative;}
+.fullscreen{position:fixed; background:#FFF; width:100%; height:100%; top:0; left:0; z-index:1000; margin:0;}
+.fullscreen .line-control-status-bar{position:fixed; bottom:0; border-top:1px solid #DDD;}
+.fullscreen #contentarea{border:none;}
+
+/***Custome Added Css for Left Tabs***/
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
+  border-bottom: 0;
+}
+.tabs-left ul{
+  -webkit-padding-start: 0px;
+  }
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
+  float: none;
+}
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
+  min-width: 74px;
+  margin-right: 0;
+  margin-bottom: 3px;
+}
+.tabs-left > .nav-tabs {
+  float: left;
+  margin-right: 19px;
+  border-right: 1px solid #ddd;
+}
+.tabs-left > .nav-tabs > li > a {
+  margin-right: -1px;
+  -webkit-border-radius: 4px 0 0 4px;
+     -moz-border-radius: 4px 0 0 4px;
+          border-radius: 4px 0 0 4px;
+}
+.tabs-left > .nav-tabs > li > a:hover,
+.tabs-left > .nav-tabs > li > a:focus {
+  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
+  outline:none;
+}
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover,
+.tabs-left > .nav-tabs .active > a:focus {
+  border-color: #ddd transparent #ddd #ddd;
+  *border-right-color: #ffffff;
+  color:rgb(0, 176, 245) !important;
+  outline:none;
+}
+/**form control width**/
+@-moz-document url-prefix() {
+   .form-control{
+  padding:6px 12px 10px 12px;
+  }
+}
+.form-control-width{
+  width:100px;
+  }
+.form-control-link{
+  width:204px;
+  display:inline-block;
+  margin-bottom:5px;
+  margin-right:5px;
+  }
+.form-control-button-right{
+  width:204px;
+  }
+.inline-form-control{
+  display:inline !important;
+  }
+
+.btn-group + .btn-group {
+  margin-left: 5px;
+}
+.activeColour ul{
+  -webkit-padding-start: 0px;
+  -moz-padding-start: 0px;
+  }
+h1{
+  margin-top:10px;
+  line-height:40px;
+  }
+.col-lg-6 nth:child(1){
+  margin-left:0px;
+  }
+.nopadding{
+  padding:0px;
+  }
+.nopadding-right{
+  padding-right:0px;
+  }
+.modal{
+  overflow-y:auto;
+  }
+.padding-top{
+  padding-top:10px;
+  }
+/*** Drop Down Menu***/
+.dropdown-submenu
+{position:relative;}
+.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
+.dropdown-submenu:hover>.dropdown-menu{display:block;}
+.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
+.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
+.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
+.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
+  color: #fff;
+  text-decoration: none;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top,#08c,#0077b3);
+  background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));
+  background-image: -webkit-linear-gradient(top,#08c,#0077b3);
+  background-image: -o-linear-gradient(top,#08c,#0077b3);
+  background-image: linear-gradient(to bottom,#08c,#0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0);
+}
+.dropdown-menu>li>a{
+  cursor:pointer;
+  }

backstage/static/styles/main.css

@@ -0,0 +1,522 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+/*-------------------------------- END ----*/
+
+/* editors layout*/
+.ui.segment {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+}
+
+.ui[class*="very relaxed"].grid {
+  margin-left:0.5rem;
+  margin-right:0.5rem;
+}
+.ui[class*="two column"].grid .column__edit {
+  box-shadow: 0px 0px 8px rgb(182, 181, 181);
+  -webkit-box-shadow: 0px 0px 8px rgb(182, 181, 181);
+  -moz-box-shadow: 0px 0px 8px rgb(182, 181, 181);
+  border-radius: 5px;
+  width: 49%!important;
+  margin-right: 2%;
+  padding: 1rem!important;
+}
+
+.ui[class*="two column"].grid .column__preview {
+  overflow: hidden;
+  box-shadow: 0px 0px 8px rgb(182, 181, 181);
+  -webkit-box-shadow: 0px 0px 8px rgb(182, 181, 181);
+  -moz-box-shadow: 0px 0px 8px rgb(182, 181, 181);
+  width: 49%!important;
+  border-radius: 5px;
+  padding: 1rem!important;
+}
+
+
+/* editors layout title*/
+.column__h3 {
+  font-size: 1.5rem;
+}
+
+/* blocks in editors */
+.blockDiv {
+  box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  -webkit-box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  -moz-box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  padding: 1rem;
+  border-radius: 5px;
+  height: 30vh;
+  overflow: hidden;
+  position: relative;
+}
+.blockDiv::before {
+  position: absolute;
+  width: 100%;
+  height: 25px;
+  content: '';
+  bottom: 0px;
+  left: 0;
+  z-index: 3;
+  background: -moz-linear-gradient(top, rgba(255,255,255,0.397) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
+  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.397) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
+  background: linear-gradient(to bottom,  rgba(255, 255, 255, 0.397) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
+}
+
+/* blocks title in editors */
+.blockDiv__h2 {
+  font-size: 1.3rem;
+}
+
+/* description textarea block */
+.descBlock {
+  margin: 1.5rem 0;
+}
+
+/* image block */
+.imgBlock {
+  margin-bottom: 1rem;
+}
+
+/* btns in blocks editor */
+[class^="btn__"] {
+  margin-right: 0.5rem;
+  padding: 0.5rem;
+  outline: none;
+  border: none;
+  transition: all 0.3s;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+[class^="btn__"]:hover {
+  background-color: rgb(211, 211, 211);
+}
+
+[class^="btn__"]:focus {
+  outline: none;
+}
+
+.btn__editOpen {
+  width: 2.5rem;
+  height: 2.5rem;
+  position: absolute;
+  right: 0px;
+  top: .5rem;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgb(179, 179, 179);
+  -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
+  -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
+}
+
+.btn__addimg {
+  border-radius: 50%;
+}
+
+.btn__imgEdit {
+  display: inline-block;
+}
+
+.btn__add {
+  border-radius: 50%;
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  position: relative;
+  transition: all 0.3s;
+}
+/*btn in modals*/
+.btn__submitadd {
+  background-color: rgb(179, 179, 179);
+  color: white;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  transition: all 0.3s;
+}
+
+.btn__submitadd:hover {
+  background-color: grey;
+}
+
+.btn__cancel {
+  background-color: white;
+}
+.btn__add i {
+  transition: all 0.3s;
+}
+
+.btn__add:hover i {
+  transform: translateX(-1.3rem);
+}
+
+.btn__add:hover {
+  width: 4rem;
+  border-radius: 30%;
+}
+
+.btn__add::after {
+  position: absolute;
+  content: "新增";
+  opacity: 0;
+  top: 0.7rem;
+  left: 20%;
+  width: 3rem;
+}
+
+.btn__add:hover::after {
+  opacity: 1;
+  transition: all 0.3s;
+}
+
+/* img in blocks editor */
+.img__container {
+  width: 100%;
+  height: 15rem;
+  margin-bottom: 0.5rem;
+}
+.img__container img {
+  object-fit: cover;
+  width:100%;
+  height: 100%;
+}
+
+/* input in blocks editor */
+.input {
+  outline: none;
+  border: 1.5px solid rgb(240, 240, 240);
+  padding: 0.5rem;
+  min-width: 20%;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  transition: all 0.3s;
+  border-radius: 5px;
+}
+
+.textarea {
+  padding: 5px;
+  width: 100%;
+  height: 8rem;
+  border: 2px solid rgb(240, 240, 240);
+  border-radius: 5px;
+  outline: none;
+  transition: all 0.3s;
+}
+.input:focus, .textarea:focus {
+  border: 1px solid grey;
+}
+
+/* upload button label */
+#file {
+  display: none;
+}
+
+label[for="file"] {
+  display: block;
+  width: 7rem;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  outline: none;
+  border: none;
+  border-radius: 10px;
+  background-color: rgb(224, 222, 222);
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+label[for="file"]:hover {
+  background-color: rgb(211, 211, 211);
+}
+
+
+/* btn in collections, blogs */
+.btn__edit {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgb(179, 179, 179);
+  -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
+  -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
+  padding: 0.5rem;
+  padding-left: 0.7rem;
+  color: black;
+  background-color: white;
+}
+.btn__edit i {
+  display: inline-block;
+  line-height: 24px;
+}
+.btn__edit:hover {
+  background-color: rgb(211, 211, 211);
+  color: black;
+}
+.btn__delete {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgb(179, 179, 179);
+  -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
+  -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
+  color: black;
+  margin-right: 0;
+  background-color: #E74C3C;
+}
+.btn__delete:hover {
+  background-color: #D0ECE7;
+}
+.btn__delete i {
+  color: white;
+}
+.btn__edit:active, .btn__edit:focus {
+  background-color: #b9bcbe;
+}
+.btn__delete:active, .btn__delete:focus {
+  background-color: #fc919c;
+}
+
+/* --- Table */ 
+.table .table__head {
+  text-align: center;
+  vertical-align: middle;
+}
+.table .table__data {
+  vertical-align: middle;
+  text-align: center;
+}
+.img__table {
+  width: 4.5rem;
+  height: 3rem;
+}
+
+/* toTop */
+.toTop {
+  position: fixed;
+  cursor: pointer;
+	right: 1%;
+  bottom: 2%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgb(252, 252, 252);
+  box-shadow: 0 0 6px rgb(179, 179, 179);
+  -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
+  -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toTop:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 3px rgb(179, 179, 179);
+  -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
+  -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
+}
+
+.toTop:active {
+  transform: translateY(2px);
+}
+
+.toTop i {
+  font-size: 1.6rem;
+  color: hsl(209, 11%, 57%);
+}
+
+/* functional class */
+.inline_block {
+  display: inline-block;
+}
+
+/* menu icons move left when collapsing */
+.menu-icon {
+  margin-left: 1.2rem;
+}
+
+/* -------sidebar */  
+#sidebar-container {
+  min-height: 100vh;
+  background-color: rgb(216, 215, 215);
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  position: fixed;
+}
+
+/* --------- sidebar list item*/
+#sidebar-container .list-group a {
+  height: 50px;
+  color: black;
+  line-height: 26px;
+}
+
+#sidebar-container .list-group .list-group-item {
+  border: none;
+  border-radius: 3rem;
+  transition: all 0.3s;
+}
+
+#sidebar-container .list-group .list-group-item .list-group-item i {
+  line-height: 26px;
+}
+
+/*sidebar header */
+#sidebar-container .sidebar-header {
+  background-image: url('../imgs/sidebar_\ backbround.jpeg');
+  height: 65px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  position: relative;
+}
+/* sidebar header company name */
+#sidebar-container .sidebar__company {
+  position: absolute;
+  bottom: 3px;
+  left: 0.5rem;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 2px;
+}
+
+/* ----------| Submenu item*/    
+.sidebar-submenu {
+  font-size: 0.9rem;
+}
+
+#sidebar-container .list-group .sidebar-submenu .list-group-item {
+  height: 45px;
+  padding-left: 30px;
+  line-height: 21px;
+  width: 80%;
+}
+
+/* ----------|bg-dark hover, active, focus, visited */   
+a.bg-dark, a.bg-dark:visited {
+  background-color: rgb(216, 215, 215)!important;
+}
+
+a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
+  background-color: rgb(179, 179, 179) !important;
+}
+/* --- Modal */ 
+
+.modal__label {
+  font-size: 1.1rem;
+  color: grey;
+  letter-spacing: 1px;
+}
+
+.modal__title {
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.form-control:focus {
+  border-color: rgb(179, 179, 179);
+  box-shadow: 1px 1px 4px 2px rgb(216, 215, 215);
+}
+
+.modal__close:focus {
+  outline: none;
+}
+
+.modal__close__back {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-color: gray;
+  border-radius: 50%;
+}
+
+.modal__close__back span {
+  line-height: 1.7rem;
+  color: white;
+}
+
+.modal__img {
+  width: 100%;
+  height: 100%;
+  margin-top: 1.5rem;
+}
+.modal__img img {
+  object-fit: cover;
+  width:100%;
+  height: 100%;
+}
+
+.modal__file::-webkit-file-upload-button {
+  border: none;
+  padding: .2em .4em;
+  border-radius: .2em;
+  background-color: rgb(216, 215, 215);
+  transition: 1s;
+}
+.modal__file::file-selector-button {
+  border: none;
+  padding: .2em .4em;
+  border-radius: .2em;
+  background-color: rgb(216, 215, 215);
+  transition: 1s;
+}
+/* ---Badge */ 
+.badge__txt {
+  color: #1e819c;
+  background-color: #d7eaf3;
+  padding: .3rem 1rem;
+}
+.badge__img {
+  color: #1cac23;
+  background-color: #c5ecc7;
+  padding: .3rem 1rem;
+}
+
+.badge__video {
+  color: #9c9e23;
+  background-color: #e3e4a8;
+  padding: .3rem 1rem;
+}
+
+/* --- Table Block 區塊 */ 
+.table__block {
+  padding: 1.5rem;
+  box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  -webkit-box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  -moz-box-shadow: 0px 0px 8px rgb(211, 211, 211);
+  border-radius: 10px;
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.btn__opentab {
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  width: 2.5rem;
+  height: 2.5rem;
+  position: absolute;
+  right: 0px;
+  top: 1rem;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgb(179, 179, 179);
+  -webkit-box-shadow: 0 0 6px rgb(179, 179, 179);
+  -moz-box-shadow: 0 0 6px rgb(179, 179, 179);
+}
+
+.btn__opentab i {
+  line-height: 1.5rem;
+}
+
+/* --- Form Height Toggle */ 
+.form__action {
+  height: 0vh;
+  overflow: hidden;
+}
+
+.autoHeight {
+  height: auto;
+}

backstage/static/styles/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

backstage/store_locations/routes.py

@@ -0,0 +1,75 @@
+from flask import render_template, Blueprint, request, redirect, url_for, flash
+import requests
+from os import path
+from time import sleep
+from backstage.utils import translate
+from backstage.config import PORTAL_SERVER
+from backstage.utils.routes import remove_content
+from backstage.config import BHOUSE_SERVER
+
+store_locations_app = Blueprint('store_locations', __name__)
+
+
+@store_locations_app.route('/backstage/store_location')
+def main():
+    response = requests.get('{}store_locations'.format(PORTAL_SERVER))
+    return render_template('store_location.html',
+                           title='門市據點',
+                           page='store_location',
+                           stores_data=response.json(),
+                           bhouse_server=BHOUSE_SERVER)
+
+
+@store_locations_app.route('/backstage/store_locations/create', methods=['POST'])
+def create():
+    def get_imgs():
+        imgs = []
+        for img_src in request.form.getlist('img-{}'.format(idx)):
+            imgs.append(img_src)
+        for f_img in request.files.getlist('image-{}'.format(idx)):
+            img_src = '/img/{}/{}'.format(type_, f_img.filename)
+            requests.post('{}statics/img?type={}&filename={}'.format(
+                PORTAL_SERVER, type_, f_img.filename), files={'image': f_img})
+            imgs.append(img_src)
+        return imgs
+
+    def get_district_name():
+        return translate(title.replace('門市', '')).lower().replace(' ', '_')
+
+    result = []
+    idx = 1
+    for title, type_, store, hour, phone, location, parking in zip(
+        request.form.getlist('title'), request.form.getlist('type'), request.form.getlist('store'),
+        request.form.getlist('hour'), request.form.getlist('phone'),
+        request.form.getlist('location'), request.form.getlist('parking')
+    ):
+        result.append({
+            'title': title, 'type': type_, 'imgs': list(get_imgs()), 'store': store,
+            'hour': hour, 'phone': phone, 'location': location, 'parking': parking,
+            'url': '/{}/bhouse_store_in_{}_city'.format(type_, get_district_name())
+        })
+        idx += 1
+    response = requests.post('{}store_locations'.format(PORTAL_SERVER), json=result)
+    if response.status_code == 200:
+        sleep(1)  # waiting for API upload image successfully.
+        flash('提交成功', 'success')
+    else:
+        flash('提交失敗', 'danger')
+    return redirect(url_for('store_locations.main'))
+
+
+@store_locations_app.route('/backstage/store_locations/remove_img', methods=['GET'])
+def remove_img():
+    response = requests.delete('{}statics/img?type={}&filename={}'.format(
+        PORTAL_SERVER, request.args.get('type'), path.basename(request.args.get('src'))))
+    if response.status_code == 200:
+        flash('移除照片成功', 'success')
+    else:
+        flash('移除照片失敗', 'danger')
+    return redirect(url_for('store_locations.main'))
+
+
+@store_locations_app.route('/backstage/store_locations/remove', methods=['POST'])
+def remove():
+    remove_content()
+    return redirect(url_for('store_locations.main'))

backstage/templates/about.html

@@ -0,0 +1,4 @@
+{% extends "layout.html" %}
+{% block main %}
+    <h1>Collection</h1>
+{% endblock main %}

backstage/templates/activity.html

@@ -0,0 +1,4 @@
+{% extends "layout.html" %}
+{% block main %}
+    <h1>Activity</h1>
+{% endblock main %}

backstage/templates/blogs.html

@@ -0,0 +1,160 @@
+{% extends "tables/editor_table.html" %}
+{% block table_body %}
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
+<script type="text/javascript" src="/static/js/yo.js"></script>
+{% for idx in range(0, length) %}
+{% if blogs[idx].url != '/blogs' %}
+<tbody>
+  <tr>
+    <td class="table__data">{{ idx+1 }}</td>
+    <td class="table__data">{{ blogs[idx].title }}</td>
+    <td class="table__data">{{ blogs[idx].date }}</td>
+    <td class="table__data"><input type="checkbox" {{ 'checked' if (blogs[idx].draft.lower()=='false' ) }}
+        onclick="toggleDraft(this,'{{ blogs[idx].url }}');" /></td>
+    <td>
+      <div class="d-flex justify-content-center">
+        <button class="btn btn_light mr-1" onclick="getHeader('{{ blogs[idx].url }}');"><b>主資訊</b> <i
+            class="fas fa-pencil-alt"></i></button>
+        <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=blogs[idx].url) }}"><i
+            class="fas fa-edit"></i></a>
+        <form action="{{ url_for('blogs.remove', url=blogs[idx].url) }}" method="POST" class="m-1 inline_block">
+          <button class="btn__delete" type="submit" value="delete" onclick=" return confirm('確定要刪除此專欄文章?');"><i
+              class="fas fa-trash-alt"></i></button>
+        </form>
+      </div>
+    </td>
+  </tr>
+</tbody>
+{% endif %}
+{% endfor %}
+{% endblock table_body %}
+{% block modal_body %}
+<form action="{{ url_for('blogs.create') }}" method="POST" enctype="multipart/form-data">
+  <div class="form-group">
+    {{ form.title.label(class="form-control-label modal__label mb-1") }} <span class="text-danger">(建議字數: 15字內)</span>
+    {{ form.title(class="form-control form-control-lg") }}
+    {{ form.image.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議尺寸/比例:
+      寬2664px * 高956px)</span>
+    {{ form.image(class="form-control form-control-lg modal__file") }}
+    {{ form.categories.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.categories(class="form-control form-control-lg") }}
+  </div>
+  <div class="modal-footer pb-0 border-0">
+    <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+    <input class="btn btn__submitadd" type="submit" value="完成">
+  </div>
+</form>
+{% endblock modal_body %}
+
+{% block main_info_modal_body %}
+<div class="modal fade" id="myModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <h4 class="modal-title">設計專欄-主資訊修改</h4>
+        <button type="button" class="close" data-dismiss="modal">×</button>
+      </div>
+
+      <div class="modal-body">
+        <table class="table table-bordered">
+          <tbody>
+            <tr>
+              <td>
+                <h4>標題</h4>
+              </td>
+              <td><input class="form-control" id="ctitle" type="text" />
+                <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>Meta標題</h4>
+              </td>
+              <td><input class="form-control" id="cmetattl" type="text" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>說明</h4>
+              </td>
+              <td><textarea class="form-control" id="cdescription" rows=2 type="paragraph"></textarea>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>Meta說明</h4>
+              </td>
+              <td><input class="form-control" id="cmetadsc" type="text" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>圖片</h4>
+              </td>
+              <td>
+                <input class="form-control" id="cfile" type="file" />
+                <div class="mt-1 text-danger">(建議尺寸/比例: 寬2664px * 高956px)</div>
+              </td>
+            </tr>
+            <tr>
+            <tr id='scat'>
+              <td>
+                <h4>文章分類</h4>
+              </td>
+              <td><textarea class="form-control" rows="1" id="ccategories"></textarea>
+                <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>日期</h4>
+              </td>
+              <td><input class="form-control" id="cdate" type="text" /></td>
+            </tr>
+            <tr>
+              <td>
+                <h4>文章前言</h4>
+              </td>
+              <td><textarea class="form-control" id="cintroduction" type="paragraph"></textarea>
+                <div class="mt-1">文章前言說明</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>目錄說明</h4>
+              </td>
+              <td><input class="form-control" id="cquestionboxintro" type="text" />
+                <div class="mt-1">目錄使用，將說明本文章可以解決的問題</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>是否顯示</h4>
+              </td>
+              <td><input id="cdraft" type="checkbox"/></td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="d-none">
+          <input id="ctype" type="text" /><br />
+          <input id="curl" type="text" /><br />
+          <input id="cimage" type="text" /><br />
+          <input id="cweight" type="text" /><br />
+          <input id="ctag" type="text" /><br />
+          <input id="ccategories" type="text" /><br />
+          <input id="ccaturl" type="text" /><br />
+          <input id="ccol1" type="text" /><br />
+          <input id="ccol2" type="text" /><br />
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" id="uptbtn" class="btn btn-danger" onclick="updateHeader();">完成修改</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+{% endblock %}

backstage/templates/collections.html

@@ -0,0 +1,228 @@
+{% extends "tables/editor_table.html" %}
+{% block table_body %}
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
+<script type="text/javascript" src="/static/js/yo.js"></script>
+{% for idx in range(0, length) %}
+{% if collections[idx].url != '/collection' %}
+<tbody>
+  <tr>
+    <td class="table__data">{{ idx + 1 }}</td>
+    <td class="table__data">{{ collections[idx].title }}</td>
+    <td class="table__data">{{ collections[idx].date }}</td>
+    <!-- <td class="table__data">1</td> -->
+    <td class="table__data"><input type="checkbox" {{ 'checked' if (collections[idx].draft.lower()=='false' ) }}
+        onclick="toggleDraft(this,'{{ collections[idx].url }}');" /></td>
+    <td>
+      <div class="d-flex justify-content-center">
+        <button class="btn btn_light mr-1" onclick="getHeader('{{ collections[idx].url }}');"><b>主資訊</b> <i
+            class="fas fa-pencil-alt"></i></button>
+        <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=collections[idx].url) }}"><i
+            class="fas fa-edit"></i></a>
+        <form action="{{ url_for('collections.remove', url=collections[idx].url) }}" method="POST" method="POST"
+          class="m-1 inline_block">
+          <button class="btn__delete" type="submit" value="delete" onclick="return confirm('確定要刪除此作品?');"><i
+              class="fas fa-trash-alt"></i></button>
+        </form>
+      </div>
+    </td>
+  </tr>
+</tbody>
+{% endif %}
+{% endfor %}
+{% endblock table_body %}
+
+<!-- Modal -->
+{% block modal_body %}
+<form action="{{ url_for('collections.create') }}" method="POST" enctype="multipart/form-data">
+  <div class="form-group">
+    {{ form.title.label(class="form-control-label modal__label mb-1") }} <span class="text-danger">(建議字數: 15字內)</span>
+    {{ form.title(class="form-control form-control-lg") }}
+
+    {{ form.collectiontitle.label(class="form-control-label modal__label mb-1") }}
+    {{ form.collectiontitle(class="form-control form-control-lg") }}
+
+    {{ form.description.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議字數:
+      50字內)</span>
+    {{ form.collectiondesc(class="form-control form-control-lg textarea") }}
+
+    {{ form.image.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議尺寸/比例:
+      寬2048px * 高1365px)</span>
+    {{ form.image(class="form-control form-control-lg modal__file") }}
+
+    {{ form.description.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議字數:
+      50字內)</span>
+    {{ form.description(class="form-control form-control-lg textarea") }}
+
+    {{ form.tags.label(class="form-control-label modal__label mb-1") }}
+    {{ form.tags(class="form-control form-control-lg") }}    
+    
+    {{ form.coverimg.label(class="form-control-label modal__label mt-3 mb-1") }} <span class="text-danger">(建議尺寸/比例:
+      寬____px * 高____px)</span>
+    {{ form.coverimg(class="form-control form-control-lg modal__file") }}
+
+    {{ form.bannerimgtext.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.bannerimgtext(class="form-control form-control-lg") }}
+
+    {{ form.homeowner.label(class="form-control-label modal__label mt-3 mb-1") }} 
+    {{ form.homeowner(class="form-control form-control-lg") }}
+
+    {{ form.size.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.size(class="form-control form-control-lg") }}
+
+    {{ form.bednum.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.bednum(class="form-control form-control-lg") }}
+
+    {{ form.housetype.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.housetype(class="form-control form-control-lg") }}
+
+    {{ form.space.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.space(class="form-control form-control-lg") }}
+
+    {{ form.loc.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.loc(class="form-control form-control-lg") }}
+
+    {{ form.designer.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.designer(class="form-control form-control-lg") }}
+
+    {{ form.budget.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.budget(class="form-control form-control-lg") }}
+
+    {{ form.construction.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.construction(class="form-control form-control-lg") }}
+
+    {{ form.collectionslider.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.collectionslider(class="form-control form-control-lg modal__file") }}
+
+    {{ form.comment.label(class="form-control-label modal__label mt-3 mb-1") }}
+    {{ form.comment(class="form-control form-control-lg modal__file") }}
+    
+  </div>
+  <div class="modal-footer  pb-0 border-0">
+    <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+    <input class="btn btn__submitadd" type="submit" value="完成">
+  </div>
+</form>
+{% endblock modal_body %}
+
+{% block main_info_modal_body %}
+<div class="modal fade" id="myModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <h4 class="modal-title">作品集-主資訊修改</h4>
+        <button type="button" class="close" data-dismiss="modal">×</button>
+      </div>
+
+      <div class="modal-body">
+        <table class="table table-bordered">
+          <tbody>
+            <tr>
+              <td>
+                <h4>標題</h4>
+              </td>
+              <td><input class="form-control" id="ctitle" type="text" />
+                <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>Meta標題</h4>
+              </td>
+              <td><input class="form-control" id="cmetattl" type="text" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>Meta說明</h4>
+              </td>
+              <td><input class="form-control" id="cmetadsc" type="text" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>圖片</h4>
+              </td>
+              <td>
+                <input class="form-control" id="cfile" type="file" />
+                <div class="mt-1 text-danger">(建議尺寸/比例: 寬2048px * 高1365px)</div>
+              </td>
+            </tr>
+            <tr id='sdesc'>
+              <td>
+                <h4>描述</h4>
+              </td>
+              <td><textarea class="form-control" rows="3" id="cdescription"></textarea>
+                <div class="mt-1 text-danger">(建議字數: 50字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>日期</h4>
+              </td>
+              <td><input class="form-control" id="cdate" type="text" /></td>
+            </tr>
+            <tr>
+              <td>
+                <h4>類型</h4>
+              </td>
+              <td><select id="thousetype">
+                  <option value="">類型</option>
+                  <option>大樓</option>
+                  <option>透天</option>                  
+                </select></td>
+            </tr>
+            <tr>
+              <td>
+                <h4>坪數</h4>
+              </td>
+              <td><input class="form-control" id="tpinsize" type="text" /></td>
+            </tr>
+            <tr>
+              <td>
+                <h4>預算</h4>
+              </td>
+              <td><input class="form-control" id="tbudget" type="text" /></td>
+            </tr>
+            <tr>
+              <td>
+                <h4>格局</h4>
+              </td>
+              <td><select id="troomscount">
+                  <option value="">格局</option>
+                  <option>1房</option>
+                  <option>2房</option>
+                  <option>3房</option>
+                  <option>4房以上</option>
+                </select></td>
+            </tr>
+            <tr>
+              <td>
+                <h4>是否顯示</h4>
+              </td>
+              <td><input id="cdraft" type="checkbox" checked="true" /></td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="d-none">
+          <input id="ctype" type="text" /><br />
+          <input id="curl" type="text" /><br />
+          <input id="cimage" type="text" /><br />
+          <input id="cweight" type="text" /><br />
+          <input id="ctag" type="text" /><br />
+          <input id="ctags" type="text" /><br />
+          <input id="ccategories" type="text" /><br />
+          <input id="ccol1" type="text" /><br />
+          <input id="ccol2" type="text" /><br />
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" id="uptbtn" class="btn btn-danger" onclick="updateHeader();">完成修改</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+{% endblock %}

backstage/templates/contact_us.html

@@ -0,0 +1,44 @@
+{% extends "layout.html" %}
+{% block main %}
+<!-- <script type="text/javascript" src="/static/config.js"></script> -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
+<script type="text/javascript" src="/static/js/yo.js"></script>
+<table>
+    <tbody id='contactData'>
+        <h1 class="h3"><i class="fas fa-pen mr-3 mb-3"></i>{{ title }}</h1>
+        <tr>
+         
+            <!-- <td class="table__data">修改聯絡EMAIL</td> -->
+            修改聯絡EMAIL <span class="text-danger">(若輸入多數EMAIL，請以逗號 (,) 或分號 (;) 分隔，逗號或分號後請勿加空格)</span>
+            <td class="table__data"><input class="form-control" id="newEmail" type="text" style="width: 600px;" placeholder="修改聯絡EMAIL" /></td>
+            <td class="table__data"></td>
+            <!-- <td class="table__data">1</td> -->
+            <td class="table__data"></td>
+            <td>
+                <div class="d-flex justify-content-center">
+                    <button class="btn btn_light mr-1" onclick="modEmail($('#newEmail').val());"><b>儲存</b> <i
+                            class="fas fa-pencil-alt"></i></button>
+                </div>
+
+            </td>
+        </tr>
+
+    </tbody>
+</table>
+<script>
+    $(function(){
+        axios.get('/backstage/edit_contact_us_getemail').then(({ data }) => {
+            $('#newEmail').val(data);
+        });
+        
+    });
+
+    function modEmail() {
+        axios.get('/backstage/edit_contact_us_editemail?newemail='+$('#newEmail').val()).then(({ data }) => {
+            alert('已儲存');
+        }).finally((data) => { location.reload(); });
+    };
+
+</script>
+{% endblock main %}

backstage/templates/editor.html

@@ -0,0 +1,133 @@
+{% extends "layout.html" %}
+{% block main %}
+<div class="ui segment">
+  <div class="ui two column very relaxed grid">
+    <!-- <div class="column column__edit"> -->
+    <div class="container col-sm-12 col-md-8">
+      <button id='submit_button' class="btn__submit mb-3" onclick="editorSave();"><b>編輯完成</b></button>
+      <h3 style='display: none;' class="h3 column__h3"><i class="fas fa-user-edit mr-1 mb-2"></i> 作品編輯</h3>
+      <table class="table table-bordered">
+        <tbody>
+          <tr style='display: none;'>
+            <td>
+              <h4>標題</h4>
+            </td>
+            <td><input class="form-control" id="ctitle" type="text" />
+              <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+            </td>
+          </tr>
+          <tr style='display: none;'>
+            <td>
+              <h4>描述</h4>
+            </td>
+            <td><textarea class="form-control" rows="3" id="cdescription"></textarea>
+              <div class="mt-1 text-danger">(建議字數: 50字內)</div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+
+      <div class="d-none">
+        <input id="cdate" type="text" /><br />
+        <input id="cdraft" type="text" /><br />
+        <input id="ctype" type="text" /><br />
+        <input id="curl" type="text" /><br />
+        <input id="cimage" type="text" /><br />
+        <input id="cweight" type="text" /><br />
+        <input id="ctag" type="text" /><br />
+        <input id="ctags" type="text" /><br />
+        <input id="ccategories" type="text" /><br />
+        <input id="ccaturl" type="text" /><br />
+        <input id="ccol1" type="text" /><br />
+        <input id="ccol2" type="text" /><br />
+      </div>
+
+      <!-- <div class="mb-2"> -->
+      <!-- title:<input id="ctitle" type="text" /><br />
+        date:<input id="cdate" type="text" /><br />
+        draft:<input id="cdraft" type="text" /><br />
+        type:<input id="ctype" type="text" /><br />
+        url:<input id="curl" type="text" /><br />
+        image:<input id="cimage" type="text" /><br />
+        description:<input id="cdescription" type="text" /><br />
+        weight:<input id="cweight" type="text" /><br />
+        tag:<input id="ctag" type="text" /><br /> -->
+      <!-- <button class="btn__arTitle mb-2" id="title_button">標題修改</button> -->
+      <!-- </div> -->
+
+      <h3 class="h3 column__h3"><i class="fa fa-file-text mr-2 mb-2"></i> 內容編輯</h3>
+      <!--<p class="card">
+        <div class="card-body">
+          標題 <span class="mt-1 text-danger">(建議字數: 15字內)</span>
+          <div><input class="form-control" id="ctitle" type="text" /></div>
+        </div>
+      </p>
+      <p class="card">
+        <div class="card-body">
+          說明
+          <div><textarea class="form-control" id="cdescription" rows=2 type="paragraph"></textarea></div>
+        </div>
+      </p>-->
+      <p class="card">
+        <div class="card-body">
+          Meta標題
+          <div><input class="form-control" id="cmetattl" type="text" /></div>
+        </div>
+      </p>
+      <p class="card">
+        <div class="card-body">
+          Meta說明
+          <div><input class="form-control" id="cmetadsc" type="text" /></div>
+        </div>
+      </p>
+      {% block extras %}{% endblock %}
+      <p class="card">
+        <div class="card-body">
+          文章內容
+          <div id="editorjs"></div>
+        </div>
+      </p>
+      <div id="editor_block"><span><button class="btn__arTitle mb-2"
+            id="add_title_button">+標題</button></span><span><button class="btn__arTitle mb-2"
+            id="add_img_button">+圖</button></span><span><button class="btn__arTitle mb-2"
+            id="add_para_button">+段落</button></span></span><span><button class="btn__arTitle mb-2"
+            id="add_hr_button">+換行</button></span><span><button class="btn__arTitle mb-2"
+            id="add_mt5_button">+mt5</button></span>
+      </div>
+      <br />
+      <div>
+        <button id='submit_button' class="btn__submit mb-3" onclick="editorSave();"><b>編輯完成</b></button>
+      </div>
+    </div>
+    <!-- <div class="column column__preview">
+      <h3 class="h3 column__h3"><i class="fas fa-eye mr-2"></i>預覽頁面</h3>
+      <iframe src='{{ bhouse_server }}{{ url }}/' width="100%" height="100%"></iframe>
+    </div> -->
+  </div>
+</div>
+<script type="text/json" id="url">{"url": "{{ url }}"}</script>
+<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script type="text/javascript" src="{{url_for('static', filename='config.js')}}"></script>
+<!-- <script type="text/javascript" src="{{url_for('static', filename='js/utils.js')}}"></script>
+<script type="text/javascript" src="{{url_for('static', filename='js/blockElements.js')}}"></script>
+<script type="text/javascript" src="{{url_for('static', filename='js/blockHandler.js')}}"></script> -->
+
+<!-- Load Editor.js's Core -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script> -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script>
+
+<script type="text/javascript" src="{{url_for('static', filename='js/yo.js')}}"></script>
+<script type="text/javascript" src="{{url_for('static', filename='js/editor.js')}}"></script>
+<script type="text/javascript" src="{{url_for('static', filename='js/table.js')}}"></script>
+<script>//alert('yo');</script>
+</div>
+{% endblock main %}

backstage/templates/editorblog.html

@@ -0,0 +1,15 @@
+{% extends "editor.html" %}
+{% block extras %}
+      <p class="card">
+        <div class="card-body">
+          前言：文章前言說明
+          <div><textarea class="form-control" id="cintroduction" rows=5 type="paragraph"></textarea></div>
+        </div>
+      </p>
+      <p class="card">
+        <div class="card-body">
+          目錄說明：目錄使用，將說明本文章可以解決的問題
+          <div><input class="form-control" id="cquestionboxintro" type="text" /></div>
+        </div>
+      </p>
+{% endblock extras %}

backstage/templates/frequently_asked_questions.html

@@ -0,0 +1,296 @@
+{% extends "layout.html" %}
+{% block main %}
+<script type="text/javascript" src="{{url_for('static', filename='config.js')}}"></script>
+<script type="text/javascript" src="/static/js/yo.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+<script type="text/javascript" src="/static/js/jquery.richtext.min.js"></script>
+<link rel="stylesheet" href="/static/styles/richtext.min.css">
+<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
+<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
+
+<div class="faq-content">
+    <div class="row px-0 mx-0">
+
+        <div class="col-lg-6">
+            <h1 class="h3"><i class="fas fa-pen mr-3 mb-3"></i>{{ title }}</h1>
+
+            <input id="curl" type="text" style="display: none;" />
+            <div>
+                <div>
+                    <ul id='qaData1'></ul>
+                </div>
+                <div class="text-center">
+
+                    <button style="border: none; background: none; outline: none;" onclick="addQa();"><i
+                            class="addfaq fas fa-plus-circle"></i></button>
+                </div>
+
+            </div>
+        </div>
+        <div class="col-lg-6">
+
+            <div class="card faq-editor p-3">
+                <div class="text-right mb-3">
+                    <i class="close_edit_faq fas fa-times"></i>
+                </div>
+                <input type="text" class="form-control mb-3 w-100" id="input_q"
+                    placeholder="EX:小寶優居的規劃師服務和一般的室內設計有什麼不同嗎？" />
+                <div><textarea id='input_a'></textarea></div>
+                <div class="mt-4 d-flex justify-content-end">
+                    <div>
+                        <!-- <button class="btn faq-btn" onclick="addQa();">新增</button> -->
+                        <!-- <button class="btn faq-btn" onclick="saveQa();">修改項目</button> -->
+                        <button class="btn faq-btn" onclick="removeQa();">移除項目</button>
+                        <button class="btn faq-btn" onclick="writeAllQa();">完成儲存</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<style>
+    .addfaq {
+        color: #ADB5BD;
+        font-size: 32px;
+        cursor: pointer;
+        transition: all 0.3s;
+
+    }
+
+    .addfaq:hover {
+        color: grey;
+
+    }
+
+    .close_edit_faq {
+        font-size: 24px;
+        cursor: pointer;
+    }
+
+    .faq-editor {
+        position: sticky !important;
+        top: 21px;
+    }
+
+    #qaData1 li {
+        vertical-align: center;
+        list-style-type: none;
+    }
+
+    ul {
+        padding-inline-start: 0px !important;
+    }
+
+    #qaData1 tr {
+        border: inset 2px
+    }
+
+    #qaData1 td {
+        vertical-align: top;
+        padding: 0.475rem 0.475rem;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        font-size: 1rem;
+        /* border-collapse: unset; */
+        cursor: pointer;
+    }
+
+    table {
+        border-collapse: unset;
+        width: 100%;
+    }
+
+    .faq-btn {
+        background-color: rgb(179, 179, 179);
+        color: white;
+        transition: all 0.3s;
+        margin-right: 5px;
+    }
+
+    .faq-btn:hover {
+        background-color: grey;
+    }
+</style>
+<script>
+
+    var editor, targetItem, faqContent;
+    qa = [];
+    $(function () {
+        editor = $("#input_a").richText();
+        axios.get(contentApiUrl + '/frequently_asked_questions').then(({ data }) => {
+            parseMd(data[0]['content']);
+            //alert(contentMatters.join(''));
+            faqContent = $.parseHTML(contentMatters.join(''));
+            //處理圖片
+            if ($("[id='myAccordion']", faqContent).length > 0) {
+                fnodes = $("[id='myAccordion']", faqContent)[0].childNodes;
+                for (i = 0; i < fnodes.length; i++) {
+                    if (fnodes[i].nodeName == "SECTION") {
+                        //qa.push({ q: fnodes[i].childNodes[1].innerText.trim(), a: fnodes[i].childNodes[3].innerHTML.trim() });
+                        k = 0;
+                        for (j = 0; j < fnodes[i].childNodes.length; j++) {
+                            if (fnodes[i].childNodes[j].nodeName == "DIV") {
+                                if (k == 0) {
+                                    qa.push({ q: fnodes[i].childNodes[j].innerText.trim() });
+                                    k++;
+                                }
+                                else {
+                                    qa[qa.length - 1].a = fnodes[i].childNodes[j].innerHTML.trim();
+                                }
+                                /* if (fnodes[i].childNodes[j].className == "question") {
+                                    //alert(fnodes[i].childNodes[j].childNodes[1].nodeValue.trim());
+                                    qa.push({ q: fnodes[i].childNodes[j].childNodes[1].nodeValue.trim() });
+                                } */
+                            }
+                        }
+                    }
+                }
+                //alert(qa.length);
+                for (i = 0; i < qa.length; i++) {
+                    //$('#qaData').append("<tr><td>" + qa[i].q + "</td><td>" + qa[i].a + "</td></tr>");
+                    $('#qaData1').append("<li class='mb-1' data-si='" + i + "''><table><tr class='qa_q'><td>" + qa[i].q + "</td></tr><tr class='qa_a'><td>" + qa[i].a + "</td></tr></table></li>");
+
+                }
+                $('.qa_a').hide();
+                $('.qa_q').click(setTarget);
+                /* $('.qa_q').dblclick(function () {
+                    //alert($(this).next()[0].childNodes[0].innerHTML);
+                    //$('#editorjs')[0].innerHTML = "";
+                    //$('.qa_a').hide();
+                    //$(this).next().toggle();
+                    $('.qa_q').css("background-color", "white");
+                    $(this).css("background-color", "lightpink");
+                    targetItem = $(this);
+                    $("#input_q").val($(this).children().html());
+                    $("#input_a").val($(this).next().children().html()).trigger('change');
+                    $('html, body').animate({ scrollTop: '0px' }, 300);
+                    //$("#editor")[0].outerHTML = "<textarea id='editor'></textarea>";
+                    //$("#editor").val($(this).next()[0].childNodes[0].innerHTML);
+                    //editor = $("#editor").richText();
+                    //$(this).next().append("<div id='editorjs'></div>");
+                }); */
+
+                //editor = $("textarea").richText();
+                fromIdx = 0;
+                $('#qaData1').sortable(/* {
+                    start: function (event, ui) {
+                        fromIdx = ui.item.index();
+                    },
+                    stop: function (event, ui) {
+                        //toIndex = ui.item.attr("data-si");
+                        var element = qa[fromIdx];
+                        qa.splice(fromIdx, 1);
+                        qa.splice(ui.item.index(), 0, element);
+                        //alert(fromIdx + ',' + ui.item.index());
+                    },
+                } */);
+            }
+        });
+
+    });
+    $(".faq-editor").hide();
+
+
+    function setTarget() {
+        $(".faq-editor").fadeIn();
+        $('.qa_q').css("background-color", "white");
+        $(this).css("background-color", "lightpink");
+        targetItem = $(this);
+        $("#input_q").val($(this).children().html());
+        $("#input_a").val($(this).next().children().html()).trigger('change');
+        // $('html, body').animate({ scrollTop: '0px' }, 300);
+    }
+
+    $(".close_edit_faq").click(function () {
+        $(".faq-editor").fadeOut();
+    });
+
+
+
+
+
+
+
+
+
+
+
+    // console.log(LastItem.lastChild.innerHTML);
+
+
+    function addQa() {
+        var a = $( "ul li:last-child" ).find('td').text();
+        console.log(a);
+  
+        if( a=="" ){
+            // alert('1');
+            alert("請輸入問題");
+            $("#input_q").focus();
+
+            return
+        }
+
+        $('#qaData1').append("<li data-si='" + i + "''><table><tr class='qa_q'><td></td></tr><tr class='qa_a'><td></td></tr></table></li>");
+        $('.qa_a').hide();
+        $('.qa_q').click(setTarget);
+        $(".qa_q").trigger("click");
+        $("#input_q").focus();
+
+        // QaItem.lastChild.innerHTML.triggerHandler('click');
+
+    };
+
+    function saveQa() {
+        targetItem.children().html($("#input_q").val());
+        targetItem.next().children().html($("#input_a").val());
+    };
+
+    function removeQa() {
+        // targetItem.parent().parent().parent().remove()
+        var r = confirm("確定要刪除此作品?");
+        if (r == true) {
+            targetItem.parent().parent().parent().remove();
+            writeAllQa();
+            $(".faq-editor").fadeOut();
+        }
+    };
+
+
+    function writeAllQa() {
+
+        targetItem.children().html($("#input_q").val());
+        targetItem.next().children().html($("#input_a").val());
+
+        if ($('#input_q').val() == "") {
+            alert("請輸入問題");
+            $("#input_q").focus();
+
+            return
+        }
+
+        qa = [];
+        for (i = 0; i < $('#qaData1 .qa_q').length; i++) {
+            qa.push({ q: $('#qaData1 .qa_q')[i].childNodes[0].innerHTML, a: $('#qaData1 .qa_a')[i].childNodes[0].innerHTML });
+        }
+        newFaqItemContent = "";
+        for (i = 0; i < qa.length; i++) {
+            newFaqItemContent += "<section><div class='question'><i class='fa fa-angle-down'></i>" + qa[i].q + "</div><div>" + qa[i].a + "</div></section>";
+        }
+        $("[id='myAccordion']", faqContent).html(newFaqItemContent);
+
+        mdContent = frontMatters.join('\n') + '\n' + faqContent[0].outerHTML
+        //alert(mdContent);
+        postData = {
+            content: mdContent,
+            url: $('#curl').val()
+        };
+        axios.post(contentApiUrl + $('#curl').val(), json = postData).then(({ data }) => {
+            alert('作品資料已儲存');
+        });
+        //alert(faqContent.outerHTML);
+    }
+
+</script>
+{% endblock main %}

backstage/templates/home.html

@@ -0,0 +1 @@
+{% extends "tables/manage_table.html" %}

backstage/templates/layout.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Required meta tags -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <!-- Bootstrap CSS -->
+  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
+  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+    integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+  <!--   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/reset.css') }}"> -->
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/main.css') }}">
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js'></script>
+
+  <style>
+    .outerDiv {
+      box-sizing: border-box;
+    }
+  </style>
+  {% if title %}
+  <title>bhouse backstage - {{ title }}</title>
+  {% else %}
+  <title>bhouse backstage</title>
+  {% endif %}
+</head>
+
+<body>
+  <div class="container-fluid">
+    <div class="row" id="body-row">
+      <!-- Sidebar -->
+      <nav id="sidebar-container" class="sidebar-expanded col-2 sidebar">
+        <!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
+        <div class="sidebar-header">
+          <h3 class="sidebar__company">小寶優居</h3>
+        </div>
+        <!-- Bootstrap List Group -->
+        <ul class="list-group pt-2">
+          <!-- /END Separator -->
+          <!-- Menu with submenu -->
+          <!-- <a href="{{ url_for('home.home') }}"
+            class="bg-dark list-group-item list-group-item-action flex-column align-items-start">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-home mr-3"></i>
+              <span class="menu-collapsed">首頁</span>
+              <span class="submenu-icon ml-auto"></span>
+            </div>
+          </a> -->
+          <a href="{{ url_for('collections.collection_list') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-ruler-combined mr-3"></i>
+              <span class="menu-collapsed">規劃作品</span>
+            </div>
+          </a>
+          <a href="{{ url_for('blogs.blog_list') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="far fa-newspaper mr-3"></i>
+              <span class="menu-collapsed">設計專欄</span>
+            </div>
+          </a>
+          <a href="{{ url_for('blogs.edit_solid_wood_furniture') }}"
+            class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="far fa-newspaper mr-3"></i>
+              <span class="menu-collapsed">單品家具</span>
+            </div>
+          </a>
+          <!--<a href="{{ url_for('blogs.edit_system_furniture') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="far fa-newspaper mr-3"></i>
+              <span class="menu-collapsed">模組系統櫃</span>
+            </div>
+          </a>-->
+          <a href="{{ url_for('blogs.edit_news') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="far fa-newspaper mr-3"></i>
+              <span class="menu-collapsed">最新消息</span>
+            </div>
+          </a>
+          <!-- <a href="{{ url_for('room_planner.main') }}"
+            class="bg-dark list-group-item list-group-item-action flex-column align-items-start">
+            <div class=" d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-user-alt mr-3"></i>
+              <span class="menu-collapsed">家具規劃師</span>
+              <span class="submenu-icon ml-auto"></span>
+            </div>
+          </a> -->
+          <!-- <a href="{{ url_for('store_locations.main') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-location-arrow mr-3"></i>
+              <span class="menu-collapsed">門市據點</span>
+            </div>
+          </a> -->
+          <a href="{{ url_for('blogs.edit_faq') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-question-circle mr-3"></i>
+              <span class="menu-collapsed">常見問題</span>
+            </div>
+          </a>
+          <!-- <a href="#" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="fas fa-tasks mr-3"></i>
+              <span class="menu-collapsed">關於小寶</span>
+            </div>
+          </a> -->
+          <a href="{{ url_for('blogs.edit_contact_us') }}" class="bg-dark list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <i class="far fa-newspaper mr-3"></i>
+              <span class="menu-collapsed">聯絡我們</span>
+            </div>
+          </a>
+          <!-- Separator with title -->
+          <a href="#" data-toggle="sidebar-colapse"
+            class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
+            <div class="d-flex w-100 justify-content-start align-items-center">
+              <span id="collapse-icon" class="fa fa-2x mr-3"></span>
+              <span id="collapse-text" class="menu-collapsed">收合</span>
+            </div>
+          </a>
+        </ul><!-- List Group END-->
+      </nav><!-- sidebar-container END -->
+      <!-- Modal -->
+      <div>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        {% for category, message in messages %}
+        <div class="alert alert-{{ category }}" role="alert">
+          {{ message }}
+          <button type="button" class="close modal__close" data-dismiss="alert" aria-label="Close">
+            <span class="modal__close__back">
+              <span aria-hidden="true">&times;</span>
+            </span>
+          </button>
+        </div>
+        {% endfor %}
+        {% endif %}
+        {% endwith %}
+      </div>
+      <!-- Main -->
+      <div class="main my-4 ml-auto col-10">
+        {% block main %}{% endblock %}
+      </div>
+      <!-- toTop Button -->
+      <div class='toTop'>
+        <i class='fas fa-arrow-up'></i>
+      </div>
+    </div><!-- body-row END -->
+  </div><!-- container -->
+  </div>
+  <!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
+  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script>
+  <script type="text/javascript" src="{{url_for('static', filename='js/sidebar.js')}}"></script>
+</body>
+
+</html>

backstage/templates/news.html

@@ -0,0 +1,132 @@
+{% extends "tables/editor_table.html" %}
+{% block table_body %}
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
+<script type="text/javascript" src="/static/js/yo.js"></script>
+{% for idx in range(0, length) %}
+{% if news[idx].url != '/news' %}
+<tbody>
+  <tr>
+    <td class="table__data">{{ idx+1 }}</td>
+    <td class="table__data">{{ news[idx].title }}</td>
+    <td class="table__data">{{ news[idx].date }}</td>
+    <td class="table__data"><input type="checkbox" {{ 'checked' if (news[idx].draft.lower()=='false' ) }}
+        onclick="toggleDraft(this,'{{ news[idx].url }}');" /></td>
+    <td>
+      <div class="d-flex justify-content-center">
+        <button class="btn btn_light mr-1" onclick="getHeader('{{ news[idx].url }}');"><b>主資訊</b> <i
+            class="fas fa-pencil-alt"></i></button>
+        <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=news[idx].url) }}"><i
+            class="fas fa-edit"></i></a>
+        <form action="{{ url_for('blogs.removeNews', url=news[idx].url) }}" method="POST" class="m-1 inline_block">
+          <button class="btn__delete" type="submit" value="delete" onclick=" return confirm('確定要刪除此文章?');"><i
+              class="fas fa-trash-alt"></i></button>
+        </form>
+      </div>
+    </td>
+  </tr>
+</tbody>
+{% endif %}
+{% endfor %}
+{% endblock table_body %}
+{% block modal_body %}
+<form action="{{ url_for('blogs.createNews') }}" method="POST" enctype="multipart/form-data">
+  <div class="form-group">
+    {{ form.title.label(class="form-control-label modal__label mb-1") }} <span class="text-danger">(建議字數: 20字內)</span>
+    {{ form.title(class="form-control form-control-lg") }}
+  </div>
+  <div class="modal-footer pb-0 border-0">
+    <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+    <input class="btn btn__submitadd" type="submit" value="完成">
+  </div>
+</form>
+{% endblock modal_body %}
+
+{% block main_info_modal_body %}
+<div class="modal fade" id="myModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <h4 class="modal-title">最新消息-主資訊修改</h4>
+        <button type="button" class="close" data-dismiss="modal">×</button>
+      </div>
+
+      <div class="modal-body">
+        <table class="table table-bordered">
+          <tbody>
+            <tr>
+              <td>
+                <h4>標題</h4>
+              </td>
+              <td><input class="form-control" id="ctitle" type="text" />
+                <div class="mt-1 text-danger">(建議字數: 20字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>Meta標題</h4>
+              </td>
+              <td><input class="form-control" id="cmetattl" type="text" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>Meta說明</h4>
+              </td>
+              <td><input class="form-control" id="cmetadsc" type="text" />
+              </td>
+            </tr>
+            <tr id='simg'>
+              <td>
+                <h4>圖片</h4>
+              </td>
+              <td>
+                <input class="form-control" id="cfile" type="file" />
+                <div class="mt-1 text-danger">(建議尺寸/比例: 寬2664px * 高956px)</div>
+              </td>
+            </tr>
+            <tr>
+            <tr id='scat'>
+              <td>
+                <h4>文章分類</h4>
+              </td>
+              <td><textarea class="form-control" rows="1" id="ccategories"></textarea>
+                <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>日期</h4>
+              </td>
+              <td><input class="form-control" id="cdate" type="text" /></td>
+            </tr>
+            <tr>
+              <td>
+                <h4>是否顯示</h4>
+              </td>
+              <td><input id="cdraft" type="checkbox" checked="true" /></td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="d-none">
+          <input id="ctype" type="text" /><br />
+          <input id="curl" type="text" /><br />
+          <input id="cimage" type="text" /><br />
+          <input id="cweight" type="text" /><br />
+          <input id="ctag" type="text" /><br />
+          <input id="ccategories" type="text" /><br />
+          <input id="ccaturl" type="text" /><br />
+          <input id="ccol1" type="text" /><br />
+          <input id="ccol2" type="text" /><br />
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" id="uptbtn" class="btn btn-danger" onclick="updateHeader();">完成修改</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+{% endblock %}

backstage/templates/room_planner.html

@@ -0,0 +1 @@
+{% extends "tables/manage_table.html" %}

backstage/templates/solid_wood_furniture.html

@@ -0,0 +1,258 @@
+{% extends "tables/editor_table.html" %}
+{% block table_body %}
+<!-- <script type="text/javascript" src="/static/config.js"></script> -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
+<script type="text/javascript" src="/static/js/yo.js"></script>
+<tbody id='swfData'>
+    {% for idx in range(0, length) %}
+    <tr>
+        <td class="table__data">{{ idx + 1 }}</td>
+        <td class="table__data">{{ furnitures[idx].title }}</td>
+        <td class="table__data">{{ furnitures[idx].date }}</td>
+        <!-- <td class="table__data">1</td> -->
+        <td class="table__data"><input type="checkbox" {{ 'checked' if (furnitures[idx].draft.lower()=='false' ) }}
+                onclick="toggleDraft(this,'{{ furnitures[idx].url }}');" /></td>
+        <td>
+            <div class="d-flex justify-content-center">
+                <button class="btn btn_light mr-1" onclick="getHeader('{{ furnitures[idx].url }}');"><b>修改</b> <i
+                        class="fas fa-pencil-alt"></i></button>
+                <button class="btn__delete" value="delete"
+                    onclick="if(confirm('確定要刪除?')) delfur('{{ furnitures[idx].url }}');"><i
+                        class="fas fa-trash-alt"></i></button>
+            </div>
+
+        </td>
+    </tr>
+    {% endfor %}
+</tbody>
+<script>$('#swfData')[0].innerHTML = ReplaceSwfType($('#swfData')[0].innerHTML);</script>
+{% endblock table_body %}
+
+
+{% block modal_body %}
+
+<div class="form-group">
+    <table class="table table-bordered">
+        <tbody>
+            <tr>
+                <td>
+                    <h4>名稱</h4>
+                </td>
+                <td>
+                    <input class="form-control" id="newSwfName" type="text" />
+                    <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <h4>類別</h4>
+                </td>
+                <td><select id="newSwfDropdown"></select></td>
+            </tr>
+        </tbody>
+    </table>
+    
+    <!-- 類別：<select id="newSwfDropdown"></select><br />
+    名稱：<input id="newSwfName" type="text" /><br /> -->
+
+    <!--     敘述：<input id="swfDesc" type="text" /><br />
+    <hr>
+    圖片：
+    <div id="editorjs" style='border:inset 1px;'></div>
+    <hr>
+    定價：<input id="swfPrice" type="text" /><br />
+    顏色：<input id="swfColor" type="text" /><br />
+    尺寸：<input id="swfSize" type="text" /><br />
+    材質：<input id="swfMet" type="text" /><br /> -->
+</div>
+<div class="modal-footer  pb-0 border-0">
+    <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+    <button type="button" class="btn btn__submitadd" onclick="newfur();">完成</button>
+</div>
+<script>GenSwfDD($('#newSwfDropdown')[0]);</script>
+<script>
+    function newfur() {
+        //alert('/backstage/new_solid_wood_furniture?newSwfDropdown='+ $('#newSwfDropdown').val() +'&newSwfName='+$('#newSwfName').val());
+        axios.get('/backstage/new_solid_wood_furniture?newSwfDropdown=' + $('#newSwfDropdown').val() + '&newSwfName=' + $('#newSwfName').val()).then((data) => { location.reload() });
+    }
+    function delfur(iurl) {
+        //alert('/backstage/new_solid_wood_furniture?newSwfDropdown='+ $('#newSwfDropdown').val() +'&newSwfName='+$('#newSwfName').val());
+        axios.get('/backstage/del_solid_wood_furniture?url=' + iurl).then((data) => { location.reload() });
+    }
+</script>
+{% endblock modal_body %}
+
+{% block main_info_modal_body %}
+<style>
+    .image-tool__caption {
+        display: none;
+    }
+</style>
+<div class="modal fade" id="myModal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h4 class="modal-title">單品家具-修改</h4>
+                <button type="button" class="close" data-dismiss="modal">×</button>
+            </div>
+
+            <div class="modal-body">
+                <table class="table table-bordered">
+                    <tbody>
+                        <tr>
+                            <td>
+                                <h4>名稱</h4>
+                            </td>
+                            <td>
+                                <input class="form-control" id="ctitle" type="text" />
+                                <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                              <h4>Meta標題</h4>
+                            </td>
+                            <td><input class="form-control" id="cmetattl" type="text" />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>
+                              <h4>Meta說明</h4>
+                            </td>
+                            <td><input class="form-control" id="cmetadsc" type="text" />
+                            </td>
+                          </tr>
+                        <tr>
+                            <td>
+                                <h4>類別</h4>
+                            </td>
+                            <td><select id="swfDropdown" onchange="$('#ctype').val(this.value);" disabled></select></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>敘述</h4>
+                            </td>
+                            <td>
+                                <textarea class="form-control" rows="3" id="swfDesc" type="text" style="width: 100%;"></textarea>
+                                <div class="mt-1 text-danger">(建議字數: 50字內)</div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>日期</h4>
+                            </td>
+                            <td><input class="form-control" id="cdate" type="text" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>是否顯示</h4>
+                            </td>
+                            <td><input id="cdraft" type="checkbox" checked="true" /></td>
+                        </tr>
+                        <tr>
+                            <td colspan="2"> </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>單品圖</h4>
+                            </td>
+                            <td>
+                                <div class="form-control" id="editorjs" style='border:inset 1px;'></div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>定價</h4>
+                            </td>
+                            <td><input class="form-control" id="swfPrice" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>顏色</h4>
+                            </td>
+                            <td><input class="form-control" id="swfColor" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>尺寸(mm)</h4>
+                            </td>
+                            <td><input class="form-control" id="swfSize" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>材質</h4>
+                            </td>
+                            <td><input class="form-control" id="swfMat" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>備註</h4>
+                            </td>
+                            <td><input class="form-control" id="swfMemo" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>規格圖</h4>
+                            </td>
+                            <td>
+                                <div class="form-control" id="editorjs1" style='border:inset 1px;'></div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <div class="d-none">
+                    <input class="form-control" id="cfile" type="file" />
+                    <input id="ctype" type="text" /><br />
+                    <input id="curl" type="text" /><br />
+                    <input id="cimage" type="text" /><br />
+                    <input id="cweight" type="text" /><br />
+                    <input id="ctag" type="text" /><br />
+                    <input id="ccategories" type="text" /><br />
+                    <input id="ccol1" type="text" /><br />
+                    <input id="ccol2" type="text" /><br />
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn__submitadd" id='addNewButton'
+                    onclick="UpdateProduct();">完成</button>
+                <!-- <button type="button" id="uptbtn" class="btn btn-danger" onclick="updateHeader();">完成修改</button> -->
+            </div>
+
+        </div>
+    </div>
+</div>
+<script>GenSwfDD($('#swfDropdown')[0]);</script>
+<script>
+
+    function UpdateProduct() {
+        editor.save().then((mimg) => {
+            sectionContent = "";
+            editor1.save().then((specimg) => {
+                sectionContent = GenProductSection(mimg, specimg);
+
+                var mdContent = GetMdHeader();
+                
+                mdContent += '\n' + sectionContent;
+                //GenProductSection(outputData);
+                postData = {
+                    content: mdContent,
+                    url: editTarget
+                };
+
+                /* alert(contentApiUrl);
+                alert(editTarget); */
+                //alert(mdContent);
+                axios.post(contentApiUrl + editTarget, json = postData).then(({ data }) => {
+                    alert('作品資料已儲存');
+                }).finally((data) => { location.reload(); });
+            });
+        }).catch((error) => {
+            console.log('Saving failed: ', error)
+        })
+    };
+</script>
+{% endblock %}

backstage/templates/store_location.html

@@ -0,0 +1,158 @@
+{% extends "layout.html" %}
+{% block main %}
+<h1 class="h3"><i class="fas fa-pen mr-2"></i>{{ title }}</h1>
+{% for part, stores in stores_data.items() %}
+<div>
+  <form action="{{ url_for('store_locations.create') }}" method="POST" enctype="multipart/form-data">
+    {% if part == "north" %}
+      <h2>北部門市</h2>
+    {% elif part == "central" %}
+      <h2>中部門市</h2>
+    {% elif part == "south" %}
+      <h2>南部門市</h2>
+    {% elif part == "east" %}
+      <h2>東部門市</h2>
+    {% endif %}
+    <table id="store_locations_table" class="table table__content mb-0" cellspacing="0" width="60%">
+      <thead>
+        <tr>
+          <th class="table__head">數量</th>
+          <th class="table__head">區域</th>
+          <th class="table__head">門市</th>
+          <th class="table__head">營業時間</th>
+          <th class="table__head">門市電話</th>
+          <th class="table__head">門市地點</th>
+          <th class="table__head">停車資訊</th>
+          <th class="table__head">輪播照片</th>
+          <th style="text-align:center;width:100px;">
+            <button type="button" class="btn__add m-1" data-toggle="modal" data-target="#createModal">
+              <i class="fas fa-plus"></i>
+            </button>
+          </th>
+        </tr>
+      </thead>
+      {% for store in stores %}
+        {% set store_idx = loop.index %}
+        <tbody>
+          <tr>
+            <td class="table__data">{{ loop.index }}</td>
+            <td class="table__data">{{ store.title }}</td>
+            <td class="table__data">{{ store.store }}</td>
+            <td class="table__data">{{ store.hour }}</td>
+            <td class="table__data">{{ store.phone }}</td>
+            <td class="table__data">{{ store.location }}</td>
+            <td class="table__data">{{ store.parking }}</td>
+            <td class="table__data">
+              {% for img_src in store.imgs %}
+                <img src="{{ bhouse_server }}/{{ img_src }}" width="80px" height="50px">
+                <input name="img-{{ store_idx }}" type='hidden' value="{{ img_src }}">
+                <a class="btn btn-secondary btn-sm m-1" href="{{ url_for('store_locations.remove_img', type=store.type, src=img_src) }}">
+                  移除
+                </a>
+              {% endfor %} 
+            </td>
+            <td>
+              <div class="d-flex justify-content-center">
+                <button type="button" class="btn__edit  m-2">
+                  <i class="fas fa-edit"></i>
+                </button>
+                <form action="{{ url_for('store_locations.remove', url=store.url) }}" method="POST">
+                  <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+                </form>
+                <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
+                  <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                      <div class="modal-header border-0">
+                        <h5 class="modal-title modal__title" id="createModalLabel">新增據點</h5>
+                        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+                          <span class="modal__close__back">
+                            <span aria-hidden="true">&times;</span>
+                          </span>
+                        </button>
+                      </div>
+                      <div class="modal-body">
+                        <input name="type" type="hidden" value="{{ store.type }}" readonly>
+                        <label for="title">區域</label>
+                        <input name="title" class="form-control form-control-lg" value="{{ store.title }}">
+                        <label for="store">門市</label>
+                        <input name="store" class="form-control form-control-lg" value="{{ store.store }}">
+                        <label for="hour">營業時間</label>
+                        <input name="hour" class="form-control form-control-lg" value="{{ store.hour }}">
+                        <label for="phone">門市電話</label>
+                        <input name="phone" class="form-control form-control-lg" value="{{ store.phone }}">
+                        <label for="location">門市地點</label>
+                        <input name="location" class="form-control form-control-lg" value="{{ store.location }}">
+                        <label for="parking">停車資訊</label>
+                        <input name="parking" class="form-control form-control-lg" value="{{ store.parking }}">
+                        <label for="image">輪播照片上傳</label>
+                        <input type="file" name="image-{{ store_idx }}" accept="image/*" multiple>
+                        <div class="modal-footer pb-0 border-0">
+                          <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                          <input class="btn btn__submitadd" type="submit" value="完成">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      {% endfor %}
+    </table>
+  </form>
+</div>
+{% endfor %}
+<!-- Modal -->
+<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header border-0">
+        <h5 class="modal-title modal__title" id="createModalLabel">新增據點</h5>
+        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+          <span class="modal__close__back">
+            <span aria-hidden="true">&times;</span>
+          </span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <form action="{{ url_for('store_locations.create') }}" method="POST" enctype="multipart/form-data">
+          <label for="type">分佈</label>
+          <br/><select id="type" name="type">
+            <option value="store_north">北部</option>
+            <option value="store_central">中部</option>
+            <option value="store_south">南部</option>
+            <option value="store_east">東部</option>
+          </select> <br/>
+          <label for="title">區域</label>
+          <input name="title" class="form-control form-control-lg">
+          <label for="store">門市</label>
+          <input name="store" class="form-control form-control-lg">
+          <label for="hour">營業時間</label>
+          <input name="hour" class="form-control form-control-lg">
+          <label for="phone">門市電話</label>
+          <input name="phone" class="form-control form-control-lg">
+          <label for="location">門市地點</label>
+          <input name="location" class="form-control form-control-lg">
+          <label for="parking">停車資訊</label>
+          <input name="parking" class="form-control form-control-lg">
+          <label for="image">輪播照片上傳</label>
+          <input type="file" name="image-1" accept="image/*" multiple>
+          <div class="modal-footer pb-0 border-0">
+            <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+            <input class="btn btn__submitadd" type="submit" value="完成">
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  for (const tbody of document.querySelectorAll('tbody')) {
+    const btn = tbody.querySelector(".m-2")
+    btn.onclick = function() {
+      $(tbody).find('#updateModal').modal("toggle");
+    }
+  }
+</script>
+{% endblock main %}

backstage/templates/system_furniture.html

@@ -0,0 +1,258 @@
+{% extends "tables/editor_table.html" %}
+{% block table_body %}
+<!-- <script type="text/javascript" src="/static/config.js"></script> -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
+<script type="text/javascript" src="/static/js/yo.js"></script>
+<tbody id='swfData'>
+    {% for idx in range(0, length) %}
+    <tr>
+        <td class="table__data">{{ idx + 1 }}</td>
+        <td class="table__data">{{ '[' + furnitures[idx].type + '] ' + furnitures[idx].title }}</td>
+        <td class="table__data">{{ furnitures[idx].date }}</td>
+        <!-- <td class="table__data">1</td> -->
+        <td class="table__data"><input type="checkbox" {{ 'checked' if (furnitures[idx].draft.lower()=='false' ) }}
+                onclick="toggleDraft(this,'{{ furnitures[idx].url }}');" /></td>
+        <td>
+            <div class="d-flex justify-content-center">
+                <button class="btn btn_light mr-1" onclick="getHeader('{{ furnitures[idx].url }}');"><b>修改</b> <i
+                        class="fas fa-pencil-alt"></i></button>
+                <button class="btn__delete" value="delete"
+                    onclick="if(confirm('確定要刪除?')) delfur('{{ furnitures[idx].url }}');"><i
+                        class="fas fa-trash-alt"></i></button>
+            </div>
+
+        </td>
+    </tr>
+    {% endfor %}
+</tbody>
+<script>$('#swfData')[0].innerHTML = ReplaceSwfType($('#swfData')[0].innerHTML);</script>
+{% endblock table_body %}
+
+
+{% block modal_body %}
+
+<div class="form-group">
+    <table class="table table-bordered">
+        <tbody>
+            <tr>
+                <td>
+                    <h4>名稱</h4>
+                </td>
+                <td>
+                    <input class="form-control" id="newSwfName" type="text" />
+                    <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <h4>類別</h4>
+                </td>
+                <td><select id="newSwfDropdown"></select></td>
+            </tr>
+        </tbody>
+    </table>
+
+    <!-- 類別：<select id="newSwfDropdown"></select><br />
+    名稱：<input id="newSwfName" type="text" /><br /> -->
+    
+    <!--     敘述：<input id="swfDesc" type="text" /><br />
+    <hr>
+    圖片：
+    <div id="editorjs" style='border:inset 1px;'></div>
+    <hr>
+    定價：<input id="swfPrice" type="text" /><br />
+    顏色：<input id="swfColor" type="text" /><br />
+    尺寸：<input id="swfSize" type="text" /><br />
+    材質：<input id="swfMet" type="text" /><br /> -->
+</div>
+<div class="modal-footer  pb-0 border-0">
+    <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+    <button type="button" class="btn btn__submitadd" onclick="newfur();">完成</button>
+</div>
+<script>GenSwfDD($('#newSwfDropdown')[0]);</script>
+<script>
+    function newfur() {
+        //alert('/backstage/new_system_furniture?newSwfDropdown='+ $('#newSwfDropdown').val() +'&newSwfName='+$('#newSwfName').val());
+        axios.get('/backstage/new_system_furniture?newSwfDropdown=' + $('#newSwfDropdown').val() + '&newSwfName=' + $('#newSwfName').val()).then((data) => { location.reload() });
+    }
+    function delfur(iurl) {
+        //alert('/backstage/new_system_furniture?newSwfDropdown='+ $('#newSwfDropdown').val() +'&newSwfName='+$('#newSwfName').val());
+        axios.get('/backstage/del_system_furniture?url=' + iurl).then((data) => { location.reload() });
+    }
+</script>
+{% endblock modal_body %}
+
+{% block main_info_modal_body %}
+<style>
+    .image-tool__caption {
+        display: none;
+    }
+</style>
+<div class="modal fade" id="myModal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h4 class="modal-title">模組系統櫃-修改</h4>
+                <button type="button" class="close" data-dismiss="modal">×</button>
+            </div>
+
+            <div class="modal-body">
+                <table class="table table-bordered">
+                    <tbody>
+                        <tr>
+                            <td>
+                                <h4>名稱</h4>
+                            </td>
+                            <td>
+                                <input class="form-control" id="ctitle" type="text" />
+                                <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                              <h4>Meta標題</h4>
+                            </td>
+                            <td><input class="form-control" id="cmetattl" type="text" />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>
+                              <h4>Meta說明</h4>
+                            </td>
+                            <td><input class="form-control" id="cmetadsc" type="text" />
+                            </td>
+                          </tr>
+                        <tr>
+                            <td>
+                                <h4>類別</h4>
+                            </td>
+                            <td><select id="swfDropdown" onchange="$('#ctype').val(this.value);" disabled></select></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>敘述</h4>
+                            </td>
+                            <td>
+                                <textarea class="form-control" rows="3" id="swfDesc" type="text" style="width: 100%;"></textarea>
+                                <div class="mt-1 text-danger">(建議字數: 50字內)</div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>日期</h4>
+                            </td>
+                            <td><input class="form-control" id="cdate" type="text" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>是否顯示</h4>
+                            </td>
+                            <td><input id="cdraft" type="checkbox" checked="true" /></td>
+                        </tr>
+                        <tr>
+                            <td colspan="2"> </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>單品圖</h4>
+                            </td>
+                            <td>
+                                <div class="form-control" id="editorjs" style='border:inset 1px;'></div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>定價</h4>
+                            </td>
+                            <td><input class="form-control" id="swfPrice" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>顏色</h4>
+                            </td>
+                            <td><input class="form-control" id="swfColor" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>尺寸(mm)</h4>
+                            </td>
+                            <td><input class="form-control" id="swfSize" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>材質</h4>
+                            </td>
+                            <td><input class="form-control" id="swfMat" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>備註</h4>
+                            </td>
+                            <td><input class="form-control" id="swfMemo" type="text" style="width: 100%;" /></td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <h4>規格圖</h4>
+                            </td>
+                            <td>
+                                <div class="form-control" id="editorjs1" style='border:inset 1px;'></div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <div class="d-none">
+                    <input class="form-control" id="cfile" type="file" />
+                    <input id="ctype" type="text" /><br />
+                    <input id="curl" type="text" /><br />
+                    <input id="cimage" type="text" /><br />
+                    <input id="cweight" type="text" /><br />
+                    <input id="ctag" type="text" /><br />
+                    <input id="ccategories" type="text" /><br />
+                    <input id="ccol1" type="text" /><br />
+                    <input id="ccol2" type="text" /><br />
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn__submitadd" id='addNewButton'
+                    onclick="UpdateProduct();">完成</button>
+                <!-- <button type="button" id="uptbtn" class="btn btn-danger" onclick="updateHeader();">完成修改</button> -->
+            </div>
+
+        </div>
+    </div>
+</div>
+<script>GenSwfDD($('#swfDropdown')[0]);</script>
+<script>
+
+    function UpdateProduct() {
+        editor.save().then((mimg) => {
+            sectionContent = "";
+            editor1.save().then((specimg) => {
+                sectionContent = GenProductSection(mimg, specimg);
+
+                var mdContent = GetMdHeader();
+                
+                mdContent += '\n' + sectionContent;
+                //GenProductSection(outputData);
+                postData = {
+                    content: mdContent,
+                    url: editTarget
+                };
+
+                /* alert(contentApiUrl);
+                alert(editTarget); */
+                //alert(mdContent);
+                axios.post(contentApiUrl + editTarget, json = postData).then(({ data }) => {
+                    alert('作品資料已儲存');
+                }).finally((data) => { location.reload(); });
+            });
+        }).catch((error) => {
+            console.log('Saving failed: ', error)
+        })
+    };
+</script>
+{% endblock %}

backstage/templates/tables/editor_table.html

@@ -0,0 +1,151 @@
+{% extends "layout.html" %}
+{% block main %}
+<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
+<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script type="text/javascript" src="{{url_for('static', filename='config.js')}}"></script>
+<h1 class="h3"><i class="far fa-newspaper mr-3"></i>{{ title }}</h1>
+<table id="example" class="table" cellspacing="0" width="60%">
+  <thead>
+    <tr>
+      <th class="table__head">#</th>
+      <th class="table__head">標題</th>
+      <th class="table__head">日期</th>
+      <!-- <th class="table__head">順序</th> -->
+      <th class="table__head">顯示</th>
+      <th style="width:150px;" class="table__head">
+        <button type="button" class="btn__add m-1" data-toggle="modal" data-target="#createModal"><i
+            class="fas fa-plus"></i></button>
+      </th>
+    </tr>
+  </thead>
+  {% block table_body %}{% endblock %}
+</table>
+
+
+{% block main_info_modal_body %}{% endblock %}
+<!-- <div class="modal fade" id="myModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <h4 class="modal-title">主資訊修改</h4>
+        <button type="button" class="close" data-dismiss="modal">×</button>
+      </div>
+
+      <div class="modal-body">
+        <table class="table table-bordered">
+          <tbody>
+            <tr>
+              <td>
+                <h4>標題</h4>
+              </td>
+              <td><input class="form-control" id="ctitle" type="text" />
+                <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <h4>圖片</h4>
+              </td>
+              <td>
+                <input class="form-control" id="cfile" type="file" />
+                <div class="mt-1 text-danger">(建議尺寸/比例: 寬2048px * 高1365px)</div>
+              </td>
+            </tr>
+            <tr id='sdesc'>
+              <td>
+                <h4>描述</h4>
+              </td>
+              <td><textarea class="form-control" rows="3" id="cdescription"></textarea>
+                <div class="mt-1 text-danger">(建議字數: 50字內)</div>
+              </td>
+            </tr>
+            <tr>
+              <tr id='scat'>
+                <td>
+                  <h4>文章分類</h4>
+                </td>
+                <td><textarea class="form-control" rows="1" id="ccategories"></textarea>
+                  <div class="mt-1 text-danger">(建議字數: 15字內)</div>
+                </td>
+              </tr>
+              <tr>
+              <td>
+                <h4>日期</h4>
+              </td>
+              <td><input class="form-control" id="cdate" type="text" /></td>
+            </tr>
+            <tr>
+              <td>
+                <h4>是否顯示</h4>
+              </td>
+              <td><input id="cdraft" type="checkbox" checked="true" /></td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="d-none">
+          <input id="ctype" type="text" /><br />
+          <input id="curl" type="text" /><br />
+          <input id="cimage" type="text" /><br />
+          <input id="cweight" type="text" /><br />
+          <input id="ctag" type="text" /><br />
+          <input id="ccategories" type="text" /><br />
+          <input id="ccol1" type="text" /><br />
+          <input id="ccol2" type="text" /><br />
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" id="uptbtn" class="btn btn-danger" onclick="updateHeader();">完成修改</button>
+      </div>
+
+    </div>
+  </div>
+</div> -->
+
+<!-- <div id="dialog-form">
+  <input id="ctitle" type="text" /><br />
+  <input id="cdate" type="text" /><br />
+  <input id="cdraft" type="checkbox" checked="true" /><br />
+  <input id="ctype" type="text" /><br />
+  <input id="curl" type="text" /><br />
+  <input id="cimage" type="text" /><br />
+  <input id="cdescription" type="text" /><br />
+  <input id="cweight" type="text" /><br />
+  <input id="ctag" type="text" /><br />
+  <button onclick="updateHeader();location.reload();">完成修改</button>
+</div> -->
+<script>
+  oTitle = "";
+  editTarget = "";
+  frontMatters = [];
+  contentMatters = [];
+  //const contentApiUrl = `${PORTAL_SERVER}contents?url=`;
+
+  //allObjs = JSON.parse(htmlDecode('{{ collections }}'));
+  //console.log(htmlDecode('{{ collections }}'));
+
+</script>
+
+<!-- Modal -->
+<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
+  aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header border-0">
+        <h5 class="modal-title modal__title" id="createModalLabel">新增</h5>
+        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+          <span class="modal__close__back">
+            <span aria-hidden="true">&times;</span>
+          </span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {% block modal_body %}{% endblock %}
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock main %}

backstage/templates/tables/manage_table.html

@@ -0,0 +1,154 @@
+{% extends "layout.html" %}
+{% block main %}
+<h1 class="h3"><i class="fas fa-pen mr-2"></i>{{ title }}</h1>
+{% for content in contents %}
+  <div class="table__block">
+    <h4 class="h4 mb-0">區塊{{ loop.index }}</h4>
+    <span class="btn__opentab"><i class="fas fa-chevron-down"></i></span>
+    <form action="{{ url_for(form_url, page=page, section_class=content.sectionClass) }}" method="POST" enctype="multipart/form-data" class="form__action">      
+      <table id="manage_table" class="table table__content mb-0">
+        <thead>
+          <tr>
+            <th class="table__head" width="80">順序</th>
+            <th class="table__head" width="120">類型</th>
+            <th class="table__head">內容</th>
+            <th style="width:150px;" class="table__head">
+            </th>
+          </tr>
+        </thead>
+        {% for key, value in content.items() %}
+          {% if key != 'sectionClass' %}
+            {% for data in value %}
+              <tbody>
+                <tr>
+                  <input name="element" type="hidden" value="{{ key }}">
+                  <td class="table__data">{{ loop.index }}</td>
+                  {% if key == "img" %}
+                    <td class="table__data"><span class="badge badge-pill badge__img">圖片</span></td>
+                    <td class="table__data" style="display:flex;justify-content:center">
+                      <div class="img__table"><img src="{{ bhouse_server }}/{{ data['src'] }}" width="100%" height="100%"></div>
+                    </td>
+                    <td class="table__data">
+                      <div class="d-flex justify-content-center">
+                        <button type="button" class="btn__edit  m-1">
+                          <i class="fas fa-edit"></i>
+                        </button>
+                        <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" aria-hidden="true">
+                          <div class="modal-dialog" role="document">
+                            <div class="modal-content">
+                              <div class="modal-header border-0">
+                                <h5 class="modal-title modal__title" id="exampleModalLabel">編輯</h5>
+                                <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+                                  <span class="modal__close__back">
+                                    <span aria-hidden="true">&times;</span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div class="modal-body">
+                                <input id="image" name="image" type="file" value="{{ data['src'] }}">
+                                <input name="data" type="hidden" value="{{ data }}">
+                                <div class="modal__img"><img src="{{ bhouse_server }}/{{ data['src'] }}"></div>
+                                <div class="modal-footer pb-0 border-0">
+                                  <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                                  <input class="btn btn__submitadd" type="submit" value="完成">
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <form action="#" method="POST">
+                          <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+                        </form>
+                      </div>
+                    </td>
+                  {% elif key == "yt_video" %}
+                    <td class="table__data"><span class="badge badge-pill badge__video">影片</span></td>
+                    <td class="table__data">
+                      {{ data['videoid'] }}
+                    </td>
+                    <td class="table__data">
+                      <div class="d-flex justify-content-center">
+                        <button type="button" class="btn__edit  m-1">
+                          <i class="fas fa-edit"></i>
+                        </button>
+                        <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" aria-hidden="true">
+                          <div class="modal-dialog" role="document">
+                            <div class="modal-content">
+                              <div class="modal-header border-0">
+                                <h5 class="modal-title modal__title" id="exampleModalLabel">編輯</h5>
+                                <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+                                  <span class="modal__close__back">
+                                    <span aria-hidden="true">&times;</span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div class="modal-body">
+                                <input name="data" class="form-control form-control-lg " value="{{ data }}">
+                                <div class="modal-footer pb-0 border-0">
+                                  <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                                  <input class="btn btn__submitadd" type="submit" value="完成">
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <form action="#" method="POST">
+                          <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+                        </form>
+                      </div>
+                    </td>
+                  {% else %}
+                  <td class="table__data"><span class="badge badge-pill badge__txt">文字</span></td>
+                  <td class="table__data txt__cut">
+                    <div>{{ data }}</div>
+                  </td>
+                  <td class="table__data">
+                    <div class="d-flex justify-content-center">
+                      <button data_element="{{ key }}" data="{{ data }}" type="button" class="btn__edit  m-1">
+                        <i class="fas fa-edit"></i>
+                      </button>
+                      <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" aria-hidden="true">
+                        <div class="modal-dialog" role="document">
+                          <div class="modal-content">
+                            <div class="modal-header border-0">
+                              <h5 class="modal-title modal__title" id="exampleModalLabel">編輯</h5>
+                              <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+                                <span class="modal__close__back">
+                                  <span aria-hidden="true">&times;</span>
+                                </span>
+                              </button>
+                            </div>
+                            <div class="modal-body">
+                              <input name="data" class="form-control form-control-lg modal__text__input" value="{{ data }}">
+                              <div class="modal-footer pb-0 border-0">
+                                <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                                <input class="btn btn__submitadd" type="submit" value="完成">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <form action="#" method="POST">
+                        <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+                      </form>
+                    </div>
+                  </td>
+                  {% endif %}
+                </tr>
+              </tbody>
+            {% endfor %}
+          {% endif %}
+        {% endfor %}
+      </table>
+    </form>
+  </div>
+{% endfor %}
+<script>
+  for (const tbody of document.querySelectorAll('tbody')) {
+    const btn = tbody.querySelector(".m-1")
+    btn.onclick = function() {
+      $(tbody).find('#manage_modal').modal("toggle");
+    }
+  }
+</script>
+{% endblock main %}

backstage/upload/routes.py

@@ -0,0 +1,238 @@
+from backstage.config import UPLOAD_PATH_MAP
+import os
+import shutil
+from flask import render_template, Blueprint, request, redirect, url_for
+import flask
+from flask_cors import CORS, cross_origin
+from flask.helpers import make_response, send_file, send_from_directory
+from werkzeug.wrappers import Response
+import requests
+from PIL import Image
+from urllib.parse import urlparse
+import uuid
+import json
+from backstage.config import PORTAL_SERVER
+
+
+#from backstage.utils.routes import update_manage_table
+
+upload_app = Blueprint('upload', __name__)
+
+
+@upload_app.route('/backstage/test/<path:iurl>', methods=['GET'])
+def upload_test(iurl):
+
+    test = iurl[0:iurl.rfind("/")+1]
+    new_response = requests.get(PORTAL_SERVER + 'contents?url=' + test)
+    #my_dict = json.loads(new_response.content.decode('utf-8'))[0].items()
+    for key, value in json.loads(new_response.content.decode('utf-8'))[0].items():
+        if key == 'path':
+            print(value.replace('\\', '/'))
+    # print(my_dict[0].items())
+    return new_response.content
+
+
+@upload_app.route('/backstage/upload/<path:iurl>', methods=['POST'])
+def upload_post(iurl):
+
+    # 取得md路徑
+    mdPath = ""
+    new_response = requests.get(PORTAL_SERVER + 'contents?url=' + iurl)
+    #my_dict = json.loads(new_response.content.decode('utf-8'))[0].items()
+    obj = json.loads(new_response.content.decode('utf-8'))
+    
+    if len(obj) > 0:
+        for key, value in obj[0].items():
+            if key == 'path':
+                mdPath = value.replace('\\', '/')
+                #print(mdPath)
+                mdPath = mdPath[0:mdPath.rfind('/')+1]
+                #print(mdPath)
+    print(mdPath)
+    isProduct = False
+    if mdPath.find("設計家具") >= 0 or mdPath.find("模組系統櫃") >= 0:
+        isProduct = True
+    #bdata = request.stream.read()
+    filepath = ""
+    itype = ""
+    print(mdPath)
+    #aa = request.get_data()
+    if iurl == "title":
+        itype = iurl
+        filepath = iurl
+    else:
+        itype = iurl[0:iurl.find("/")]
+        filepath = iurl[iurl.rfind("/")+1:]
+
+    if request.method == 'POST':
+
+        # check if the post request has the file part
+        # print(request.full_path)
+        """ if 'file' not in request.files:
+            #flash('No file part')
+            return redirect(request.url) """
+        if len(request.files) == 0:
+            aa = {"success": 0}
+            return aa
+        else:
+            file = request.files['image']
+            print("The file is at" + filepath)
+
+            # If the user does not select a file, the browser submits an
+            # empty file without a filename.
+            """ if file.filename == '':
+                #flash('No selected file')
+                return redirect(request.url) """
+            oimgtype = file.filename[file.filename.rfind(".")+1:]
+            oimgtypeName = oimgtype
+            if oimgtype.lower() == 'jpg':
+                oimgtypeName = 'jpeg'
+
+            if file and not isProduct:
+                #filename = secure_filename(file.filename)
+
+                #fname = str(uuid.uuid4()) + file.filename[file.filename.rfind("."):]
+                #sitepath = UPLOAD_PATH_MAP[0][0] + filepath[filepath.rfind("/")+1:] + "/img/"
+                if filepath == "title":
+                    sitepath = UPLOAD_PATH_MAP[0][2] + "/static/img/title/"
+                else:
+                    sitepath = mdPath + "/img/"
+                    #sitepath = UPLOAD_PATH_MAP[0][0] + "../" + itype + "/" + filepath + "/img/"
+
+                wfname = str(uuid.uuid4()).replace('-','') + ".webp"
+                owfname = wfname.replace('webp', oimgtype)
+                #fullpath = UPLOAD_PATH_MAP[0][0] + filepath[filepath.rfind("/")+1:] + "\\img\\" + fname
+                #print(UPLOAD_PATH_MAP[0][1] + filepath[filepath.rfind("/")+1:] + "/img/" + fname)
+                # file.save(fullpath)
+                #image_object = Image.open(fullpath)
+                #print(request.args.get('url', type=str))
+                wpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/"
+                owpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/orig/"
+                print("1wpath is " + wpath)
+                print("1owpath is " + owpath)
+                #fullpath = wpath + fname
+                if not os.path.exists(wpath):
+                    os.makedirs(wpath)
+                if not os.path.exists(owpath):
+                    os.makedirs(owpath)
+                if not os.path.exists(sitepath):
+                    os.makedirs(sitepath)
+                # file.save(fullpath)
+                image_object = Image.open(file)
+                image_object.save(owpath+owfname)
+                if image_object.size[0] > 1000:
+                    image_object.thumbnail(size=((1600, 1600)))
+                image_object.save(wpath+wfname)
+                image_object.save(sitepath+wfname)
+                print("Loc1a: " + wpath+wfname)
+                print("Loc1b: " + owpath+wfname)
+                print("Loc2: " + sitepath+wfname)
+                #file.save(os.getcwd()+ "/backstage/upload/img/"+ fname)
+                # return redirect(url_for('download_file', name=file.filename))
+                aa = {"success": 1, "file": {"url": "/backstage/upload/" +
+                                             filepath+"/img/" + wfname, "width": image_object.width, "height": image_object.height}}
+                # aa = {"success": 1, "file": {"url": UPLOAD_PATH_MAP[0][1] + filepath[filepath.rfind(
+                #    "/")+1:] + "/img/" + fname, "width": image_object.width, "height": image_object.height}}
+                return aa
+            elif isProduct:
+                wpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/"
+                print("2wpath is " + wpath)
+                wfname = str(uuid.uuid4()) + ".webp"
+                image_object = Image.open(file)
+                #image_object.save(mdPath+wfname, oimgtypeName)
+                if image_object.size[0] > 1000:
+                    image_object.thumbnail(size=((1600, 1600)))
+                if not os.path.exists(wpath):
+                    os.makedirs(wpath)
+                image_object.save(wpath+wfname)
+                image_object.save(mdPath+wfname)
+                print("Loc3: " + wpath+wfname)
+                print("Loc4: " + mdPath+wfname)
+                owfname = wfname.replace('webp', oimgtype)
+                aa = {"success": 1, "file": {"url": "/backstage/upload/" + filepath+"/img/" + wfname,
+                                             "width": image_object.width, "height": image_object.height}}
+                return aa
+        if request.method == 'GET':
+            print('GET')
+            # print(request.files)
+            # print(request.form)
+
+        # print(requests.post("/backstage/upload"))
+        aa = {"success": 1, "file": {"url": "http://www.choozmo.com/images/logo%20%281%29.webp", }}
+        return aa
+
+
+@upload_app.route('/backstage/upload/<path:filepath>', methods=['GET'])
+def upload_get(filepath):
+    # print(filepath)
+    #print(os.getcwd() + "/backstage/upload/"+filepath, filepath[filepath.rfind("/")+1:])
+    #aa = {"success" : 1,"file": { "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg", } }
+    # return redirect(url_for('upload.upload_get',filename=filename), code=301)
+    # return send_from_directory(os.getcwd() + "/backstage/upload/"+filepath, filepath[filepath.rfind("/")+1:])
+
+    return send_file(os.getcwd() + "/backstage/upload/"+filepath)
+
+
+@upload_app.route('/backstage/getimage/<path:iurl>', methods=['POST', 'GET'])
+def get_image(iurl):
+
+    itype = iurl[0:iurl.find("/")]
+    filepath = iurl[iurl.rfind("/")+1:]
+
+    # print(request.get_json()['url'])
+    if itype == "blog":
+        sitepath = UPLOAD_PATH_MAP[0][0] + "../blog/" + filepath + "/img/"
+    else:
+        sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
+    #sitepath = UPLOAD_PATH_MAP[0][0] + filepath + "/img/"
+    oimgtype = str(request.get_json()['url'])[str(request.get_json()['url']).rfind(".")+1:]
+    oimgtypeName = oimgtype
+    if oimgtype.lower() == 'jpg':
+        oimgtypeName = 'jpeg'
+    # fname = str(uuid.uuid4()) + str(request.get_json()
+    #                                ['url'])[str(request.get_json()['url']).rfind("."):]
+    wfname = str(uuid.uuid4()) + ".webp"
+    owfname = wfname.replace('webp', oimgtype)
+    wpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/"
+    owpath = os.getcwd() + "/backstage/upload/" + filepath+"/img/orig/"
+    """ fullpath = wpath + fname
+    if not os.path.exists(wpath):
+        os.makedirs(wpath)
+    f = open(fullpath, 'wb')
+    f.write(requests.get(request.get_json()['url']).content)
+    f.close() """
+    if not os.path.exists(wpath):
+        os.makedirs(wpath)
+    if not os.path.exists(owpath):
+        os.makedirs(owpath)
+    if not os.path.exists(sitepath):
+        os.makedirs(sitepath)
+    image_object = Image.open(requests.get(request.get_json()['url'], stream=True).raw)
+    image_object.save(owpath+owfname)
+    if image_object.size[0] > 1000:
+        image_object.thumbnail(size=((1600, 1600)))
+    image_object.save(wpath+wfname)
+    image_object.save(sitepath+wfname)
+    # send_file()
+    #aa = {"success" : 1,"file": { "url" : "http://localhost:9000/backstage/upload/avatar1.jpg", } }
+    #resp = make_response(open(os.getcwd()+ "/backstage/upload/" + fname, 'br').read(), 301)
+    #resp.content_type = "image/jpeg"
+    #resp.content_encoding = "Unicode"
+    # return redirect(request.get_json()['url'], code=301)
+    aa = {"success": 1, "file": {"url": "/backstage/upload/" +
+                                 filepath+"/img/" + wfname, "width": image_object.width, "height": image_object.height}}
+    return aa
+
+
+@upload_app.route('/backstage/modTitle/<path:filepath>', methods=['GET'])
+def modify_title(filepath):
+    oldPath = UPLOAD_PATH_MAP[0][0] + filepath.split('/')[0]
+    newPath = UPLOAD_PATH_MAP[0][0] + filepath.split('/')[1]
+    # os.renames(oldPath,newPath)
+    """ if os.path.exists(newPath):
+        return {"success" : 0, "message" : "New directory exists."} """
+    """ shutil.copytree(oldPath, newPath)
+    shutil.rmtree(oldPath) """
+    print(oldPath + ' => ' + newPath)
+
+    return {"success": 1}

backstage/utils/__init__.py

@@ -0,0 +1,20 @@
+# coding:utf-8
+#from translate import Translator
+#from googletrans import Translator
+from deep_translator import GoogleTranslator
+from datetime import datetime, timezone, timedelta
+
+
+def translate(text):
+    #result = Translator().translate(text, dest='en')
+    try:
+        result = GoogleTranslator(source='zh-TW', target='en').translate(text)
+    except:
+        result = text
+    #translator= Translator(from_lang="zh-tw",to_lang="en")
+    #result = translator.translate(text)
+    return str(result).lower()
+
+
+def get_now_time():
+    return datetime.now(timezone(timedelta(hours=+8))).isoformat(timespec="seconds")

backstage/utils/routes.py

@@ -0,0 +1,120 @@
+from flask import flash, request, redirect, url_for, Response,Blueprint
+from flask_restful import Resource, Api
+import requests
+from time import sleep
+from backstage.utils import translate
+from collections import defaultdict
+from os import path
+from backstage.config import PORTAL_SERVER
+
+contents_app = Blueprint('contents', __name__)
+api = Api(contents_app)
+TYPE_URL_FOR = {'collection': 'collections.collection_list',
+                'blog': 'blogs.blog_list'}
+
+def checktype(articletype):
+    if articletype == 'blog':
+        return 'maincategories'
+    return articletype
+
+def create_content(data, image_data):
+    new_response = requests.post('{}new_content'.format(PORTAL_SERVER), json=data)
+    if new_response.status_code == 201:
+        #flash('新增文章失敗', 'danger')
+        return "<script>alert('已有重複的標題，請重新設定');history.go(-1);</script>"
+    if new_response.status_code == 200:
+        if not image_data == None:
+            requests.post(
+                '{}upload/static/img?type={}&filename={}'.format(
+                    PORTAL_SERVER, checktype(data.get('type')), image_data.filename), files={'image': image_data})
+            sleep(1)  # sleep for waiting for new_content API generating content successfully.
+        return redirect(url_for('editor.editor', url='/{}/{}'.format(
+            checktype(data.get('type')), get_trans_title_url_name(data.get('name')))))
+    else:
+        flash('新增文章失敗', 'danger')
+        return redirect(url_for(TYPE_URL_FOR.get(data.get('type'))))
+
+def create_collection_content(data, img, coverimg, csliderimg, commentimg): #exclusive for collection
+    new_response = requests.post('{}new_content'.format(PORTAL_SERVER), json=data)
+    if new_response.status_code == 201:
+        #flash('新增文章失敗', 'danger')
+        return "<script>alert('已有重複的標題，請重新設定');history.go(-1);</script>"
+    if new_response.status_code == 200:
+        if not img == None:
+            requests.post(
+                '{}upload/static/img?type={}&filename={}'.format(
+                    PORTAL_SERVER, checktype(data.get('type')), img.filename), files={'image': img})
+            requests.post(
+                '{}upload/static/img?type={}&filename={}'.format(
+                    PORTAL_SERVER, checktype(data.get('type')), coverimg.filename), files={'image': coverimg})
+            sleep(1)  # sleep for waiting for new_content API generating content successfully.
+            requests.post(
+            '{}upload/img_to_dir?url={}&filename={}'.format(
+                PORTAL_SERVER, data.get('dest'), commentimg.filename), files={'image': commentimg})
+            sleep(1)
+            # reserved for slider img wheel
+        return redirect(url_for('editor.editor', url='/{}/{}'.format(
+            checktype(data.get('type')), get_trans_title_url_name(data.get('name')))))
+    else:
+        flash('新增文章失敗', 'danger')
+        return redirect(url_for(TYPE_URL_FOR.get(data.get('type'))))
+
+def upload_slider_img(data, image_data): #for uploading slider images, currently unused
+    if (data.type == 'collection'):
+            print("This is a collection article.") #debug use
+            if not image_data == None: #just in case
+                requests.post(
+                '{}upload/static/img/?type={}&filename={}'.format(
+                    PORTAL_SERVER, checktype(data.get('type')), image_data.filename), files={'image': data.get('csliderimg')}, type='csliderimg', dest=data.get('dest'))
+            sleep(1)  # sleep for waiting for new_content API generating content successfully.
+
+
+def remove_content():
+    url = request.args.get('url', type=str)
+    response = requests.delete('{}contents?url={}'.format(PORTAL_SERVER, url))
+    if response.status_code == 200:
+        flash('刪除文章成功', 'success')
+    else:
+        flash('刪除文章失敗', 'danger')
+
+
+def get_trans_title_url_name(title):
+    tary = translate(title).replace('$','_').replace('&','_').replace('+','_').replace(',','_').replace('/','_').replace(':','_').replace(';','_').replace('=','_').replace('?','_').replace('@','_').replace(' ','_').replace("'",'_').split('_')
+    while("" in tary) :
+        tary.remove("")
+    return ('_'.join(tary))
+    #return translate(title).replace(' ', '_')
+
+def update_manage_table(data, elements, req_args, files, img_type):
+    def allow_file(filename):
+        return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+    ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
+    update_data = defaultdict(list)
+    for element, value in zip(elements, data):
+        if element == 'img':
+            value = eval(value)
+        elif element == 'yt_video':
+            value = {'videoid': str(value)}
+        else:
+            value = str(value)
+        update_data[element].append(value)
+    for idx, f_value in enumerate(files):
+        if not f_value or f_value.filename == '':
+            continue
+        if not allow_file(f_value.filename):
+            flash('上傳圖片失敗，副檔名必須為:{}'.format(ALLOWED_EXTENSIONS), 'danger')
+            continue
+        requests.post(
+            '{}upload/static/img?type={}&filename={}'.format(
+                PORTAL_SERVER, img_type, f_value.filename), files={'image': f_value})
+        update_data['img'][idx]['src'] = path.join(
+            path.split(update_data['img'][idx]['src'])[0], f_value.filename)
+    response = requests.post(
+        '{}manages/data?page={}&section={}'.format(
+            PORTAL_SERVER, req_args.get('page'), req_args.get('section_class')), json=update_data)
+    if response.status_code == 200:
+        sleep(1)  # waiting for API upload image successfully.
+        flash('修改成功', 'success')
+    else:
+        flash('修改失敗', 'danger')

models/__init__.py

@@ -0,0 +1,23 @@
+""" from flask import Flask
+import os
+from flask_cors import CORS
+
+
+def create_app():
+    SECRET_KEY = os.urandom(32)
+    app = Flask(__name__)
+    CORS(app, resources={r"/api/*": {"origins": "*"}})
+    app.config['SECRET_KEY'] = SECRET_KEY
+
+    from models.contents.routes import contents_app
+    from models.manages.routes import manages_app
+    from models.store_locations.routes import store_locations_app
+    from models.statics.routes import statics_app
+
+    app.register_blueprint(contents_app)
+    app.register_blueprint(manages_app)
+    app.register_blueprint(store_locations_app)
+    app.register_blueprint(statics_app)
+
+    return app
+ """

models/contents/routes.py

@@ -0,0 +1,298 @@
+from flask import request, Blueprint
+from flask.wrappers import Response
+from flask_restful import Resource, Api
+from os import path, remove, walk, mkdir
+import logging
+import re
+from models.config import CONTENT_DIR, STATIC_DIR
+import shutil
+from backstage.utils.routes import get_trans_title_url_name
+
+
+contents_app = Blueprint('contents', __name__)
+api = Api(contents_app)
+logger = logging.getLogger(__name__)
+DATA_FIELD = ['title:', 'url:','tags:','image:','description:']
+
+
+def _get_data(file_dir):
+    def load_data():
+        if 'meta_title:' in line:
+           s = line.split('"')
+           result['meta_title'] = s[1]
+        elif 'collection_title:' in line:
+            s = line.split('"')
+            result['collection_title'] = s[1]
+        elif 'title:' in line:
+            #print(line) # debug use
+            #data_field.remove('title: ') #i have to remove this because you wont get the correct results
+            s = line.split('"')
+            result['title'] = s[1]
+        elif 'date: ' in line:
+            # data_field.remove('date: ')
+            s = line.replace('date: ', '').strip()
+            result['date'] = s
+        elif 'draft: ' in line:
+            # data_field.remove('draft: ')
+            s = line.replace('draft: ', '').strip()
+            result['draft'] = s
+        elif 'url: ' in line:
+            data_field.remove('url:')
+            s = line.split('"')
+            result['url'] = s[1]
+        elif 'tags: ' in line:
+            data_field.remove('tags:')
+            s = line.replace('tags: ', '').strip()
+            """ if s != "":
+                s = s + ","
+            s = s + "全部屋型,全部坪數,全部預算,全部格局" """
+            result['tags'] = s
+        elif 'image: ' in line:
+            s = line.replace('image: ', '').strip()
+            s = s.replace('"', '').strip()
+            result['image'] = s
+        elif 'description: ' in line:
+            s = line.replace('description: ', '').strip()
+            s = s.replace('"', '').strip()
+            result['description'] = s
+
+    data_field = list(DATA_FIELD)
+    result = {}
+    with open(file_dir, 'r', encoding="utf-8") as md:
+        result['content'] = md.read()
+        md.seek(0)
+        md_line_data = md.readlines()
+    for line in md_line_data:
+        load_data()
+        if not data_field:
+            return result
+    if not 'tags' in result:
+        result['tags'] = "全部類型,全部坪數,全部預算,全部格局"
+    else:
+        if result['tags'] != "":
+            result['tags'] = result['tags'] + ","
+        result['tags'] = result['tags'].replace('"', '') + "全部類型,全部坪數,全部預算,全部格局"
+    return result
+
+
+def _gen_content_files():
+    for root, dirs, files in walk(CONTENT_DIR):
+        for f in files:
+            if '.md' not in f:
+                continue
+            yield path.join(root, f)
+
+
+def _search_dir(url):
+    def _get_file_front_matter_url():
+        with open(file_dir, 'r', encoding="utf-8") as md:
+            md_line_data = md.readlines()
+        for line in md_line_data:
+            if 'url:' in line:
+                return list(filter(None, re.split('"|\n', line)))[-1]
+
+    for file_dir in _gen_content_files():
+        if url == _get_file_front_matter_url():
+            return path.dirname(file_dir)
+
+
+def _search_content_dir(type_, categories=None):
+    target = categories or type_
+
+    def _get_file_front_matter_type():
+        with open(file_dir, 'r', encoding="utf-8") as md:
+            md_line_data = md.readlines()
+        for line in md_line_data:
+            if categories:
+                if 'categories' in line:
+                    return list(filter(None, re.split('"|\n|]', line)))[-1]
+            else:
+                if 'type:' in line:
+                    return list(filter(None, re.split('"|\n', line)))[-1]
+
+    for file_dir in _gen_content_files():
+        if target == _get_file_front_matter_type():
+            return path.dirname(file_dir)
+
+
+class Content(Resource):
+    DATA_FIELD = ['title:', 'url:']
+
+    @property
+    def url(self):
+        return request.args.get('url', type=str)
+
+    def _search_content(self):
+        result = {}
+        for file_dir in _gen_content_files():
+            data = _get_data(file_dir)
+            if self.url in data.get('url', ''):
+                result = data
+                result['path'] = file_dir
+                #print(result['path'])
+                yield result
+
+    def _get_contents(self):
+        for file_dir in _gen_content_files():
+            yield _get_data(file_dir)
+
+    def get(self):
+        if self.url:
+            results = self._search_content()
+        else:
+            results = self._get_contents()
+        
+        x = list(results)
+        
+        #sortedData = sorted(list(results()), key=lambda x:x['date'], reverse=True)
+        return x
+
+    def post(self):
+        try:
+            file_dir = path.join(
+                _search_dir(request.args.get('url', type=str)), 'index.md')
+            md_content = request.json.get('content')
+            with open(file_dir, 'w', encoding="utf-8") as md:
+                md.write(md_content)
+            return md_content
+        except TypeError as err:
+            logger.error(
+                'Content post failed with file_dir param contain None. error: {}'.format(err))
+        except OSError as err:
+            logger.error(
+                'Content post failed with: {} is not exist{}'.format(file_dir, err))
+        except AttributeError as err:
+            logger.error('Content post failed with AttributeError: {}'.format(err))
+        except Exception as err:
+            logger.error('Content post failed with: {}'.format(err))
+
+    def delete(self):
+        content_data = list(self._search_content())
+        file_dir = content_data[0].get('path')
+        if path.exists(file_dir):
+            # remove(file_dir)
+            shutil.rmtree(file_dir[0:file_dir.replace('\\', '/').rfind('/')+1])
+            # print(file_dir[0:file_dir.replace('\\','/').rfind('/')+1])
+            logger.info('delete dir: {}'.format(
+                file_dir[0:file_dir.replace('\\', '/').rfind('/')+1]))
+        else:
+            logger.warning('delete fail with {} not exist'.format(file_dir))
+
+
+@contents_app.route('/api/upload/img', methods=['POST'])
+def upload_img():
+    img_data = request.files['image']
+    file_dir = _search_dir(request.args.get('url', type=str))
+    print("file_dir 1 is " + file_dir)
+    img_dir = path.join(file_dir, 'img/{}'.format(img_data.filename))
+    print("img_dir 1 is " + img_dir)
+    img_data.save(img_dir)
+    return {'filename': img_data.filename}
+
+@contents_app.route('/api/upload/img_to_dir', methods=['POST'])
+def upload_img_to_dir():
+    img_data = request.files['image']
+    file_dir = _search_dir(request.args.get('url', type=str))
+    print("file_dir 2 is " + file_dir)
+    img_dir = path.join(file_dir, 'img/{}'.format(request.args.get('filename', type=str)))
+    print("img_dir 2 is " + img_dir)
+    img_data.save(img_dir)
+    return {'filename': img_data.filename}
+
+
+@contents_app.route('/api/delete/img', methods=['DELETE'])
+def delete_img():
+    try:
+        file_dir = _search_dir(request.args.get('url', type=str))
+        img_dir = path.join(file_dir, 'img/{}'.format(request.args.get('filename', type=str)))
+        remove(img_dir)
+        logger.info('delete img: {}'.format(img_dir))
+        return {'filename': request.args.get('filename', type=str)}
+    except TypeError as err:
+        logger.error('delete img: {} failed with file_dir is None. error: {}'.format(
+            request.args.get('filename', type=str), err))
+        return {'filename': request.args.get('filename', type=str)}
+    except OSError as err:
+        logger.error('delete img: {} failed with img_dir is not exist. error: {}'.format(
+            request.args.get('filename', type=str), err))
+        return {'filename': request.args.get('filename', type=str)}
+    except Exception as err:
+        logger.error('delete img: {} failed with {}'.format(
+            request.args.get('filename', type=str), err))
+        return {'filename': request.args.get('filename', type=str)}
+
+
+@contents_app.route('/api/upload/static/img', methods=['POST'])
+def upload_static_img():
+    img_data = request.files['image']
+    img_dir = path.join(STATIC_DIR, 'img', 'title')
+    print("static img directory is " + img_dir) #debug use
+    if not path.exists(img_dir): # foolproofing, just in case
+        mkdir(img_dir)
+    img_file_dir = path.join(img_dir, request.args.get('filename', type=str))
+    print("static img file directory is " + img_file_dir) #debug use
+    img_data.save(img_file_dir)
+    return {'filename': request.args.get('filename', type=str)}
+
+
+@contents_app.route('/api/new_content', methods=['POST'])
+def gen_content():
+    print(request.json.get('type'))
+    print(get_trans_title_url_name(request.json.get('type')))
+    front_matter = request.json.get('frontMatter', '---\n---')
+    name = request.json.get('name', 'Undefind')
+    if request.json.get('type') == "blog":
+        dir_ = CONTENT_DIR + "/"+ "maincategories" + "/" + name
+        if not path.exists(dir_):
+            mkdir(dir_)
+        if not path.exists(path.join(dir_, 'img')):
+            mkdir(path.join(dir_, 'img'))
+        with open(path.join(dir_, 'index.md'), 'w', encoding="utf-8") as md:
+            md.write(front_matter)
+            # print(front_matter)
+    else:
+        dir_ = path.join(CONTENT_DIR, request.json.get('type'), name)
+        print(dir_)
+        if dir_:
+            if not path.exists(dir_):
+                mkdir(dir_)
+            else:
+                return Response({}, status=201)
+            if not path.exists(path.join(dir_, 'img')):
+                mkdir(path.join(dir_, 'img'))
+            with open(path.join(dir_, 'index.md'), 'w', encoding="utf-8") as md:
+                md.write(front_matter)
+
+    return {'new_content': name}
+
+
+@contents_app.route('/api/get_cats', methods=['POST', 'GET'])
+def get_cats():
+    """ front_matter = request.json.get('frontMatter', '---\n---')
+    name = request.json.get('name', 'Undefind')
+    dir_ = path.join(_search_content_dir(
+        request.json.get('type'), request.json.get('categories')), name) """
+    #print(_search_content_dir('blog', 'home_inspection_knowledge'))
+    return {}
+
+
+@contents_app.route('/api/new_cat', methods=['POST'])
+def gen_cat():
+    front_matter = request.json.get('frontMatter', '---\n---')
+    name = request.json.get('name', 'Undefind')
+    dir_ = path.join(_search_content_dir(
+        request.json.get('type'), request.json.get('categories')), name)
+    #print(request.json.get('type') + ',' + request.json.get('categories'))
+    if dir_:
+        if not path.exists(dir_):
+            mkdir(dir_)
+        else:
+            return Response({}, status=201)
+        if not path.exists(path.join(dir_, 'img')):
+            mkdir(path.join(dir_, 'img'))
+        with open(path.join(dir_, 'index.md'), 'w', encoding="utf-8") as md:
+            md.write(front_matter)
+    return {'new_content': name}
+
+
+api.add_resource(Content, '/api/contents')

models/manages/routes.py

@@ -0,0 +1,89 @@
+from flask import request, Blueprint
+from flask_restful import Resource, Api
+import logging
+from bs4 import BeautifulSoup
+from models.config import HOMEPAGE_DIR, ROOM_PLANNER_DIR
+from models.utils.parsers import get_section_parser, SectionParser
+from models.utils.validators import is_valid_section
+from models.utils import read_line_md, write_md
+
+manages_app = Blueprint('manages', __name__)
+api = Api(manages_app)
+logger = logging.getLogger(__name__)
+DIR = {'home': HOMEPAGE_DIR, 'room_planner': ROOM_PLANNER_DIR}
+
+
+class RequiredData():
+    def __init__(self):
+        self.is_amp_img, self.is_amp_youtube = False, False
+
+    def load(self, section_data, text):
+        if '<b' in text:
+            soup = BeautifulSoup(text, "html.parser")
+            section_data.setdefault('b', []).append(soup.b.string)
+        elif '<a ' in text and '</a>' in text:
+            soup = BeautifulSoup(text, "html.parser")
+            section_data.setdefault('a', []).append(soup.a.string)
+        elif '<p' in text:
+            soup = BeautifulSoup(text, "html.parser")
+            section_data.setdefault('p', []).append(soup.p.string)
+        elif '<amp-img' in text:
+            self.is_amp_img = True
+        elif '<amp-youtube' in text:
+            self.is_amp_youtube = True
+        elif 'card-text' in text:
+            soup = BeautifulSoup(text, "html.parser")
+            section_data.setdefault('card_text', []).append(soup.div.string)
+        elif 'title mb' in text:
+            soup = BeautifulSoup(text, "html.parser")
+            section_data.setdefault('title_mb_text', []).append(soup.div.string)
+        if self.is_amp_img:
+            if 'src' in text:
+                src = text.split('src=')[-1].replace('"', '').replace('\n', '')
+                section_data.setdefault('img', []).append({'src': src})
+            if '</amp-img' in text:
+                self.is_amp_img = False
+        elif self.is_amp_youtube:
+            if 'data-videoid' in text:
+                videoid = text.split('data-videoid')[-1].replace('"', '').replace('\n', '')
+                section_data.setdefault('yt_video', []).append({'videoid': videoid})
+            if '</amp-youtube' in text:
+                self.is_amp_youtube = False
+
+
+class ManageData(Resource):
+    def get(self):
+        result = []
+        require_data = RequiredData()
+        for line in read_line_md(DIR.get(request.args.get('page', type=str), [])):
+            if '<section' in line:
+                soup = BeautifulSoup(line, "html.parser")
+                section_class = '_'.join(soup.find_all(class_=True)[0]['class'])
+                result.append({'sectionClass': section_class})
+            elif not result:
+                # for skip the line before fist section
+                continue
+            else:
+                require_data.load(result[-1], line)
+        return result
+
+    def post(self):
+        is_target_class_section = False
+        content = ''
+        section_parser = SectionParser(request.json)
+        for line in read_line_md(DIR.get(request.args.get('page', type=str), [])):
+            if is_target_class_section:
+                if '</section>' in line:
+                    is_target_class_section = False
+                content = section_parser.update(content, line)
+            else:
+                content += line
+            if is_valid_section(request.args.get('section', type=str), line):
+                is_target_class_section = True
+                section_parser = get_section_parser(
+                    request.args.get('section', type=str))(request.json)
+        write_md(DIR.get(request.args.get('page', type=str)), content)
+        return {'content': content}
+
+
+api.add_resource(ManageData, '/api/manages/data')

models/statics/routes.py

@@ -0,0 +1,46 @@
+from flask import request, Blueprint
+from flask_restful import Resource, Api
+from os import path, remove, listdir
+import logging
+from models.config import STATIC_DIR
+
+statics_app = Blueprint('statics', __name__)
+api = Api(statics_app)
+logger = logging.getLogger(__name__)
+
+
+class StaticImg(Resource):
+    IMG_DIR = path.join(STATIC_DIR, 'img')
+
+    def post(self):
+        img_data = request.files['image']
+        img_dir = path.join(self.IMG_DIR,
+                            request.args.get('type', type=str),
+                            request.args.get('filename', type=str))
+        img_data.save(img_dir)
+        return {'filename': request.args.get('filename', type=str)}
+
+    def delete(self):
+        img_dir = path.join(self.IMG_DIR,
+                            request.args.get('type', type=str),
+                            request.args.get('filename', type=str))
+        remove(img_dir)
+        return {'filename': request.args.get('filename', type=str)} 
+
+
+def get_static_imgs_src(type_):
+    def allow_ext(filename):
+        return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+    result = []
+    ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
+    TYPE_IMG_DIR = path.join(STATIC_DIR, 'img', type_)
+    base_src = path.join('/img', type_)
+    for f in listdir(TYPE_IMG_DIR):
+        if not allow_ext(f):
+            continue
+        result.append(path.join(base_src, f))
+    return result
+
+
+api.add_resource(StaticImg, '/api/statics/img')

models/store_locations/__init__.py

@@ -0,0 +1,7 @@
+from os import path
+from models.config import CONTENT_DIR
+
+
+STORE_CONTENT_DIR = {'north': path.join(CONTENT_DIR, 'store_north'),
+                     'central': path.join(CONTENT_DIR, 'store_central'),
+                     'south': path.join(CONTENT_DIR, 'store_south')}

models/store_locations/routes.py

@@ -0,0 +1,104 @@
+from flask import request, Blueprint
+from flask_restful import Resource, Api
+from os import path, makedirs
+import logging
+from bs4 import BeautifulSoup
+from models.config import CONTENT_DIR
+from models.utils import read_line_md, gen_md_file_dirs, translate, get_now_time
+from models.store_locations.templates import store_location_template, amp_img_template
+from models.store_locations import STORE_CONTENT_DIR
+from models.statics.routes import get_static_imgs_src
+
+
+store_locations_app = Blueprint('store_locations', __name__)
+logger = logging.getLogger(__name__)
+api = Api(store_locations_app)
+
+
+class StoreLocations(Resource):
+    def __init__(self):
+        self.exist_img_file_src = []
+
+    def get_file_data(self, f_dir):
+        result = {}
+        is_amp_img = False
+        for line in read_line_md(f_dir):
+            if 'title: ' in line:
+                result['title'] = line.split('title: ')[-1].replace('"', '').replace('\n', '')
+            elif 'type: ' in line:
+                result['type'] = line.split('type: ')[-1].replace('"', '').replace('\n', '')
+            elif 'url: ' in line:
+                result['url'] = line.split('url: ')[-1].replace('"', '').replace('\n', '')
+            elif '<amp-img' in line:
+                is_amp_img = True
+            elif 'h2 class="mb-4"' in line:
+                result['store'] = BeautifulSoup(line, 'html.parser').h2.string
+            elif '營業時間 | ' in line:
+                result['hour'] = line.split('營業時間 | ')[-1].replace('\n', '')
+            elif '門市電話 | ' in line:
+                result['phone'] = BeautifulSoup(line, 'html.parser').a.string
+            elif '門市地點 | ' in line:
+                result['location'] = BeautifulSoup(line, 'html.parser').a.string
+            elif '停車資訊 | ' in line:
+                result['parking'] = line.split('停車資訊 | ')[-1].replace('\n', '')
+            if is_amp_img:
+                if 'src=' in line:
+                    img_src = line.split('src=')[-1].replace('"', '').replace('\n', '')
+                    if img_src in self.exist_img_file_src:
+                        result.setdefault('imgs', []).append(img_src)
+                if '</amp-img':
+                    is_amp_img = False
+        return result
+
+    def _get_district_name(self, title):
+        return translate(title.replace('門市', '')).lower().replace(' ', '_')
+
+    def _get_amp_img_md(self, imgs, title):
+        result = ''
+        for img_src in imgs:
+            amp_img_md = amp_img_template.format(src=img_src, title=title)
+            result += amp_img_md + '\n'
+        return result
+
+    def get(self):
+        result = {}
+        for zone, dir_ in STORE_CONTENT_DIR.items():
+            self.exist_img_file_src = get_static_imgs_src('store_{}'.format(zone))
+            for f_dir in gen_md_file_dirs(dir_):
+                result.setdefault(zone, []).append(self.get_file_data(f_dir))
+        return result
+
+    def post(self):
+        def get_store_dir():
+            DISTRICT_STORES = {'store_north': '北部門市',
+                               'store_central': '中部門市',
+                               'store_south': '南部門市',
+                               'store_east': '東部門市'}
+            return path.join(CONTENT_DIR,
+                             store_data.get('type'),
+                             DISTRICT_STORES.get(store_data.get('type'), '中部門市'),
+                             store_data.get('title').replace('門市', ''))
+
+        update_md = []
+        for store_data in request.json:
+            store_location_md = store_location_template.format(
+                title=store_data.get('title'),
+                date=get_now_time(),
+                type=store_data.get('type'),
+                url=store_data.get('url'),
+                amp_imgs=self._get_amp_img_md(store_data.get('imgs'), store_data.get('title')),
+                store=store_data.get('store'),
+                hour=store_data.get('hour'),
+                phone_without_dash=store_data.get('phone').replace('-', ''),
+                phone=store_data.get('phone'),
+                location=store_data.get('location'),
+                parking=store_data.get('parking'))
+            store_dir = get_store_dir()
+            makedirs(store_dir, exist_ok=True)
+            with open(path.join(store_dir, 'index.md'), 'w', encoding="utf-8") as md:
+                md.write(store_location_md)
+            update_md.append(store_location_md)
+        return update_md
+
+
+api.add_resource(StoreLocations, '/api/store_locations')

models/store_locations/templates.py

@@ -0,0 +1,58 @@
+store_location_template = '''---
+title: "{title}"
+date: {date}
+lastmod: {date}
+draft: false
+type: "{type}"
+url: "{url}"
+image: ""
+tags:
+---
+
+<section class="section12">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-5 col-sm-12">
+        <div class="block">
+          <div class="section-title">
+            <amp-carousel
+              class="mb-5"
+              width="450"
+              height="300"
+              layout="responsive"
+              type="slides"
+              autoplay
+              delay="2500"
+              role="region"
+              aria-label="小寶優居 | 台中門市">
+{amp_imgs}            </amp-carousel>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-7 col-sm-12">
+        <div class="block ms-md-5 mb-5">
+          <h2 class="mb-4">​{store}</h2>
+          <div>
+            營業時間 | {hour}
+          </div>
+          <div>
+            門市電話 | <a href="tel:{phone_without_dash}">{phone}</a>
+          </div>
+          <div>
+            門市地點 | <a href="https://www.google.com/maps?q={location}" target="_blank">{location}</a>
+          </div>
+          <div class="mb-5">
+            停車資訊 | {parking}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>'''
+
+
+amp_img_template = '''              <amp-img src="{src}"
+                width="450"
+                height="300"
+                layout="responsive"
+                alt="小寶優居 | {title}"></amp-img>'''

models/utils/__init__.py

@@ -0,0 +1,31 @@
+from os import path, walk
+from googletrans import Translator
+from datetime import datetime, timezone, timedelta
+
+
+def write_md(f_dir, content):
+    with open(f_dir, 'w',encoding="utf-8") as md:
+        md.write(content)
+
+
+def read_line_md(f_dir):
+    with open(f_dir, 'r',encoding="utf-8") as md:
+        pre_content = md.readlines()
+    return pre_content
+
+
+def gen_md_file_dirs(dir_):
+    for root, dirs, files in walk(dir_):
+        for f in files:
+            if '.md' not in f:
+                continue
+            yield path.join(root, f)
+
+
+def translate(text):
+    result = Translator().translate(text, dest='en')
+    return result.text
+
+
+def get_now_time():
+    return datetime.now(timezone(timedelta(hours=+8))).isoformat(timespec="seconds")

models/utils/parsers.py

@@ -0,0 +1,119 @@
+from bs4 import BeautifulSoup
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+def get_section_parser(section_class_name):
+    return SECTION_PARSER.get(section_class_name, SectionParser)
+
+
+class SectionParser():
+    def __init__(self, update_data):
+        self.update_data = update_data
+        self.b_order, self.p_order, self.img_order, self.a_order = 0, 0, 0, 0
+        self.card_text_order, self.title_mb_text_order, self.yt_video_order = 0, 0, 0
+        self.is_amp_img, self.is_amp_youtube = False, False
+
+    def _get_spaces(self, text):
+        count = 0
+        for i in text:
+            if i == '<':
+                break
+            count += 1
+        return (count - 1) * ' '
+
+    def update(self, content, text):
+        try:
+            if '<b' in text:
+                soup = BeautifulSoup(text, "html.parser")
+                soup.b.string = self.update_data.get('b', [''])[self.b_order]
+                text = self._get_spaces(text) + str(soup)
+                self.b_order += 1
+            elif '<p' in text:
+                soup = BeautifulSoup(text, "html.parser")
+                soup.p.string = self.update_data.get('p', [''])[self.p_order]
+                text = self._get_spaces(text) + str(soup)
+                self.p_order += 1
+            elif '<a ' in text and '</a>' in text:
+                soup = BeautifulSoup(text, "html.parser")
+                soup.a.string = self.update_data.get('a', [''])[self.a_order]
+                text = self._get_spaces(text) + str(soup)
+                self.a_order += 1
+            elif 'card-text' in text:
+                soup = BeautifulSoup(text, "html.parser")
+                soup.div.string = self.update_data.get('card_text', [''])[self.card_text_order]
+                text = self._get_spaces(text) + str(soup)
+                self.card_text_order += 1
+            elif 'title mb' in text:
+                soup = BeautifulSoup(text, "html.parser")
+                soup.div.string = self.update_data.get('title_mb_text', [''])[self.card_text_order]
+                text = self._get_spaces(text) + str(soup)
+                self.title_mb_text_order += 1
+            elif '<amp-img' in text:
+                self.is_amp_img = True
+            elif '<amp-youtube' in text:
+                self.is_amp_youtube = True
+            if self.is_amp_img:
+                if 'src=' in text:
+                    text_list = text.split('src=')
+                    text_list[-1] = 'src="{}"\n'.format(self.update_data.get(
+                        'img', [{}])[self.img_order].get('src', ''))
+                    text = ''.join(text_list)
+                if '</amp-img>' in text:
+                    self.is_amp_img = True
+                    self.img_order += 1
+            elif self.is_amp_youtube:
+                if 'data-videoid' in text:
+                    text_list = text.split('data-videoid=')
+                    text_list[-1] = 'data-videoid="{}"\n'.format(self.update_data.get(
+                        'yt_video', [{}])[self.yt_video_order].get('videoid', ''))
+                    text = ''.join(text_list)
+                if '</amp-youtube>' in text:
+                    self.is_amp_youtube = True
+                    self.yt_video_order += 1
+        except Exception as err:
+            logger.error('section parser failed with {}'.format(err))
+        finally:
+            content += text
+        return content
+
+
+class Section18SectionParser(SectionParser):
+    def __init__(self, update_data):
+        super().__init__(update_data)
+        self.is_pure_div = False
+        self.is_pure_div_order, self.mb_5_order = 0, 0
+
+    def _update_div_data(self, text, update_key, order):
+        soup = BeautifulSoup(text, "html.parser")
+        soup.div.string = self.update_data.get(update_key, [''])[order]
+        return self._get_spaces(text) + str(soup)
+
+    def update(self, content, text):
+        try:
+            if 'title mb' in text:
+                text = self._update_div_data(text, 'title_mb_text', self.card_text_order)
+                self.title_mb_text_order += 1
+                if self.title_mb_text_order == 2:
+                    self.is_pure_div = True
+            elif self.is_pure_div:
+                text = self._update_div_data(text, 'pure_div_text', self.is_pure_div_order)
+                self.is_pure_div_order += 1
+                self.is_pure_div = False
+            elif 'mb-5' in text:
+                text = self._update_div_data(text, 'mb_5_text', self.mb_5_order)
+                self.mb_5_order += 1
+            elif '<a ' in text:
+                soup = BeautifulSoup(text, "html.parser")
+                soup.a.string = self.update_data.get('a', [''])[self.a_order]
+                text = self._get_spaces(text) + str(soup)
+                self.a_order += 1
+        except Exception as err:
+            logger.error('section parser failed with {}'.format(err))
+        finally:
+            content += text
+        return content
+
+
+SECTION_PARSER = {'section18': Section18SectionParser}

models/utils/validators.py

@@ -0,0 +1,88 @@
+def is_valid_section(section_class_name, text):
+    return IS_VALID_SECTION.get(section_class_name, unvalid_section)(text)
+
+
+def is_valid_section3_section(text):
+    return 'class="section3"' in text
+
+
+def is_valid_section3_text_center_section(text):
+    return 'class="section3 text-center"' in text
+
+
+def is_valid_section13_overly_section(text):
+    return 'class="section13 overly"' in text
+
+
+def is_valid_section14_section(text):
+    return 'class="section14"' in text
+
+
+def is_valid_section14_d_flex_section(text):
+    return 'class="section14 d-flex align-items-center"' in text
+
+
+def is_valid_section13_section(text):
+    return 'class="section13"' in text
+
+
+def is_valid_section16_section(text):
+    return 'class="section16"' in text
+
+
+def is_valid_section17_section(text):
+    return 'class="section17"' in text
+
+
+def is_valid_section18_section(text):
+    return 'class="section18"' in text
+
+
+def is_valid_section19_section(text):
+    return 'class="section19"' in text
+
+
+def is_valid_section22_section(text):
+    return 'class="section22"' in text
+
+
+def is_valid_section25_section(text):
+    return 'class="section25"' in text
+
+
+def is_valid_section26_section(text):
+    return 'class="section26"' in text
+
+
+def is_valid_section27_section(text):
+    return 'class="section27"' in text
+
+
+def is_valid_section28_section(text):
+    return 'class="section28"' in text
+
+
+def is_valid_section29_section(text):
+    return 'class="section29"' in text
+
+
+def unvalid_section(text):
+    return None
+
+
+IS_VALID_SECTION = {'section3': is_valid_section3_section,
+                    'section3_text-center': is_valid_section3_text_center_section,
+                    'section13_overly': is_valid_section13_overly_section,
+                    'section13': is_valid_section13_section,
+                    'section14': is_valid_section14_section,
+                    'section14_d-flex_align-items-center': is_valid_section14_d_flex_section,
+                    'section16': is_valid_section16_section,
+                    'section17': is_valid_section17_section,
+                    'section18': is_valid_section18_section,
+                    'section19': is_valid_section19_section,
+                    'section22': is_valid_section22_section,
+                    'section25': is_valid_section25_section,
+                    'section26': is_valid_section26_section,
+                    'section27': is_valid_section27_section,
+                    'section28': is_valid_section28_section,
+                    'section29': is_valid_section29_section}

requirements.txt

@@ -0,0 +1,26 @@
+certifi==2020.12.5
+chardet==3.0.4
+click==7.1.2
+contextvars==2.4
+Flask==1.1.2
+Flask-WTF==0.14.3
+googletrans==3.1.0a0
+h11==0.9.0
+h2==3.2.0
+hpack==3.0.0
+hstspreload==2020.12.22
+httpcore==0.9.1
+httpx==0.13.3
+hyperframe==5.2.0
+idna==2.10
+immutables==0.15
+itsdangerous==1.1.0
+Jinja2==2.11.3
+MarkupSafe==1.1.1
+requests==2.25.1
+rfc3986==1.4.0
+sniffio==1.2.0
+urllib3==1.26.4
+Werkzeug==1.0.1
+flake8==3.9.0
+WTForms==2.3.3

run.py

@@ -0,0 +1,14 @@
+from backstage import create_app
+#from models import create_app
+import logging
+
+logger = logging.getLogger(__name__)
+
+app = create_app()
+
+
+if __name__ == '__main__':
+    logging.basicConfig(
+        level=logging.INFO,
+        format='%(asctime)s %(levelname)s %(message)s')
+    app.run(host='127.0.0.1', debug=True, port=9001)

setup.cfg

@@ -0,0 +1,2 @@
+[flake8]
+max-line-length = 100