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

于 2024-01-25 16:35:55 发布
阅读量679 收藏 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号底片~
关注
专栏目录
wangeditor php接口,富文本编辑器 wangEditor 使用
weixin_29161719的博客
03-28 688
软件特点支持 npm 直接引用支持响应式，自动缩放没有官方的实例销毁方案，项目中使用的是作者在github给出的临时方案支持一个页面多个编辑器不支持一个页面多个编辑器同时使用地图后端需要进行相应配置安装 wangEditornpm install wangeditor --save代码引入 wangEditor (vue环境)#account--editor {width: 100%;min-he...
php怎样从数据库中拿到数据,php从数据库中读取数据实现方法
weixin_42382398的博客
03-10 3336
文章利用了一个简单的实例来实现php从数据库中读取数据详细讲解，有需要的朋友可以看看，这里同时还简单的讲到了安全问题。先看段代码代码如下复制代码session_start();$con=mysql_connect('localhost','root','root') or die('链接数据库失败！');mysql_query('set names utf8');mysql_select_db('...
php-使用wangeditor实现富文本(完成图片上传)-npm
最新发布
weixin_46001736的博客
12-18 766
php-使用wangeditor实现富文本(完成图片上传)-npm
php 简单的富文本编辑器,轻量级富文本编辑器wangEditor
weixin_39913648的博客
03-17 306
3&period; web前端开发分享-css&comma;js提高篇一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən]下五个属性static['stætɪk],relative[ ...jQuery&lpar;一&rpar;1,浏览器内核不同-->兼容性问题-->...
wangeditor上传文件php,富文本编辑器(wangEditor)
weixin_34379989的博客
04-13 565
近期在产品的开发工作中遇到要使用富文本编辑器的地方。于是对比了几款编辑器，最后选择了wangEditor。使用方式：1. 创建一个容器：2.引入js文件3.初始化// 富文本编辑器var E = window.wangEditor;var editor = new E("#editor")editor.create()4.上传图片支持网络图片与本地上传网络图片直接输入地址即可。本地上传默认是关闭...
php 使用wangEditor3编辑器上传图片至七牛云
han_cui的博客
07-04 856
打开wangEditor3编辑器官网https://www.kancloud.cn/wangfupeng/wangeditor3/405041 下载demo至本地运行即可。 官网注意： 1、“开始使用”-->“创建一个编辑器”，js引用问题，这里的和下载的demo里的不一样 editor3初始化编辑器用的是E var E = window.wangEditor 2、“上传图片”...
php用wangeditor3实现图片上传功能
01-02
就在最近，公司让我写一个后台，其中用到了富文本编辑器。自从这个富文本的出现 我就慢慢的进入了一个坑，起初不知道用什么编辑器好，看了好多好多，最后选择了。这个 wangeditor3。个人认为这个富文本很干净，还...
Laravel开发-laravel-wangeditor-upload
08-28
在本文中，我们将深入探讨如何在 Laravel 框架中集成 WangEditor，一个流行的前端富文本编辑器，用于实现文件上传功能。Laravel 是一款基于 PHP 的优雅且强大的 web 开发框架，它提供了丰富的工具和功能，使得开发...
P2P金融借贷项目--源码+MySQL数据库_
10-19
在这个项目中，源码是实现P2P借贷平台功能的核心部分，而MySQL数据库则是用来存储和管理所有借贷相关的数据。 源码是程序员用编程语言编写的程序代码，它包含了处理用户注册、身份验证、发布借款标、投标、资金托管...
wang-editor-v4:laravel-admin 插件 wangEditorV4版本富文本编辑器
08-05
wangEditor ，但是相关的插件好像许久都没人维护了，奈何就自己动手吧，根据 wangEditor 的插件的源码与 laravel-admin 中扩展开发的文档，完成了此V4版本的 wangEditor 富文本编辑器插件。 V4版本与V3相比，还是...
wangeditor 一个好用的编辑器
03-18
wangeditor 一个好用的编辑器，
php-使用wangeditor实现富文本(完成图片上传)-CDN
weixin_46001736的博客
02-25 724
php-使用wangeditor实现富文本(完成图片上传)-CDN
富文本编辑器 wangEditor.js
weixin_30897079的博客
11-14 373
1、引用 wangEditor 相关js 和 css 下载地址：https://files.cnblogs.com/files/kitty-blog/WangEditor.zip 3、页面： <div id="editor"> </div> 2、初始化编辑器： //初始化编辑器 function editor_init...
PHP wangEditor插件打包（包含公式、上传附件）完整版
weixin_44936767的博客
06-20 698
PHP wangEditor插件打包（包含公式、上传附件）完整版
php中html富文本编辑器,php + wangEditor 富文本编辑器的配置
weixin_35998457的博客
07-01 406
小编最近做了一个项目，在用户发表文章的模块上，考虑到用户编写文章时的排版需求。要借助富文本编辑器。搜索发现，现在有很多免费的编辑器插件。例如：百度的Ueditor、Summernote 。但是这几个插件的入手难度比较高，而且文档说明不详细。最后发现一个国内的编辑器wangEditor，配置起来非常简单，漂亮的UI，而且开发者很用心的写了详细的文档说明。在这里也算是一个推荐吧，对于我这种刚刚接触 富...
wangeditor java_如何使用wangEditor将数据存放到数据库中
weixin_30183847的博客
02-26 1666
正巧我前段时间也用了这个富文本。看到最新版本是3了，不好意思，我用的--%>竟然有一天更新两个小版本。我还是拿2.1.20举个栗子吧，反正用着没碰到什么问题(javassh)：先上我的代码：没用div，就用的文本域去初始化// editor init ....var editor = new wangEditor('textarea1');editor.config.uploadImgUrl...
wangeditor php上传本地图片,配置wangEditor 实现图片上传
weixin_35045970的博客
04-03 1623
首先新建editor.vue文件，用于写配置项方法1：使用 base64 编码直接将图片插入到内容中优点 ：配置简单this.editor.customConfig.uploadImgShowBase64 = true缺点 ：上传图片过大或上传多张图片，字段可能会保存失败(被截断)，不完整，大图无法显示在富文本框等问题如果项目中不想做图片限制可以用下面的方法，直接上传到后端服务器方法2：将图片...
wangeditor php上传本地图片,wangEditor 本地上传图片配置
weixin_35719775的博客
04-03 470
let editor;new Vue({el: '#app',data() {return {}},mounted() {this.initEditor();},methods: {initEditor() {let that = this;let E = window.wangEditor;editor = new E(this.$refs.editor);// 堆叠层级editor.custo...
PHP数据库数据在网页表格中的展示实现
资源摘要信息:"PHP实现从数据库调出数据并以表格的形式展示到网页" PHP是一种广泛使用的开源服务器端脚本语言，特别适用于Web开发。它能够轻松地与数据库进行交互，将数据展示在网页上。本压缩包文件命名为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值