Streamlit使用记录

富文本编辑器streamlit-quill

pip intsall streamlit-quill

调整宽度：

st.set_page_config(page_title="xxx", layout="wide")
col_main, col_sidebar = st.columns([1, 1]) # 列表的两数代表左右列的宽度

import streamlit as st
from streamlit_quill import st_quill
import html2markdown
import base64
import os

# 设置页面配置
st.set_page_config(page_title="Markdown 编辑器", layout="wide")

# 初始化会话状态
if "article_content" not in st.session_state:
    st.session_state.article_content = ""

def html_to_markdown(html_content):
    """将HTML内容转换为Markdown格式"""
    return html2markdown.convert(html_content)

def upload_image(image_file):
    """上传图片并返回图片的URL"""
    if image_file is not None:
        # 将图片文件保存到本地
        image_path = os.path.join("uploads", image_file.name)
        with open(image_path, "wb") as f:
            f.write(image_file.getbuffer())
        
        # 返回图片的URL
        return image_path
    return None

# 创建左右两列，设置宽度比例
col1, col2 = st.columns([2, 2])  # 左侧列宽度为2，右侧列宽度为3

# 左侧编辑器
with col1:
    st.header("Markdown 编辑器")
    content = st_quill(
        value=st.session_state.article_content,
        placeholder="开始编写文章...",
        #html=True,# 启用HTML模式
        key="quill_editor",
        # toolbar=[
        #     ['bold', 'italic', 'underline', 'strike'],  # 文字格式
        #     ['blockquote', 'code-block'],  # 引用和代码块
        #     [{'header': 1}, {'header': 2}],  # 标题
        #     [{'list': 'ordered'}, {'list': 'bullet'}],  # 列表
        #     [{'script': 'sub'}, {'script': 'super'}],  # 上下标
        #     [{'size': ['small', False, 'large', 'huge']}],  # 字体大小
        #     ['link', 'image'],  # 链接和图片
        #     ['clean']  # 清除格式
        # ]
    )

    # 更新会话状态
    if content:
        st.session_state.article_content =content

# 右侧预览
with col2:
    st.header("实时预览")
    st.write(st.session_state.article_content, unsafe_allow_html=True)