Spring Boot集成Tinymce富文本编辑器

简介: Spring Boot集成Tinymce富文本编辑器

官网地址:


http://tinymce.ax-z.cn/general/upload-images.php


springboot的demo


https://blog.csdn.net/haha_201510/article/details/107110473?%3E


实战:


引入:


<script src="${request.contextPath}/statics/plugins/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<script src="${request.contextPath}/statics/plugins/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="${request.contextPath}/statics/plugins/tinymce/js/tinymce/icons/default/icons.min.js"></script>


 

tinymce.init({
        selector: '#recomEvaluationBox',//绑定渲染区
        height: 300,
        plugins: 'paste importcss code table advlist fullscreen imagetools  textcolor colorpicker hr  autolink link image lists preview media wordcount',
        toolbar: 'styleselect |  formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image  media | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat  hr | paste code  link | undo redo | fullscreen',
        skin: 'oxide',
        language: 'zh_CN',//汉化
        convert_urls: false,
        // relative_urls : true,
        images_upload_url: baseURL + "sys/oss/upload",//图片上传地址
        images_upload_credentials: true,
        image_dimensions: false,
        image_class_list: [
            {title: '无', value: ''},
            {title: '预览', value: 'preview'},
        ],
        // images_upload_base_path: '/',
        forced_root_block: 'p',
        force_p_newlines: true,
        importcss_append: true,
        content_style: `
                    *                         { padding:0; margin:0; }
                    html, body                { height:100%; }
                    img                       { max-width:100%; display:block;height:auto; }
                    a                         { text-decoration: none; }
                    iframe                    { width: 100%; }
                    p                         { line-height:1.6; margin: 0px; }
                    table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
                    .mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
                    ul,ol                     { list-style-position:inside; }
                  `,
        insert_button_items: 'image link | inserttable',
        // CONFIG: Paste
        paste_retain_style_properties: 'all',
        paste_word_valid_elements: '*[*]',        // word需要它
        paste_data_images: true,                  // 粘贴的同时能把内容里的图片自动上传
        paste_convert_word_fake_lists: false,     // 插入word文档需要该属性
        paste_webkit_styles: 'all',
        paste_merge_formats: true,
        nonbreaking_force_tab: false,
        paste_auto_cleanup_on_paste: false,
        // CONFIG: Font
        fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',
        resize: 'both',
        // CONFIG: StyleSelect
        style_formats: [
            {
                title: '首行缩进',
                block: 'p',
                styles: {'text-indent': '2em'}
            },
            {
                title: '行高',
                items: [
                    {title: '1', styles: {'line-height': '1'}, inline: 'span'},
                    {title: '1.5', styles: {'line-height': '1.5'}, inline: 'span'},
                    {title: '2', styles: {'line-height': '2'}, inline: 'span'},
                    {title: '2.5', styles: {'line-height': '2.5'}, inline: 'span'},
                    {title: '3', styles: {'line-height': '3'}, inline: 'span'}
                ]
            }
        ],
        // Tab
        tabfocus_elements: ':prev,:next',
        object_resizing: true,
        // Image
        imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
        file_picker_types: 'media',
        media_live_embeds: true,
        //be used to add custom file picker to those dialogs that have it.
        images_upload_handler: function (blobInfo, success, failure) {
            var xhr, formData;
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', baseURL + "sys/oss/upload");
            xhr.onload = function () {
                var json;
                if (xhr.status != 200) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                console.log(xhr.responseText);
                json = JSON.parse(xhr.responseText);
                json.location = json.url;
                if (!json || typeof json.location != 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                success(json.location);
            };
            formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            xhr.send(formData);
        }
    });
<div class="form-group">
            <div class="col-sm-2 control-label">推荐语</div>
            <div class="col-sm-10">
                <textarea name="" id="recomEvaluationBox" cols="1000" style="width: 150%" rows="10" v-model="recomEvaluation.content">
                </textarea>
            </div>
        </div>


后端上传代码逻辑:(使用的oss)

/**
  * 上传文件
  */
  @RequestMapping("/upload")
  @RequiresPermissions("sys:oss:all")
  public R upload(@RequestParam("file") MultipartFile file) throws Exception {
  if (file.isEmpty()) {
    throw new RRException("上传文件不能为空");
  }
  //上传文件
  String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
  String url = OSSFactory.build().uploadSuffix(file.getBytes(), suffix);
  //保存文件信息
  SysOssEntity ossEntity = new SysOssEntity();
  ossEntity.setUrl(url);
  ossEntity.setCreateDate(new Date());
  sysOssService.save(ossEntity);
  return R.ok().put("url", url);
  }



效果:


1dc618a0ed9580ce8bfa6facb208c08f.png5d4c6812c8535adbb050f4ddf2e1bce8.png46a9d80a6e05e4e3b19d57a0ee70bcdf.png66ba272a0bfc97be54a5fa679e3d5482.png




也支持,复制粘贴自动上传图片。


总结:


1.引入js


2:关键的是 init的参数,和上传图片的的回调函数的写法


3:学会使用缩放来切换上传图


完


相关实践学习
对象存储OSS快速上手——如何使用ossbrowser
本实验是对象存储OSS入门级实验。通过本实验,用户可学会如何用对象OSS的插件,进行简单的数据存、查、删等操作。
相关文章
|
数据可视化 Java BI
将 Spring 微服务与 BI 工具集成:最佳实践
本文探讨了 Spring 微服务与商业智能(BI)工具集成的潜力与实践。随着微服务架构和数据分析需求的增长,Spring Boot 和 Spring Cloud 提供了构建可扩展、弹性服务的框架,而 BI 工具则增强了数据可视化与实时分析能力。文章介绍了 Spring 微服务的核心概念、BI 工具在企业中的作用,并深入分析了两者集成带来的优势,如实时数据处理、个性化报告、数据聚合与安全保障。同时,文中还总结了集成过程中的最佳实践,包括事件驱动架构、集中配置管理、数据安全控制、模块化设计与持续优化策略,旨在帮助企业构建高效、智能的数据驱动系统。
555 1
将 Spring 微服务与 BI 工具集成:最佳实践
|
XML 人工智能 Java
Spring Boot集成Aviator实现参数校验
Aviator是一个高性能、轻量级的Java表达式求值引擎,适用于动态表达式计算。其特点包括支持多种运算符、函数调用、正则匹配、自动类型转换及嵌套变量访问,性能优异且依赖小。适用于规则引擎、公式计算和动态脚本控制等场景。本文介绍了如何结合Aviator与AOP实现参数校验,并附有代码示例和仓库链接。
826 0
|
安全 Java 数据库
第16课:Spring Boot中集成 Shiro
第16课:Spring Boot中集成 Shiro
1253 0
|
消息中间件 存储 Java
第15课: Spring Boot中集成ActiveMQ
第15课: Spring Boot中集成ActiveMQ
798 0
|
人工智能 Java 测试技术
Spring Boot 集成 JUnit 单元测试
本文介绍了在Spring Boot中使用JUnit 5进行单元测试的常用方法与技巧,包括添加依赖、编写测试类、使用@SpringBootTest参数、自动装配测试模块(如JSON、MVC、WebFlux、JDBC等),以及@MockBean和@SpyBean的应用。内容实用,适合Java开发者参考学习。
1490 0
|
监控 Cloud Native Java
Spring Integration 企业集成模式技术详解与实践指南
本文档全面介绍 Spring Integration 框架的核心概念、架构设计和实际应用。作为 Spring 生态系统中的企业集成解决方案,Spring Integration 基于著名的 Enterprise Integration Patterns(EIP)提供了轻量级的消息驱动架构。本文将深入探讨其消息通道、端点、过滤器、转换器等核心组件,以及如何构建可靠的企业集成解决方案。
976 0
|
Java 关系型数据库 数据库连接
Spring Boot项目集成MyBatis Plus操作PostgreSQL全解析
集成 Spring Boot、PostgreSQL 和 MyBatis Plus 的步骤与 MyBatis 类似,只不过在 MyBatis Plus 中提供了更多的便利功能,如自动生成 SQL、分页查询、Wrapper 查询等。
1182 2
|
缓存 JSON 前端开发
第07课:Spring Boot集成Thymeleaf模板引擎
第07课:Spring Boot集成Thymeleaf模板引擎
1091 0
第07课:Spring Boot集成Thymeleaf模板引擎
|
监控 安全 Java
Java 开发中基于 Spring Boot 3.2 框架集成 MQTT 5.0 协议实现消息推送与订阅功能的技术方案解析
本文介绍基于Spring Boot 3.2集成MQTT 5.0的消息推送与订阅技术方案,涵盖核心技术栈选型(Spring Boot、Eclipse Paho、HiveMQ)、项目搭建与配置、消息发布与订阅服务实现,以及在智能家居控制系统中的应用实例。同时,详细探讨了安全增强(TLS/SSL)、性能优化(异步处理与背压控制)、测试监控及生产环境部署方案,为构建高可用、高性能的消息通信系统提供全面指导。附资源下载链接:[https://pan.quark.cn/s/14fcf913bae6](https://pan.quark.cn/s/14fcf913bae6)。
2856 0