php-使用wangeditor实现数据库数据插入编辑器中

于 2024-01-25 16:35:55 发布
阅读量618 收藏 6
点赞数 7
分类专栏： php wangEditor 文章标签： 数据库 php 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46001736/article/details/135846959
版权
文章介绍了如何在PHP中从数据库查询数据并使用htmlspecialchars_decode解码，以及如何在JavaScript中处理从数据库获取的数据，最后展示了如何在编辑器中显示和修改公告信息的过程。
摘要由CSDN通过智能技术生成

一、数据库查询

从数据库中查询需要展示的数据项$_POST['neirong'] = $row['neirong'];

<?php
if (isset($_GET['Msgid'])) {
    //查询页面数据    
    $sel_sql = "SELECT * from message_board where id = '" . $_GET['Msgid'] . "'";
    $sel_result = DB_query($sel_sql, $db);
    if ($row = DB_fetch_array($sel_result)) {
        $_POST['title'] = $row['title'];
        $_POST['msg_type'] = $row['msg_type'];
        $_POST['enable_flag'] = $row['enable_flag'];
        $_POST['neirong'] = $row['neirong'];
        $_POST['UserID'] = $row['created_by'];
    } else {
        prnMsg(_('找不到相应数据！'), 'error');
    }
}
?>

二、js中取出变量，并对数据进行处理

var dataFromDatabase = '<?php echo htmlspecialchars_decode($_POST['neirong']); ?>';

 htmlspecialchars_decode()是PHP中的一个函数，用于将字符串中的HTML实体转换回它们对应的字符。在HTML中，有些字符在文本中表示特殊意义，因此需要将其转换为对应的实体表示。例如，<表示小于号（<），>表示大于号（>），&表示&符号等。

例如：我现在的数据库中存的数据是&lt;h1&gt;标题1&lt;/h1&gt;&lt;p&gt;正文1&lt;/p&gt; ，name这个函数就会转换为 <h1>标题1</h1><p>正文1</p>

三、 在编辑器进行显示

通过html: dataFromDatabase,进行设置

//创建编辑器
const editor = createEditor({
    selector: '#editor-container',
    html: dataFromDatabase,
    config: editorConfig,
    mode: 'default', // or 'simple'
})

页面效果

页面完整代码

<?php
ob_start();
include('includes/session.inc');
$Title = _('修改公告信息');
include('includes/header.inc');
//设置默认值
//获取url的参数
if (isset($_GET['Msgid'])) {
    //查询页面数据    
    $sel_sql = "SELECT * from message_board where id = '" . $_GET['Msgid'] . "'";
    $sel_result = DB_query($sel_sql, $db);
    if ($row = DB_fetch_array($sel_result)) {
        $_POST['title'] = $row['title'];
        $_POST['msg_type'] = $row['msg_type'];
        $_POST['enable_flag'] = $row['enable_flag'];
        $_POST['neirong'] = $row['neirong'];
        $_POST['created_by'] = $row['created_by'];
    } else {
        prnMsg(_('找不到相应数据！'), 'error');
    }
}
?>
<?php
echo '<p class="page_title_text">
		<img src="' . $RootPath . '/css/' . $Theme . '/images/customer.png" title="' . _('联络单建立') .
    '" alt="" />' . ' ' . _('公告修改') . '
	</p>';
