1. 富文本编辑器的实现步骤
1 添加如下的 layui 表单行：
<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>
2 导入富文本必须的 script 脚本：
<!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>
3 调用 initEditor() 方法，初始化富文本编辑器：
// 初始化富文本编辑器
initEditor()
2. 图片封面裁剪的实现步骤
1 在 <head> 中导入 cropper.css 样式表：
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
2 在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
3 在表单中，添加如下的表单行结构：
<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>
4 美化的样式：
/* 封面容器的样式 */
.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;
}
5实现基本裁剪效果：
// 1. 初始化图片裁剪器
var $image = $('#image')
// 2. 裁剪选项
var options = {
aspectRatio: 400 / 280,
preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)
3. 更换裁剪的图片
1 拿到用户选择的文件
var file = e.target.files[0]
2 根据选择的文件，创建一个对应的 URL 地址：
var newImgURL = URL.createObjectURL(file)
3 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', newImgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域
4. 将裁剪后的图片，输出为文件
$image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 400,
height: 280
})
.toBlob(function(blob) { // 将 Canvas 画布上的内容，转化为文件对象
// 得到文件对象后，进行后续的操作
})
网友评论