移动手机端富文本编辑器artEditor php代码实例

发布时间:2019-01-07作者:冰貂主人点击:88

插件地址:https://github.com/baixuexiyang/artEditor  欢迎star或fork。

imgTar

图片上传按钮

limitSize

图片最大限制,默认3兆

showServer

显示从服务端返回的图片,默认是显示本地资源的图片

uploadUrl

图片上传路劲

data

上传图片其他参数

uploadField

上传图片字段

placeholader

富文本编辑器holder

validHtml

粘贴时,去除不合法的html标签

uploadSuccess

图片上传成功回调

uploadError

图片上传失败回调

需要修改的地方: index.js中的图片上传路径 修改成自己环境下的localhost或者127.0.0.1

【html代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>artEditor</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <!-- 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui">
    <!-- iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="example/css/style.css">
</head>
<body>
    <div style="width:100%;margin: 0 auto;">
        <div class="publish-article-title">
            <div class="title-tips">标题</div>
            <input type="text" id="title" class="w100" placeholder="文章标题">
        </div>
        <div class="publish-article-content">
            <div class="title-tips">正文</div>
            <input type="hidden" id="target">
            <div class="article-content" id="content">
            </div>
            <div class="footer-btn g-image-upload-box">
                <div class="upload-button">
                    <span class="upload"><i class="upload-img"></i>插入图片</span>
                    <input class="input-file" id="imageUpload" type="file" name="file" accept="image/*" style="position:absolute;left:0;opacity:0;width:100%;">
                </div>
            </div>
        </div>
    </div>
    <script src="example/js/jquery-1.11.2.js"></script>
    <script src="dist/index.min.js"></script>
    <script src="example/js/index.js"></script>
</body>
</html>

【php代码】


<?php
            $img=$_REQUEST['file'];
           
               $name='';
               preg_match_all("/(jpeg)|(png)|(jpg)/", $img,$match);
               if($match[0][0]=='jpeg' || $match[0][0]=='jpg'){
                $base_img = str_replace('data:image/jpeg;base64,','', $img);

               } else {
                $base_img = str_replace('data:image/png;base64,','', $img);

               }
            $img_fix=$match[0][0];
         
            //  设置文件路径和文件前缀名称
            $path = "./upload/".date("ymd",time()).'/';
          
            is_dir($path) OR mkdir($path, 0777, true);   // 如果文件夹不存在,将以递归方式创建该文件夹
            $prefix='img';
            if($name ==''){
                $output_file = $prefix.time().rand(1,999).'.'.$img_fix;
            }else{
                $output_file = $name;
            }
            $path = $path.$output_file;
        
            //  创建将数据流文件写入我们创建的文件内容中
            $ifp = fopen( $path, "wb" );
            fwrite( $ifp, base64_decode($base_img) );
            fclose( $ifp );
           
           
            $path="/templets/default/editor/upload/".date("ymd",time()).'/'.$output_file;
            echo $path;
     
 ?>
标签:arteditor编辑器,移动端编辑器,手机端编辑器