富文本编辑器的实现步骤+封面

本文链接：https://blog.csdn.net/explore02161218/article/details/136239659

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>

导入富文本必须的 script 脚本：

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

调用 initEditor() 方法，初始化富文本编辑器：
```
// 初始化富文本编辑器
initEditor()
```
2. 图片封面裁剪的实现步骤

在 <head> 中导入 cropper.css 样式表：

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

在 <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>

在表单中，添加如下的表单行结构：

<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 class="layui-btn layui-btn-danger" id="btnChooseImage" type="button">选择封面</button>
      <!--隐藏的文件选择框-->
      <input accept="image/png,image/jpeg,image/gif" id="coverFile" style="display: none" type="file">
    </div>
  </div>
</div>

美化的样式：

/* 封面容器的样式 */
.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. 初始化图片裁剪器
  var $image = $('#image')
  
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  
  // 3. 初始化裁剪区域
  $image.cropper(options)
  //为选择封面的按钮，绑定点击事件
 $('#btnChooseImage').on('click', function () {
     $('#coverFile').click();
 });

 //监听coverFile的change事件，获取用户选择的文件列表
 $('#coverFile').on('change', function (e) {
     //获取到文件的列表数组
     var files = e.target.files;
     //判断用户是否选择了文件
     if (files.length === 0) {
         return
     }
     //拿到用户选择的文件
     var file = e.target.files[0]

     //根据选择的文件，创建一个对应的 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 画布上的内容，转化为文件对象
             // 得到文件对象后，进行后续的操作
         })

 });

3. 更换裁剪的图片

拿到用户选择的文件
```
var file = e.target.files[0]
```
根据选择的文件，创建一个对应的 URL 地址：
```
var newImgURL = URL.createObjectURL(file)
```

先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：

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

4. 将裁剪后的图片，输出为文件

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