【django】前端展示输入源格式文本

Ⅰ 背景

        增加一个记事本功能，可以将记事内容按照原格式展示到页面。

---

Ⅱ  思路

       前端通过textarea文本输入，后端使用markdown将文本html标签化保存到数据库，查询返回到前端实现事件展示。

Ⅲ  详细描述

        1.步骤一 

        前端输入（主要处理内容部分）textarea只是简单文本输入，这里需求是将文本在格式编辑器编辑好直接粘贴进去，能够保存编辑原样式即可。

        2.步骤二

        后端文本保存增加markdown标签化（需安装库：pip install markdown），存入数据库

# 假如是前端返回content
_your_text = 'this is my web content'
# 将前端返回文本标签化，直接存入数据库
database_save = markdown.markdown(_your_text )

        3.步骤三

        通过将数据库保存内容返回到前端，此处有个小坑，下面是坑点，前端直接使用返回内容

{{ content }}

        前端直接加载文本出现情况如下：

        问题就是html标签无法被识别。处理：在文本引用位置增加   |safe，如下：

{{ content|safe }}

         保存刷新，结果：

Ⅳ  总结

        如果直接使用markdown，可能效果会固定，所以可以在存入数据中增加一些自定义html样式；亦可同方式通过数据定义id，在前端定义css样式，这里不是重点就不细说了：而且这里粘贴格式文本展示有一些瑕疵，后续优化。

        附目前暂用效果实现

_post_data_dict['content'] = '<pre style="font-size:20px;background-color:rgb(206, 238, 217)">{}</pre>'.format(markdown.markdown(_post_data['content'][0]))

数据库实际存入：

OVER！ 

---

后续补充！

        去除markdown！

        案例：

        添加内容中如果带有缩进+空行等样式，保存后markdown会插入一些html标签，这时候就需要各种替换，首先麻烦，还有就是替换后的效果可能会乱：

        

                编辑：

        markdown可能会在文本中间插入一些标签（目前发现会对首行空格、空行），这时候编辑内容就不纯粹。

        解决办法：

        我这里就只是去除了markdown文本标签话，其他没变

# 原有
_post_data_dict['content'] = '{}{}{}'.format(events_html_header,
 markdown.markdown(_post_data['content'][0]), events_html_footer)

# 修改后
_post_data_dict['content'] = '{}{}{}'.format(events_html_header, 
_post_data['content'][0], events_html_footer)

# 仅仅是固定了文本首尾标签

        这时候发现文本不管怎么保存，新增和编辑都是一个样式 ，数据库写入数据

        后续补充---总结：

        直接将数据存入一个固定html样式中存入数据库，编辑时候将文本首尾固定样式去除返回页面。

        动态效果：

        保存文本markdown标签化：

带markdown

         

        去除markdown标签化后：

不带markdown