SpringMVC+MyBatis 开发社交网站-24_富文本编辑器

最新推荐文章于 2024-05-25 08:46:50 发布
最新推荐文章于 2024-05-25 08:46:50 发布
阅读量328 收藏 3
点赞数 3
分类专栏： Spring MVC 文章标签： mybatis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1057258361/article/details/139188762
版权
本文介绍了如何在社交网站中集成富文本编辑器wangEditor，包括编辑器的安装、配置及使用，以及如何在后端使用MyBatis进行图片上传处理。通过示例代码展示了测试控制器、Freemarker模板引擎的运用，并提供了图片上传功能的实现步骤。
摘要由CSDN通过智能技术生成

富文本编辑器 wangEditor

官方文档:

1. 百度搜索"wangeditor"

    https://www.wangeditor.com/

imooc-reader 项目:

controller.

TestController  测试控制器

package com.tony.reader.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.servlet.ModelAndView;

import java.util.HashMap;

import java.util.Map;

@Controller

public class TestController {

    /**

     * 测试"Freemarker模板引擎"是否正常

     */

    @GetMapping("/test/t1")

    public ModelAndView test1(){

        return new ModelAndView("/test");

    }

    /**

     * 测试"Json序列化输出"

     */

    @GetMapping("/test/t2")

    @ResponseBody

    public Map test2(){

        Map result = new HashMap();

        result.put("test", "测试文本!");

        return result;

    }

}

webapp\WEB-INF\ftl\

test.ftl

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- 引入富文本编辑器 wangEditor -->

    <script src="/resources/wangEditor.min.js"></script>

</head>

<body>

    <div>

        <button id="btnRead">读取内容</button>

        <button id="btnWrite">写入内容</button>

    </div>

    <div id="divEditor" style="width:800px; height:600px"></div>

    <script>

        //获取富文本编辑器对象

        var E = window.wangEditor;

        //元素选择器(选中页面元素), 完成富文本编辑器初始化

        var editor = new E("#divEditor");

        //在页面上显示富文本编辑器

        editor.create();

        //为"读取内容"按钮绑定单击事件

        document.getElementById("btnRead").onclick = function(){

            var content = editor.txt.html();//获取编辑器现有的html内容

            alert(content);

        }

        //为"写入内容"按钮绑定单击事件

        document.getElementById("btnWrite").onclick = function(){

            var content = "<li style='color:red'>我是<b>新内容</b></li>";

            editor.txt.html(content);//设置html内容

        }

    </script>

</body>

</html>

测试:

1. 运行项目

2. 浏览器访问:

    http://localhost/test/t1

wangEditor 图片上传-1

imooc-reader 项目:

复制"图书管理"页面

1. 新建"webapp\WEB-INF\ftl\management"目录

2. 打开"训练素材\原型\后台页面"目录

3. 复制"图书管理页.html"到"WEB-INF/ftl/management"下, 重命名为"book.ftl"

.controller.management.

MBookController 后台管理控制器

package com.tony.reader.controller.management;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.servlet.ModelAndView;

/**

 * 后台管理控制器

 */

@Controller

@RequestMapping("/management/book")  //增加URL前缀

public class MBookController {

    /**

     * 后台管理的页面跳转

     */

    @GetMapping("/index.html")

    public ModelAndView showBook(){

        return new ModelAndView("/management/book");//转发给 management/book.ftl

    }

}

测试页面转发:

1. 运行项目

2. 浏览器访问后台管理主页面:

    http://localhost/management/book/index.html

webapp\WEB-INF\ftl\management\

book.ftl  图书管理页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图书管理功能</title>

    <style>

        #dlgBook{

            padding: 10px

        }

    </style>

    <link rel="stylesheet" href="/resources/layui/css/layui.css">

    <!-- 引入富文本编辑器 wangEditor -->

    <script src="/resources/wangEditor.min.js"></script>

    <!-- 工具栏 -->

    <script type="text/html" id="toolbar">

        <div class="layui-btn-container">

            <!-- "添加"图书按钮 -->

            <button class="layui-btn layui-btn-sm" id="btnAdd" onclick="showCreate()">添加</button>

        </div>

    </script>

</head>

   