if (isset($_POST['UpdateMsg'])) {
    $InputError = 0;
    $i = 1;
    if (mb_strlen($_POST['title']) == 0) {
        $InputError = 1;
        prnMsg(_('标题不能为空！'), 'error');
        $Errors[$i] = 'title';
        $i++;
    } elseif ($_POST['neirong'] == '&lt;p&gt;&lt;br&gt;&lt;/p&gt;') {
        $InputError = 1;
        prnMsg(_('内容不能为空！'), 'error');
        $Errors[$i] = 'neirong';
        $i++;
    } elseif ($_POST['msg_type'] == '&lt;p&gt;&lt;br&gt;&lt;/p&gt;') {
        $InputError = 1;
        prnMsg(_('公告类型不能为空！'), 'error');
        $Errors[$i] = 'msg_type';
        $i++;
    }
    if ($InputError != 1) {
        $SQL_ClientSince = FormatDateForSQL($_POST['ClientSince']);
        if (isset($_POST['UpdateMsg'])) { //it is a new  Customer
            $update_sql = "
                update message_board
                    set title='" . $_POST['title'] . "' ,
                    msg_type='" . $_POST['msg_type'] . "' , 
                    neirong='" . strval($_POST['neirong']) . "' , 
                    enable_flag ='" . $_POST['enable_flag'] . "' , 
                    last_updated_by = '" . $_SESSION['UserID'] . "',
                    last_update_date = '" . time() . "'
                where id='" . $_POST['Msgid'] . "'
            ";
            $ErrMsg = _('This customer could not be added because');
            $update_result = DB_query($update_sql, $db, $ErrMsg);
            prnMsg(_('修改公告成功' . $OrderNum), 'success');
            echo '<br />';
        }
    } else {
        prnMsg(_('修改公告失败！'), 'error');
    }
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>公告修改</title>
    <link rel="shortcut icon" href="/JXC/favicon.ico" />
    <link rel="icon" href="/JXC/favicon.ico" />
    <meta http-equiv="Content-Type" content="application/html; charset=utf-8" />
    <link href="/css/xenos/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/JXC/javascripts/miscfunctions.js"></script>
    <script type="text/javascript" src="/JXC/javascripts/wdatepicker.js"></script>
    <script type="text/javascript">
        var basepath = '/JXC/statics/base/images';
    </script>
    <script type="text/javascript" src="/JXC/statics/base/js/metvar.js"></script>
    <script type="text/javascript" src="/JXC/statics/base/js/jQuery1.7.2.js"></script>
    <script type="text/javascript" src="/JXC/statics/base/js/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript" src="/JXC/statics/base/js/iframes.js"></script>
    <script type="text/javascript" src="/JXC/statics/base/js/cookie.js"></script>
    <script type="text/javascript" src="/JXC/statics/base/js/jquery.livequery.js"></script>
    <script src="/JXC/javascript/jquery-1.7.2.min.js"></script>
    <script src="/JXC/javascript/lhgdialog.min.js?self=true&skin=chrome"></script>
    <script src="/javascript/bootstrap.min.js"></script>

    <script type="text/javascript">
        /*ajax执行*/
        var lang = 'cn';
        var metimgurl = '/JXC/statics/base/images/';
        var depth = '';
        $(document).ready(function() {
            ifreme_methei();
        });
    </script>
    <script type="text/javascript">
        function metreturn(url) {
            if (url) {
                location.href = url;
            } else if ($.browser.msie) {
                history.go(-1);
            } else {
                history.go(-1);
            }
        }

        function addsave() {
            var v = $('#idcount').val();
            $("#purchase_table_" + v).css("display", "");
            var c = parseInt(v) + 1;
            $('#idcount').val(c);
        }
    </script>
    <link href="api/wangeditor/style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100;
            /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="CanvasDiv">
        <div id="BodyDiv">
            <div id="BodyWrapDiv">
                <form method="post" action="<?php echo  htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'UTF-8'); ?>">
                    <input type="hidden" name="FormID" value="<?= $_SESSION['FormID'] ?>" />
                    <input type="hidden" name="Msgid" value="<?= $_GET['Msgid'] ?>" />
                    <div>
                        <table class="selection">
                            <tr>
                                <td><span style="color:red">*</span>标题</td>
                                <td colspan="20">
                                    <textarea style="width:100%;" cols="100" rows="2" type="text" name="title" maxlength="500"><?= $_POST['title'] ?></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td>公告类型</td>
                                <td><textarea style="width:100%;" type="text" name="msg_type" maxlength="500"><?= $_POST['msg_type'] ?></textarea></td>
                                <td>是否生效</td>
                                <td>
                                    <select style="width:100%;background-color:#fff;" required="required" name="enable_flag" value="">
                                        <?php
                                        if ($_POST['enable_flag'] == 'Y' or $_POST['enable_flag'] == '') {
                                            echo '<option selected="selected" value="Y">' . _('是') . '</option>';
                                            echo '<option value="N">' . _('否') . '</option>';
                                        } else {
                                            echo '<option selected="selected" value="N">' . _('否') . '</option>';
                                            echo '<option value="Y">' . _('是') . '</option>';
                                        }
                                        ?>
                                    </select>
                                </td>
                                <td>创建人</td>
                                <td><input readonly style="width:100%" type="text" name="created_by" value="<?php echo $_POST['created_by'] ?>"></td>
                            </tr>
                            <tr>
                                <td><span style="color:red">*</span>内容</td>
                                <td colspan="20">
                                    <!-- <textarea cols="72" rows="15" type="text" name="neirong" maxlength="500"><?= $_POST['neirong'] ?></textarea> -->
                                    <div id="editor—wrapper" name="editor—wrapper">
                                        <div id="toolbar-container"><!-- 工具栏 --></div>
                                        <div id="editor-container"><!-- 编辑器 --></div>
                                    </div>
                                </td>
                            </tr>
                            <input type="hidden" id="neirong" name="neirong" />
                            <script src=" api/wangeditor/index.js"></script>
                            <script>
                                var dataFromDatabase = '<?php echo htmlspecialchars_decode($_POST['neirong']); ?>';
                                var html; //设置一个变量
                                const {
                                    createEditor,
                                    createToolbar
                                } = window.wangEditor
                                //编辑器配置
                                const editorConfig = {
                                    // MENU_CONF: {},
                                    withCredentials: true, //定义该属性为ture表示允许跨域访问
                                    autofocus: false,
                                    scroll: false,
                                    maxLength: 1200,
                                    minLength: 200,
                                    placeholder: '请输入文本内容', //默认文字
                                    onChange(editor) { //当编辑器中发生改变时，获取最新html代码输出
                                        html = editor.getHtml() //获取HTML内容，editor.getText()是获取纯文本内容
                                        console.log('editor content', html)
                                        //将html的值赋值给id为
                                        document.getElementById('neirong').value = html;
                                        // // 也可以同步到 <textarea>
                                    }
                                }
                                editorConfig.MENU_CONF = {}; //确保 editorConfig.MENU_CONF 对象被正确地初始化
                                editorConfig.MENU_CONF['uploadImage'] = {
                                    // 上传图片的配置
                                    server: 'api/demo.php',
                                    fieldName: 'file',
                                    maxFileSize: 6 * 1024 * 1024,
                                    maxNumberOfFiles: 200,
                                }

                                //创建编辑器
                                const editor = createEditor({
                                    selector: '#editor-container',
                                    html: dataFromDatabase,
                                    config: editorConfig,
                                    mode: 'default', // or 'simple'
                                })
                                //工具栏配置
                                const toolbarConfig = {}

                                // toolbar.getConfig().toolbarKeys
                                //隐藏视频上传功能
                                toolbarConfig.excludeKeys = [
                                    'group-video'
                                ]
                                //创建工具栏
                                const toolbar = createToolbar({
                                    editor,
                                    selector: '#toolbar-container',
                                    config: toolbarConfig,
                                    mode: 'default', // or 'simple'
                                })
                            </script>
                            <tr>
                        </table>
                        </td>
                        </tr>
                        </table>
                        <div class="centre">
                            <input type="submit" name="UpdateMsg" value="修改" />&nbsp;
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.divToilet table tr td a').click(function() {
                $(this).parent('td').toggleClass('highlight');
                if (!($(this).parent('td').hasClass('highlight'))) {
                    $(this).next().val('0');
                } else {
                    $(this).next().val('1');
                }
            });
            //Function to get URL arguments
            function getRequest() {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            }
        });
    </script>
