Trumbowyg编辑器Resizimg插件使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00396/article/details/148549478

Trumbowyg编辑器Resizimg插件使用指南

Trumbowyg A lightweight and amazing WYSIWYG JavaScript editor under 10kB 项目地址: https://gitcode.com/gh_mirrors/tr/Trumbowyg

插件概述

Resizimg是Trumbowyg富文本编辑器的一个实用插件，它允许用户直接在编辑器中通过拖拽方式调整图片大小。这个功能对于需要精确控制图片显示尺寸的编辑场景非常有用。

核心功能

可视化调整：通过点击图片并拖动右下角的白色控制点来实时调整图片尺寸
参数可控：可以设置最小尺寸和调整步长等参数
操作直观：所见即所得的编辑体验，无需手动输入尺寸数值

基本使用方法

初始化配置

在初始化Trumbowyg编辑器时，只需在plugins配置中加入resizimg插件即可启用基础功能：

$('#editor').trumbowyg({
    plugins: {
        resizimg: {
            minSize: 64,   // 图片最小尺寸(像素)
            step: 16,      // 调整步长(像素)
        }
    }
});

参数说明

minSize：设置图片可调整的最小宽度和高度（单位：像素）
step：设置每次调整的最小增量（单位：像素）

环境依赖

Resizimg插件需要以下依赖项才能正常工作：

jQuery：3.x版本
jquery-resizable插件：用于实现元素的可调整大小功能（建议使用0.35或兼容版本）

依赖加载示例

在HTML文件中，需要按以下顺序加载这些资源：

<!-- 1. 加载jQuery -->
<script src="path/to/jquery.min.js"></script>

<!-- 2. 加载jquery-resizable插件 -->
<script src="path/to/jquery-resizable.min.js"></script>

<!-- 3. 加载Trumbowyg核心 -->
<script src="path/to/trumbowyg.min.js"></script>

<!-- 4. 最后加载resizimg插件 -->
<script src="path/to/trumbowyg.resizimg.min.js"></script>

实际应用示例

以下是一个完整的使用案例，展示如何在页面中集成Resizimg插件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trumbowyg编辑器示例</title>
    <!-- 引入Trumbowyg基础样式 -->
    <link rel="stylesheet" href="path/to/trumbowyg.min.css">
</head>
<body>
    <!-- 编辑器容器 -->
    <div id="editor">
        <h2>尝试调整下方图片大小</h2>
        <img src="example.jpg" style="height: 200px">
    </div>

    <!-- 按顺序加载所需脚本 -->
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jquery-resizable.min.js"></script>
    <script src="path/to/trumbowyg.min.js"></script>
    <script src="path/to/trumbowyg.resizimg.min.js"></script>
    
    <!-- 初始化编辑器 -->
    <script>
        $('#editor').trumbowyg({
            plugins: {
                resizimg: {
                    minSize: 100,
                    step: 10
                }
            }
        });
    </script>
</body>
</html>