tp5中使用ueditor编辑器保存文本到数据库后编辑时数据回显显示html标签问题解决办法

数据表中保存的数据为带html标签的源码,如图:

编辑器页面需要的内容:

javascript 复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="__ROOT__/static/plugs/ueditor/dist/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__ROOT__/static/plugs/ueditor/dist/ueditor.all.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="__ROOT__/static/plugs/ueditor/dist/lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;margin-left:20px;">
    {$vo.content}
    </script>
</div>


<script type="text/javascript">
    //实例化编辑器
    editorcontent2 = new baidu.editor.ui.Editor();
    editorcontent2.render('editor');
    try {
        editorcontent2.sync();
    } catch (err) {
    }

</script>
</body>
</html>

tp6框架中这个编辑器的控制器为:

javascript 复制代码
<?php
public function ueditor(){
        $vo=Db::connect('database')->table('article')
            ->field('content')
            ->where(['id'=>375588])
            ->find();
        $this->assign(array(
            'vo'=>$vo
        ));
        return $this->fetch();
    }

显示效果为:

为了将默认值变为html解析后的,需要在script标签中间加一个这个:

复制代码
{$vo.content|raw}

如图:

这样修改回显正常,如图:

其中用到的技术点为tp6中的raw,哈哈哈,很棒!

如果你不需要转义(例如你需要输出html表格等内容),可以使用: raw

文档讲解地址:使用函数 · ThinkPHP5.1完全开发手册 · 看云

关联使用百度编辑器文章:

php 接入 百度编辑器-CSDN博客

相关推荐
jiayou648 小时前
KingbaseES 实战:深度解析数据库对象访问权限管理
数据库
anOnion20 小时前
构建无障碍组件之Radio group pattern
前端·html·交互设计
前端Hardy1 天前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
李广坤1 天前
MySQL 大表字段变更实践(改名 + 改类型 + 改长度)
数据库
爱可生开源社区2 天前
2026 年,优秀的 DBA 需要具备哪些素质?
数据库·人工智能·dba
前端Hardy2 天前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html
前端Hardy2 天前
HTML&CSS:纯CSS实现随机转盘抽奖机——无JS,全靠现代CSS黑科技!
css·html
DeathGhost2 天前
分享URL地址到微信朋友圈没有缩略图?
前端·html
随逸1772 天前
《从零搭建NestJS项目》
数据库·typescript
加号33 天前
windows系统下mysql多源数据库同步部署
数据库·windows·mysql