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

雯0609~2024-01-28 21:40

一、数据库查询

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

php 复制代码 
<?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中取出变量，并对数据进行处理

javascript 复制代码 
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,进行设置

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

页面效果

页面完整代码

php 复制代码 
<?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');
?>
相关推荐
PGCCC24 分钟前
【PGCCC】Postgresql 存储设计
数据库·postgresql
PcVue China2 小时前
PcVue + SQL Grid : 释放数据的无限潜力
大数据·服务器·数据库·sql·科技·安全·oracle
魔道不误砍柴功4 小时前
简单叙述 Spring Boot 启动过程
java·数据库·spring boot
锐策4 小时前
〔 MySQL 〕数据库基础
数据库·mysql
数据小小爬虫5 小时前
如何用Java爬虫“偷窥”淘宝商品类目API的返回值
java·爬虫·php
远歌已逝5 小时前
管理Oracle实例（二）
数据库·oracle
日月星宿～5 小时前
【MySQL】summary
数据库·mysql
爱吃土豆的程序员5 小时前
在oracle官网下载资源显示400 Bad Request Request Header Or Cookie Too Large 解决办法
java·数据库·oracle·cookie
睿思达DBA_WGX6 小时前
Oracle 11g rac 集群节点的修复过程
数据库·oracle
尘浮生6 小时前
Java项目实战II基于微信小程序的移动学习平台的设计与实现（开发文档+数据库+源码）
java·开发语言·数据库·spring boot·学习·微信小程序·小程序
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化