layui富文本编辑器前后端代码
时间: 2023-11-12 07:45:39 浏览: 39
以下是layui富文本编辑器的前后端代码示例:
前端代码:
```html
<!-- 引入 layui 的样式文件 -->
<link rel="stylesheet" href="//cdn.layui.com/layui/v2.5.6/css/layui.css">
<!-- 引入富文本编辑器的样式文件 -->
<link rel="stylesheet" href="//cdn.layui.com/layui-v2.5.6/plugins/editor.md/css/editormd.min.css">
<!-- 引入 layui 的 JS 文件 -->
<script src="//cdn.layui.com/layui/v2.5.6/layui.js"></script>
<!-- 引入富文本编辑器的 JS 文件 -->
<script src="//cdn.layui.com/layui-v2.5.6/plugins/editor.md/editormd.min.js"></script>
<!-- 在页面中创建一个 textarea 元素,用于存储富文本编辑器的内容 -->
<textarea id="editor" name="content"></textarea>
<script>
// 创建富文本编辑器
var editor = editormd("editor", {
width: "100%",
height: 640,
path: "//cdn.layui.com/layui-v2.5.6/plugins/editor.md/lib/",
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"],
imageUploadURL: "/upload" // 上传图片的后端接口地址
});
</script>
```
后端代码:
```python
from flask import Flask, request, jsonify
from werkzeug.utils import secure_filename
import os
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = './uploads'
app.config['ALLOWED_EXTENSIONS'] = set(['jpg', 'jpeg', 'gif', 'png', 'bmp'])
# 判断文件后缀是否在允许的范围内
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in app.config['ALLOWED_EXTENSIONS']
# 上传图片的接口
@app.route('/upload', methods=['POST'])
def upload():
file = request.files['editormd-image-file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return jsonify({
"success": 1,
"message": "上传成功",
"url": "/uploads/" + filename
})
else:
return jsonify({
"success": 0,
"message": "上传失败"
})
if __name__ == '__main__':
app.run()
```
以上代码示例中,前端使用了 layui 的富文本编辑器,在页面中创建了一个 textarea 元素,用于存储编辑器的内容。后端使用了 Flask 框架,提供了一个上传图片的接口 `/upload`,接口将图片保存到服务器上的指定目录,并返回图片的 URL。在创建富文本编辑器时,设置了上传图片的后端接口地址为 `/upload`。具体实现可以根据自己的需求进行调整。