PHP接入umeditor(百度富文本编辑器)

最新推荐文章于 2023-10-14 20:50:26 发布

跳动的咸鱼

最新推荐文章于 2023-10-14 20:50:26 发布

阅读量3.9k

点赞数

分类专栏： php 文章标签： umeditor

本文链接：https://blog.csdn.net/qq_21119513/article/details/72876400

版权

php 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

百度官网上下载 umeditor 简版的富文本编辑器(这里)

<!DOCTYPE HTML>
<html>
<head>
    <title>UMEDITOR 完整demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="<?= BASEURL ?>umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="<?= BASEURL ?>umeditor/third-party/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="<?= BASEURL ?>umeditor/lang/zh-cn/zh-cn.js"></script>
    
</head>
<body>
<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor">
    <p>这里可以写一些输入提示</p>
</script>
    <button class="btn" οnclick="getContent()">获得内容</button> 
    <button class="btn" οnclick="setContent('1234')">写入内容</button> 
    <button class="btn" οnclick="hasContent()">是否有内容</button> 
<script type="text/javascript">
    //实例化编辑器
    // window.UMEDITOR_HOME_URL = "";
    var um = UM.getEditor('myEditor',
    {
        initialContent:'欢迎使用UMEDITOR!',
        initialFrameWidth:600,
        initialFrameHeight:240,
        imageUrl:"<?= BASEURL.'path/to/uploadimage' ?>", //处理图片上传的接口
        imagePath:"", //路径前缀
        imageFieldName:"upfile" //上传图片的表单的name
    });
    
    function getContent() {
        var arr = [];
        arr.push(UM.getEditor('myEditor').getContent());
        alert(arr.join("\n"));
    }
    
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用umeditor')方法可以设置编辑器的内容");
        UM.getEditor('myEditor').setContent('欢迎使用umeditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UM.getEditor('myEditor').hasContents());
        alert(arr.join("\n"));
    }
    
</script>
</body>
</html>

//富文本编辑器上传功能
    public function umeditor_upimage()
    {
        $callback = $this->G('callback');

        $info = $this->getLib('QiNiu')->upImage('upfile', 'umeditor');
        $r = array(
            "originalName" => $info['file_name'],
            "name" => $info['qiniu_name'],
            "url" => $info['qiniu_url'],//不能少
            "size" => $info['size'],
            "type" => $info['extension'],
            "state" => 'SUCCESS' //不能少
        );
        if($callback) {
            echo '<script>'.$callback.'('.json_encode($r).')</script>';
        } else {
            echo json_encode($r);
        }
    }

跳动的咸鱼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
PHP接入umeditor(百度富文本编辑器)

百度官网上下载 umeditor 简版的富文本编辑器(这里) UMEDITOR 完整demo umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet"> umeditor/third-party/jquery.min.js"> umeditor/umedit
复制链接

扫一扫