UEditor —— 百度编辑器的使用（后台框架 thinkphp5）

本文介绍了如何在ThinkPHP5后台框架中集成并使用百度UEditor编辑器。首先从官方下载地址获取UEditor，然后将除index.html外的文件复制到项目public/help/js/ueditor目录下。接着，在HTML页面中引入所需的JavaScript文件，以实现编辑器的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址：http://ueditor.baidu.com/website/download.html#mini

这里写图片描述

把下载好的文件夹除index.html之外的文件复制到项目的public/help/js/ueditor文件夹中

这里写图片描述

在html中引入三个js文件：

<script type="text/javascript" charset="utf-8" src="../../public/help/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../../public/help/js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="../../public/help/js/ueditor/lang/zh-cn/zh-cn.js"></script>

<body style="padding:0px;margin:0px;">
    <div style="width:90%;height:200px;margin:0 auto;">
        <button style="margin-top:30px;" onClick="getContent()">获取编辑器内容</button>
        <script id="editor" type="text/plain" style="width:100%;height:250px;margin-top:10px;"></script>
    </div>
    <script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
        console.log(UE.getEditor('editor').getContent())
    }
</script>
</body>

浏览器：

这里写图片描述