富文本编辑器的实现步骤

生活不易，被迫卖艺

已于 2022-11-02 13:01:21 修改

阅读量619

点赞数

分类专栏：图片裁剪 HTML 文章标签： css html javascript

于 2022-11-02 12:33:54 首次发布

本文链接：https://blog.csdn.net/weixin_50018442/article/details/127649409

版权

图片裁剪同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

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 type="button" class="layui-btn layui-btn-danger">选择封面</button>
    </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)

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 画布上的内容，转化为文件对象
    // 得到文件对象后，进行后续的操作
  })