1
2
3
4
5
6
7
8
9
10
<div class="layui-form-item">
<!-- 左侧的 label -->
<label class="layui-form-label">文章内容</label>
<!-- 为富文本编辑器外部的容器设置高度 -->
<div class="layui-input-block" style="height: 400px;">
<!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
<textarea name="content"></textarea>
</div>
</div>

1
2
3
4
<!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>

1
2
3
4
// 初始化富文本编辑器
原版没有这是后包的函数
initEditor()

1
2
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

1
2
3
4
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="layui-form-item">
<!-- 左侧的 label -->
<label class="layui-form-label">文章封面</label>
<!-- 选择封面区域 -->
<div class="layui-input-block cover-box">
<!-- 左侧裁剪区域 -->
<div class="cover-left">
<img id="image" src="/assets/images/sample2.jpg" alt="" />
</div>
<!-- 右侧预览区域和选择封面区域 -->
<div class="cover-right">
<!-- 预览的区域 -->
<div class="img-preview"></div>
<!-- 选择封面按钮 -->
<button type="button" class="layui-btn layui-btn-danger">选择封面</button>
</div>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 封面容器的样式 */
.cover-box {
display: flex;
}
/* 左侧裁剪区域的样式 */
.cover-left {
width: 400px;
height: 280px;
overflow: hidden;
margin-right: 20px;
}
/* 右侧盒子的样式 */
.cover-right {
display: flex;
flex-direction: column;
align-items: center;
}
/* 预览区域的样式 */
.img-preview {
width: 200px;
height: 140px;
background-color: #ccc;
margin-bottom: 20px;
overflow: hidden;
}

1
2
3
4
5
6
7
8
9
10
 // 1. 初始化图片裁剪器
var $image = $('#image')
// 2. 裁剪选项
var options = {
aspectRatio: 400 / 280,
preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)

1
2
var file = e.target.files[0]

1
2
var newImgURL = URL.createObjectURL(file)

1
2
3
4
5
6
7
8
$image
.cropper('destroy')
// 销毁旧的裁剪区域
.attr('src', newImgURL)
// 重新设置图片路径
.cropper(options)
// 重新初始化裁剪区域

1
2
3
4
5
6
7
8
9
10
$image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 400,
height: 280
})
.toBlob(function(blob) {
// 将 Canvas 画布上的内容，转化为文件对象
// 得到文件对象后，进行后续的操作
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 一. 初始化
let form = layui.form;
// 1. 初始化图片裁剪器
let $image = $('#image')
// 2. 裁剪选项
let options = {
aspectRatio: 400 / 280,
preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)
// 二. 为 选择封面 按钮, 添加点击事件
$('button:contains("选择封面")').on('click', function () {
$('#file').trigger('click') // 调用文件域的点击事件
})
// 三. 文件域内容切换的时候, 更换裁剪区的图片
$('#file').on('change', function () {
// 1 找文件对象
let fileObj = this.files[0]
// 2 生成临时的 url
let url = URL.createObjectURL(fileObj)
// 3 替换裁剪图片 (先销毁剪切框 --> 更换图片的src --> 重新创建剪裁框)
$image.cropper('destroy').attr('src', url).cropper(options)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 为表单添加提交事件, 阻止表单的默认提交
$('form').on('submit', function (e) {
e.preventDefault()
// 收集数据
let fd = new FormData(this); // FormData 是根据表单各项的 name 属性收集值得
// 获取 tinymce 插件的内容，并把内容添加到 FormData 对象中
fd.set('content', tinyMCE.activeEditor.getContent());
// 剪裁图片，得到 canvas(画布格式的图片)
let canvas = $image.cropper('getCroppedCanvas', {
width: 400,
height: 280
})
// 把canvas图片转成blob格式
canvas.toBlob(function (blob) {
// 形参 blob 就是转换后的结果，需要把它也追加到FormData中
fd.append('cover_img', blob);
// 验证FormData中有哪些值
fd.forEach(function (value, key) {
console.log(key, value)
})
// Ajax提交数据
$.ajax({
type: 'POST',
url: '/my/article/add',
data: fd,
// 提交FormData格式的数据，必须填下面两项
processData: false,
contentType: false,
success: function (res) {
layer.msg(res.message)
if (res.status === 0) {
// 添加成功，跳转到文章列表页
location.href = './list.html';
}
}
})