最低0.47元/天 解锁文章
郭安新
关注
专栏目录
SpringMVC+MyBatis 开发社交网站-25_实现图书新增功能
郭安新的专栏
05-25 385
更新图书的平均评分和评价数量。配制所有方法的事务传播行为。生成日期与时间格式的字符串。将新文件的路径保存到结果集。优先从阿里云公共仓库下载。浏览器访问后台管理主页面。指定每页显示的记录条数。默认所有方法不使用事务。此方法开启声明式事务。富文本编辑器文件上传。拼接成新的文件名称后。点击富文本编辑器中的。
Spring MVC整合kindeditor富文本编辑器示例
09-12
Spring MVC整合kindeditor-4.1.11富文本编辑器示例, 原创已经测试成功.开发工具为eclipse,服务器是tomcat.其中具体的表述,也已经在博客中发表,可以关注一下.
SpringMVC整合百度富文本编辑器
dwhhome的博客
10-31 701
目录 一、前言 二、官网下载 三、整合至spring项目 四、自定义图片视频文件等上传 一、前言 运营那边需要一个强大的富文本编辑器功能，用于推送文章的编辑等等，总而言之需要可以编辑PC端展示效果，或手机端展示。最开始选择的是wangEditor编辑器，因为整合很方便，功能相对简单，做完之后，交付时运营方表示不能满足他们的需求，于是，重新选择了百度的富文本编辑器。虽然很久没人维护更新了...
2021-08-31 springMVC -- 整合UEditor(富文本编辑器)
aheadkeeper的专栏
08-31 168
https://www.cnblogs.com/yinz/p/5502405.html springMVC -- 整合UEditor(富文本编辑器)
springmvc+layui富文本编辑器实现图片上传及回显
ITarmi的分享
07-29 1075
流程并不复杂，直接上代码，代码中标有注释 前端代码在layui的官方文档中有，而且既然准备上传图片了，前端应该是没有问题了 <!--layedit文本区域--> <label class="icon1 l_width">内&nbsp;容:</label> <div class="div2"> <textarea id="edit1" lay-verify="conte
springmvc整合百度编辑器
jurlon的专栏
09-02 1629
前言最近搭建个人博客站，少不了编辑器的整合，现在就分享下springMVC整合百度编辑器的一些心得。简单步骤1、百度编辑器官网下载开发版的完整源码。官网地址，点我进去 可以选择最新的jsp的utf8版本下载2、将解压后的整合文件夹拷贝到项目的wepapp目录下。如图 请先忽略上方的ueditor目录。3、在相应的jsp页面引入百度编辑器，并进行实例化。<%@ page contentType
SpringMVC+MyBatis 开发社交网站-26_实现图书分页查询
郭安新的专栏
05-25 477
更新图书的平均评分和评价数量。生成日期与时间格式的字符串。将新文件的路径保存到结果集。浏览器访问后台管理主页面。指定每页显示的记录条数。为每一行表格数据生成。富文本编辑器文件上传。拼接成新的文件名称后。
SpringMVC+MyBatis 开发社交网站-27_实现图书更新功能
最新发布
郭安新的专栏
05-25 344
更新图书的平均评分和评价数量。配制所有方法的事务传播行为。判断是否包含至少一副图片。获取当前表单要提交的地址。浏览器访问后台管理主页面。浏览器访问后台管理主页面。默认第一图作为封面显示。请放置一副图片作为封面。如果是新增数据则提交至。提交时需要附加图书编号。附加图书详细描述的图文。指定每页显示的记录条数。默认所有方法不使用事务。为每一行表格数据生成。此方法开启声明式事务。为确保列数据的完整性。
SSM开发社交网站
weixin_45611051的博客
09-13 816
Spring与SpringMVC整合 所需的依赖： <!--引入阿里云仓库--> <repositories> <repository> <id>aliyun</id> <name>aliyun</name> <url>https://maven.aliyun.com/repository/public&lt...
百度富文本编辑器和springMVC整合
10-29
百度富文本编辑器和SprinMVC的整合，此项目用的是Intellij idea的编译软件，tomcat8,jdk8的配置，代码复制过去其他编译软件也一样的原理
UEditor富文本编辑器+内容转word导出整合经验分享(SpringMVC+Ueditor+mybatis+Maven)
01-18
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。 笔者使用Springmvc+mybatis+maven搭建，并实现插入图片、文字、表格转word，rar包中有具体的代码。 运行需将jacob下的dll拷贝至jdk/jre/bin目录下
SpringMVC+mybatis+easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架
03-10
SpringMVC+mybatis+easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架
mysql富文本编辑器_项目集成富文本编辑器
weixin_31423211的博客
01-28 452
聊聊富文本编辑器简介思考：我们平时在博客园，或者CSDN等平台进行写作的时候，有同学思考过他们的编辑器是怎么实现的吗？在博客园后台的选项设置中，可以看到一个文本编辑器的选项：其实这个就是富文本编辑器，市面上有许多非常成熟的富文本编辑器，比如：Editor.md——功能非常丰富的编辑器，左端编辑，右端预览，非常方便，完全免费wangEditor——基于javascript和css开发的 Web富文本...
mybits简单实例（记录一下）
qq_33416416的博客
04-08 256
xml -》 mapper -》 service -》 serviceimpl xml 文件： <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN" "http://ibatis.apa...
SpringBoot+Vue 09--wangEditor富文本编辑器
AMWICD的博客
04-26 2227
一般应用于新闻、博客 wangEditor 官网https://www.wangeditor.com/ 引入依赖 cnpm i wangeditor --save 数据库创建新表 创建对应的文件 复制粘贴改一改 News.java NewsMapper.java NewsController.java News.vue 把下面的接口也改了 路由 Aside.vue 运行 把wangEditor引入界面 让editor成为全局变量，有些功能就能用了，否则有些功能可能获取不到edit
Springboot 集成 wangEditor
蒯厅博客
09-01 653
wangEdito 下载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>富文本编辑器</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
SpringCloud微服务架构前后端分离项目实践
weixin_50196917的博客
06-07 5111
一款 Java 语言基于 SpringCloud、Vue、ElementUI、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题的个性化呈现的需
springboot wangEditor 图片批量上传
weixin_45574655的博客
07-26 1101
今天使用wangEditor实现图片上传，后端使用springboot，开始单张图片正常，多张图片一直不成功，配置了editor.config.uploadFileName="files"; 后台使用MultipartFile[] files 怎么都不行，后来看下请求，多张图片是这样发送的 那么后台使用files肯定不行，这里应该是wangEditor的问题，应该使用数组发送，不能这样去发送，所以后台要对应的修改，要获取files的名称然后获取图片流 public Map uploadI...
SpringBoot+SpringMVC+MyBatis快速入门指南
IdeaSpringboot+springmvc+mybatis项目通常包含以下几个主要目录： 1. src/main/java: 存放Java源代码，包括Spring Boot应用的启动类（`Application.java`）、Controller、Service、Repository和Model层的实体类等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值