移动手机端富文本编辑器artEditor php代码实例
未知
2019-01-07 11:38:10
0
插件地址: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;
     
 ?>

相关内容

移动手机端富文本编辑器ar...
插件地址: https://github.com/baixuexi...
2019-01-07 11:38:10

热门资讯

tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
layui缩略图 div class=layui-form-item label class=layui-form-l...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
Laravel 引入自定义类库... 强烈建议引入的类 都是含有命名空间的,这样使用起来就不会出现重名的情况。!!当然,没有命名空间也可以...
object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
php银行开放平台接口:pfx... 问题描述: 对接易通银行,他们的服务开放平台是java开发,而我的是php,现在需要php版本的SD...