layui 富文本textarea 获取textarea 的值,并保存的完整示例
时间: 2023-10-25 21:17:58 浏览: 132
fle中textarea控件中html文本显示与转换
4星 · 用户满意度95%
好的,以下是一个完整的 layui 富文本 textarea 获取值并保存的示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui 富文本编辑器示例</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md8 layui-col-md-offset2">
<form class="layui-form" action="">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">内容</label>
<div class="layui-input-block">
<textarea id="myTextarea" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
layui.use(['form', 'layedit'], function(){
var form = layui.form;
var layedit = layui.layedit;
// 初始化富文本编辑器
var index = layedit.build('myTextarea');
// 监听表单提交事件
form.on('submit(save)', function(data){
// 获取富文本编辑器的内容
var content = layedit.getContent(index);
console.log('content:', content);
// 发送保存请求
$.ajax({
type: 'POST',
url: '/save',
data: {content: content},
success: function(result){
console.log('保存成功');
},
error: function(){
console.log('保存失败');
}
});
return false;
});
});
</script>
</body>
</html>
```
后端代码(使用 Node.js 和 Express):
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.post('/save', (req, res) => {
const content = req.body.content;
console.log('保存内容:', content);
res.send('保存成功');
});
app.listen(3000, () => console.log('服务器启动成功'));
```
在示例中,我们使用了 jQuery 发送了一个 POST 请求到 `/save` 路径,并携带了富文本编辑器的内容。后端接收到请求后,将内容打印到控制台,并返回了一个保存成功的响应。
你可以将上述代码复制到本地运行,查看效果。
阅读全文