KINDEDITOR取值并写入数据库的操作

首先引入KINDEDITOR

    <link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
        <script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script>
        <script charset="utf-8" src="/kindeditor/lang/zh_CN.js"></script>
        <script>
            var editor;
            KindEditor.ready(
             function (K) {
                 editor = K.create('#textarea1', {
                     //上传处理程序的路径
                     uploadJson: '/KindEditor/asp.net/upload_json.ashx',
                     imageSizeLimit: '10MB', //批量上传图片单张最大容量
                     imageUploadLimit: 30, //批量上传图片同时上传最多个数
                     //文件管理处理程序的路径
                     fileManagerJson: '/KindEditor/asp.net/file_manager_json.ashx',
                     allowFileManager: true,
                     //要取值设置这里 这个函数就是同步KindEditor的值到textarea文本框
                     afterCreate: function () {
                         var self = this;
                         K.ctrl(document, 13, function () {
                             self.sync();
                             K('form[name=example]')[0].submit();
                         });
                         K.ctrl(self.edit.doc, 13, function () {
                             self.sync();
                             K('form[name=example]')[0].submit();
                         });
                     },
                     //上传后执行的回调函数,获取上传图片的路径
                     //afterUpload: function (data) {
                     //    alert(data);
                     //},
                     width: '900px;',
                     height: '500px;',
                     //编辑工具栏
                     items: [
                     'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                     'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                     'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                     'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                     'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                     'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                     'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                     'anchor', 'link', 'unlink', '|', 'about'
                     ],
                     afterCreate: function () { //kindeditor创建后,将编辑器的内容设置到原来的textarea控件里
                         this.sync();
                     },
                     afterChange: function () { //编辑器内容发生变化后,将编辑器的内容设置到原来的textarea控件里
                         this.sync();
                     },
                     afterBlur: function () { //编辑器聚焦后,将编辑器的内容设置到原来的textarea控件里
                         this.sync();
                     }
                 }
                 );

             }
             );
        </script>
<textarea id="textarea1" name="textarea1" style="width:100%;height:200px;border: 0 none;visibility:hidden;"></textarea>

使用FORM表单提交

 <asp:Button ID="submit" runat="server" Text="确&nbsp;认" class="btn btn-primary" Style="margin-right: 20px"  OnClick="submit_Click"  />

CS后台直接获取

 string notes = Request.Form["textarea1"];

从数据库中读取

<textarea id="textarea1" name="textarea1" style="width:100%;height:200px;border: 0 none;visibility:hidden;"><%=newsConcent%></textarea>

后台给newsConcent赋值内容即可。

 

转载于:https://www.cnblogs.com/moil/p/11077225.html

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于KindEditor的文件上传、存储与回显的前端、后端、数据库代码示例: 前端代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>KindEditor文件上传示例</title> <!-- 引入KindEditor --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/lang/zh-CN.js"></script> </head> <body> <!-- 创建一个textarea作为KindEditor的编辑器 --> <textarea id="editor" name="content"></textarea> <!-- 创建一个按钮用于触发文件上传 --> <button id="uploadBtn">上传图片</button> <!-- 显示上传后的图片 --> <div id="preview"></div> <script> $(function() { // 创建一个KindEditor编辑器 var editor = KindEditor.create('#editor', { basePath: 'https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/', uploadJson: '/upload', // 指定上传文件的后端接口 allowFileManager: false }); // 点击上传按钮时,触发文件上传 $('#uploadBtn').click(function() { editor.sync(); // 将编辑器中的内容同步到textarea editor.hideDialog(); // 关闭编辑器的弹窗 // 使用ajax上传文件 $.ajax({ url: '/upload', type: 'POST', cache: false, data: new FormData($('form')[0]), // 表单数据 processData: false, contentType: false }).done(function(res) { if (res.code === 0) { // 上传成功,显示上传后的图片 $('#preview').html('<img src="' + res.data.url + '">'); } else { alert(res.msg); } }).fail(function() { alert('上传失败,请重试!'); }); }); }); </script> </body> </html> ``` 后端代码(使用Node.js + Express实现): ```js const express = require('express'); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const app = express(); // 创建一个multer实例,用于处理文件上传 const upload = multer({ storage: multer.diskStorage({ destination: function(req, file, cb) { // 指定上传文件的存储目录 cb(null, path.join(__dirname, '/public/uploads')); }, filename: function(req, file, cb) { // 指定上传文件的文件名,这使用时间戳 + 文件后缀名 const ext = path.extname(file.originalname); cb(null, Date.now() + ext); } }) }); // 处理文件上传的接口 app.post('/upload', upload.single('imgFile'), function(req, res) { const file = req.file; if (!file) { return res.json({ code: -1, msg: '请选择要上传的文件!' }); } // 文件上传成功后,将图片信息存储到数据库中 // 这假设使用MongoDB作为数据库,图片信息存储在名为images的集合中 const db = require('mongodb').MongoClient; const url = 'mongodb://localhost:27017'; const dbName = 'test'; db.connect(url, function(err, client) { if (err) { console.log('数据库连接失败:', err); } else { const db = client.db(dbName); const collection = db.collection('images'); collection.insertOne({ url: '/uploads/' + file.filename }, function(err, result) { if (err) { console.log('图片信息插入数据库失败:', err); } else { console.log('图片信息插入数据库成功!'); } client.close(); }); } }); // 返回上传成功的结果 res.json({ code: 0, msg: '上传成功!', data: { url: '/uploads/' + file.filename } }); }); // 启动服务器 app.listen(3000, function() { console.log('服务器启动成功!'); }); ``` 数据库代码(使用MongoDB实现): ```js // 创建一个名为test的数据库 use test // 在test数据库中创建一个名为images的集合 db.createCollection('images') // 插入一条图片信息到images集合中 db.images.insertOne({ url: '/uploads/1629436553080.jpg' }) ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值