</body>

</html>
<?php
include('includes/footer.inc');
?>

25号底片~
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wangEditor富文本实现自定义插入数据（手把手）
Jul的博客
05-29 553
vue2和wangEditor自定义插入内容按钮实战。
wangeditor+vue
baidu_36583119的博客
12-03 591
第一步：安装 npm install wangeditor 第二步：导入 import Editor from 'wangeditor' 第三步：定义一个全局属性 data(){ editor:null, } 第四步：封装成一个方法,然后在你需要的时候调用 methods:{ createEditor(){ // 判空，防止重复创建 ...
wangEditor系列之内容处理
老__L的博客
05-11 4392
内容处理
wangEditor插件判断用户是否有输入内容
m0_62857167的博客
05-17 1076
富文本框、wangEditor、vue3、判断内容是否为空
wangEditor富文本框的使用
yehaocheng520的博客
05-10 2569
wangEditor 轻量级web富文本编辑器，配置方便，使用简单 使用npm下载： npm install wangeditor 使用: var E = window.wangEditor var editor = new E('#div'); editor.create(); 可以使用npm install wangeditor安装（注意，这里wangeditor全是小写字母） // 引用 var E = require('wangeditor') // 使用 npm 安装 var E = requ
php中html富文本编辑器,php + wangEditor 富文本编辑器的配置
weixin_35998457的博客
07-01 380
小编最近做了一个项目，在用户发表文章的模块上，考虑到用户编写文章时的排版需求。要借助富文本编辑器。搜索发现，现在有很多免费的编辑器插件。例如：百度的Ueditor、Summernote 。但是这几个插件的入手难度比较高，而且文档说明不详细。最后发现一个国内的编辑器wangEditor，配置起来非常简单，漂亮的UI，而且开发者很用心的写了详细的文档说明。在这里也算是一个推荐吧，对于我这种刚刚接触 富...
easyUi集成 Web 富文本编辑器 wangEditor
yxzg8792的博客
08-29 502
* 将p的margin改为0, 不然会出现改了#editor-container的高度，编辑器已经足够放下内容了，但是仍然会有滚动条出现的问题 */今天我们就来介绍一款前端小白的福音------Web 富文本编辑器 wangEditor，不依赖框架，支持原生js、jquery、vue。-- 编辑器 -->'uploadVideo' // 排除菜单组，写菜单组 key 的值即可。
PHP实现的pdo连接数据库并插入数据功能简单示例
10-17
本示例将介绍如何使用PDO在PHP中连接到数据库并执行插入数据的操作。 首先，我们需要创建一个配置文件`pdo_config.php`，用来存储数据库连接的相关参数。以下是一个简单的配置文件示例： ```php <?php $db_Type = ...
php使用PDO从数据库表中读取数据的实现方法(必看)
12-19
创建了PDO对象后，就可以通过创建的对象进行数据检索了。查询数据我们可以使用PDO::query...//从数据库中选择数据，并将结果赋予一个变量,testtable为数据库表 $result=$pdo->query('select id,name,age from testtabl
php获取数据库中数据的实现方法
01-20
php header(Content-type:text/html;charset=utf-8);//字符编码设置 $servername = localhost; $username = root; $password = root; $dbname = web; // 创建连接 $con =mysqli_connect($servername, $username, $...
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
10-16
本示例将深入解析如何使用PDO扩展来创建MySQL数据库、数据表，并进行多条数据的插入操作。 首先，创建MySQL数据库是通过执行SQL的CREATE DATABASE语句实现的。下面的PHP代码展示了这个过程： ```php <?php $...
wangeditor php上传本地图片,配置wangEditor 实现图片上传
weixin_35045970的博客
04-03 1559
首先新建editor.vue文件，用于写配置项方法1：使用 base64 编码直接将图片插入到内容中优点 ：配置简单this.editor.customConfig.uploadImgShowBase64 = true缺点 ：上传图片过大或上传多张图片，字段可能会保存失败(被截断)，不完整，大图无法显示在富文本框等问题如果项目中不想做图片限制可以用下面的方法，直接上传到后端服务器方法2：将图片...
富文本++php+源码,轻量级富文本编辑器wangEditor
weixin_42245701的博客
04-02 436
基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。wangEditor是用javascript编写的轻量级web富文本编辑器，依赖于jQuery和fontAwesome字体库，支持所有浏览器。使用wangEditor可以轻松创建web富文本框，并可以自定义扩展菜单功能。wangEditor所有源码都已经在github上开源下载。一个简单实例htm...
wangEditor的使用及上传图片（一）
铁柱的博客
12-20 2万+
由于业务需要，最近新入手了一款富文本编辑器wangEditor，这是一款轻量级的富文本编辑器，比起百度的ueditor，这款编辑器的界面更加简单，文档也很详细。对于需求不是很高的功能来说，这款编辑器实在是不二之选。一、wangEditor的基本显示demo这个部分，也用不着贴代码，因为文档很详细的，具体的参考文档https://www.kancloud.cn/wangfupeng/wangedito
php-使用wangeditor实现富文本(完成图片上传)-npm
最新发布
weixin_46001736的博客
12-18 675
php-使用wangeditor实现富文本(完成图片上传)-npm
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-14 4399
wangEditor 是一款基于原生 JavaScript 封装，开源免费的富文本编辑器，支持常规的文字排版操作、插入图片、插入视频、插入代码等功能，同时提供多样化的扩展功能（如字体、颜色、表情、代码、地图等插件），支持插件化开发和自定义配置。该编辑器简洁易用，功能齐全，可广泛应用于各种 Web 项目中。
wangeditor富文本编辑器使用过程中遇到的问题以及解决办法
热门推荐
前端-阿来
06-20 3万+
我的项目之前用的富文本编辑器是quill，之前其实考虑用过wangeditor，但是当时wangeditor V3的英文支持不友好，而我们业务是面向海外的，所以综合考虑下来用了quill。 最近需求富文本要支持表格，quill的表格支持一塌糊涂，建议不要花时间尝试，直接上wangeditor v5，下面我把wangeditor主要用到的地方和有坑的地方整理出来如下： 2. wangeditor v5 自定定义图片上传： 3. 运行时报错：error in ./node_modules/_@wangedi
Vue 富文本wangEditor3 (自动保存 快捷保存 激活工具栏...
dfo4834的博客
03-06 603
当我们需要传递一段特定的带文字样式 如粗体 下划线 斜体 颜色等这一类的内容给到后台，这个时候为了能够统一制定规范 机制 增加项目的复用 易用 好用 性。 我使用到了 富文本编辑器 。这里使用到的是第三版本 较以往多在事件 样式 兼容上作区别 技术 ： Vue +wangEditor3 首先 我们需要对富文本编辑器做一个大致的了解 认识 知道他的一些事件 和 提供的功能 以...
vue中使用wangeditor富文本编辑器
云霸屏CSDN官方博客
11-19 5829
需要知道富文本编辑器是所见即所得的文本编辑器，简单来说就是文本上面写的行内样式，那我们该怎样保存这些行内样式呢，在这里我是写成了组件的形式。return中写上如下代码，需要注意的时上传图片后，后端必须返回url图片的链接，否则编辑器中不会显示图片。研究一番发现弱国想要怎加或者修改编辑器的功能首先要获取这个功能的key。到这里其实基本功能已经实现了，那我们怎么保存，编辑器中的内容呢。这个时候编辑器的功能已经实现了 如下图。这个时候就可以看到每个功能的key了。就可以实现你想要的功能了，如下图。
利用php代码在数据库中插入数据
04-25
好的，您可以使用以下代码来在数据库中插入数据： ``` <?php //连接数据库 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "database"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } //插入数据 $sql = "INSERT INTO 表名 (字段1, 字段2, 字段3) VALUES ('数据1', '数据2', '数据3')"; if ($conn->query($sql) === TRUE) { echo "新记录插入成功"; } else { echo "Error: " . $sql . "<br>" . $conn->error; } $conn->close(); ?> ``` 您需要将以上代码中的 `localhost`、`username`、`password`、`database`、`表名`、`字段1`、`字段2`、`字段3` 和 `数据1`、`数据2`、`数据3` 替换为实际的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值