支付宝赞助帐号:service@kuitao8.com 

html5 js 手机移动端富文本编辑器

Created2018-12-19   Views 353    Author 懒人程序
  ## 安装

你可以直接去官网或者码云上下载zip包,解压并放到你的项目目录

压缩包目录结构

├──── layout                            // 编辑器样式目录
├── webuploader.min.js                // WebUploader上传插件,当使用图片上传时需引入。
├── jquery.min.js                     // Eleditor依赖jQuery或者Zepto,必须引入才能工作
├── Eleditor.js                       // 开发版本
├── Eleditor.min.js                   // 压缩版本
└── upload.json                       // 上传示例文件

创建一个页面

首先新建一个HTML,编写以下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 引入jQuery -->
    &lt;script src="Eleditor目录/jquery.min.js"&gt;&lt;/script&gt;
    <!-- 引入百度上传插件 -->
    &lt;script src="Eleditor目录/webuploader.min.js"&gt;&lt;/script&gt;
    <!-- 插件核心 -->
    &lt;script src="Eleditor目录/Eleditor.js"&gt;&lt;/script&gt;
    <style>
        *{margin: 0;padding: 0;}
        #article-body{
            width: 100%;
            min-height: 300px;
            box-sizing: border-box;
            padding: 10px;
            color: #444;
        }
    </style>
</head>
<body>

<!-- 内容编辑区域 -->
<div id="article-body"></div>

&lt;script&gt;
/*实例化一个编辑器*/
var artEditor = new Eleditor({
                        el: &#039;#article-body&#039;,
                        upload:{
                            server: &#039;/upload.php&#039;,
                            fileSizeLimit: 2
                        }
                    });
&lt;/script&gt;

</body>
</html>

完成后浏览器打开,此时编辑器创建完成,效果如下,后续章节将讲解如何配置文件上传和扩展编辑器

上一篇: html5裁剪会员头像插件
下一篇:没有了
支持键盘 ← →

邮件订阅

订阅我们的精彩内容