使用UEditor

引入并定义要显示的标签:

<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    UEDITOR_CONFIG.toolbars = [[
        'fullscreen', 'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
        'lineheight', '|',
        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
        'directionalityltr', 'directionalityrtl', 'indent', '|',
        'justifyleft', 'justifycenter', 'justifyright', '|', 'touppercase', 'tolowercase', '|',
        'link', 'unlink', '|',
        'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'insertcode', 'pagebreak', 'template', 'background', '|',
        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
        'searchreplace', 'drafts', 'help'
    ]];
</script>

找到需要替换的<textarea>:

            <tr>
                <td>
                    <textarea name="f_goods_introduce" id="f_goods_introduce" type="text/plain"
                              style="height: 400px;"></textarea>
                </td>
            </tr>

替换:

            <script type="text/javascript">
                var ue = UE.getEditor('f_goods_introduce');
            </script>


### Ruoyi 框架集成 Ueditor 富文本编辑器 #### 集成概述 为了在 Ruoyi 框架中成功集成并使用 UEditor 富文本编辑器,需完成几个关键配置步骤。这些步骤涉及引入必要的资源文件、初始化编辑器实例以及处理数据交互。 #### 准备工作 确保项目环境中已安装 Node.js 和 npm 工具链,并通过 Maven 或 Gradle 添加所需依赖项来获取最新版本的 UEditor 库[^1]。 #### 文件结构设置 创建一个新的模块用于承载 UEditor 的静态资源,在 `resources/static` 下新建名为 `ueditor` 的文件夹并将下载好的 UEditor 发布包解压至此处。该路径下应包含如下子目录: - jsp:放置与服务器端通信所需的 JSP 页面模板; - lang:多语言支持文件; - themes:主题样式表及相关图像素材; - third-party:第三方库集合; - ueditor.all.min.js 及其他核心脚本文件; ```bash ├── resources/ │ └── static/ │ ├── css/ │ ├── js/ │ └── ueditor/ │ ├── config.json │ ├── index.html │ ├── jsp/ │ ├── lang/ │ ├── themes/ │ └── ... ``` #### 修改配置文件 编辑位于 `src/main/resources/application.yml` 中的应用程序全局配置文件,添加以下内容以便于后续操作时指定上传图片存储位置等参数: ```yaml ruoyi: upload: path: ${user.home}/RuoYi/uploadPath # 设置默认保存路径 ``` #### 编写控制器类 编写一个简单的 RESTful API 控制器用来接收来自前端提交的数据流并将其持久化至磁盘上。此接口主要负责解析 multipart/form-data 类型请求体内的二进制对象进而调用工具函数完成实际存取动作。 ```java @RestController @RequestMapping("/api/ueditor") public class UeditorController { @PostMapping(value = "/upload", produces = MediaType.APPLICATION_JSON_VALUE) public ResponseEntity<Map<String, Object>> handleFileUpload(@RequestParam("upfile") MultipartFile file) { Map<String, Object> result = new HashMap<>(); try { String fileName = UUID.randomUUID().toString() + "_" + file.getOriginalFilename(); File dest = new File(System.getProperty("user.home"), "RuoYi/uploadPath/" + fileName); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } file.transferTo(dest); result.put("state", "SUCCESS"); result.put("url", "/static/uploadPath/" + fileName); // 返回相对 URL 地址供客户端访问 } catch (IOException e) { logger.error(e.getMessage(), e); result.put("state", "ERROR"); } return ResponseEntity.ok(result); } } ``` #### 初始化编辑器实例 最后一步是在页面加载完成后立即执行一段 JavaScript 脚本来启动 UEditor 实例并与后台服务建立连接关系。通常情况下会把这段代码嵌入到 HTML 文档底部附近的位置以减少阻塞渲染的风险。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Ruoyi Framework with UEditor</title> <!-- 引入UEditor --> <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="/static/ueditor/ueditor.all.min.js"></script> <link rel="stylesheet" href="/static/ueditor/themes/default/css/ueditor.css"/> <style> /* 自定义样式 */ .ueditor-container { width: 90%; margin-left:auto; margin-right:auto;} </style> </head> <body> <div id="container" class="ueditor-container"></div> <script type="text/javascript"> // 创建编辑器实例 var ue = UE.getEditor('container', { serverUrl : '/api/ueditor/config', }); ue.ready(function(){ console.log('UEditor is ready'); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值