在JavaWeb中使用wangEditor3简单案例

最新推荐文章于 2024-05-07 11:22:36 发布
最新推荐文章于 2024-05-07 11:22:36 发布
阅读量7.4k 收藏 6
点赞数 2
分类专栏： java 文章标签： java web 文本编辑 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27483461/article/details/78023425
版权

介绍

wangEditor是一款基于javascript和css开发的 Web富文本编辑器，有轻量、简洁、易用、开源免费等优点。
官网：www.wangeditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor
下载链接：github.com/wangfupeng1988/wangEditor/releases

开始

1.新建项目（使用的是struts2，配置不再赘述），将下载好的wangEditor包解压放入项目根目录

这里写图片描述

2.新建index.jsp页面将工具包中 release 文件夹下的 wangEditor.min.js或 wangEditor.js 引入到jsp页面中。index.jsp如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <form action="sys.action" method="post" id="form">
    <div <
最低0.47元/天 解锁文章
曲终人散or
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue进阶——整合富文本编辑器wangEditor
秋书一叶的博客
06-03 1万+
wangEditor是一款基于JavaScript的富文本编辑器插件，用于在网页中实现所见即所得的编辑功能。它提供了丰富的编辑功能，包括文字样式设置、插入图片、插入表格、代码高亮等。wangEditor易于集成和使用，支持自定义配置和扩展。
wang editor Vue使用 + 使用自己方法上传图片
TVM的博客
07-28 2063
首先附上wang editor的 npm地址 :https://www.npmjs.com/package/vue-wangeditor 使用手册 :https://www.kancloud.cn/wangfupeng/wangeditor3/332599 建议详看使用手册,所有你需要的东西,他都有写到 1. cnpm下载并引用(不再赘述) 2. 在mounted中进行配置: const editor = new WangEditor("#demo1"); // 配置 onch...
wangEditor 富文本详解
最新发布
weixin_64684095的博客
05-07 1458
可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。<template>-- 边框 -->-- 工具栏 -->-- 编译器 --></div></style>如果想要“全屏”功能，则要求工具栏、编辑器 DOM 节点必须是同一层级，同时父级盒子设置 z-index: 999。<template>-- 工具栏 -->-- 编译器 --><Editor /></div></style>如果服务端的返回体，不满足所需格式，可以使用自定义插入。// res 即服务端的返回结果。
wangEditor（轻量级web富文本编辑器）学习[全面]
風的博客
03-12 3591
了解： 我为什么要做富文本编辑器【wangEditor5个月总结】 轻量级富文本编辑器wangEditor源码结构介绍 wangEditor——介绍、使用手册 学习： wangEditor包的下载 —— 轻量级web富文本框【试用：http://wangEditor.github.io/】 wangEditor上传本地视频 参考： wangEditor的使用【主要讲脚本代码】 ...
【WangEditor】使用富文本编辑器 WangEditor 实现用户自定义图片大小（改js源码）
热门推荐
寒泉
05-03 8万+
效果图 1、WangEditor本身提供的 “编辑图片” 功能，调整图片大小选项只能为30%，50%，100%。 2、修改 wangEditor.js 源码后，用户可以输入自定义大小。例如，50%效果如下： 再例如，20%效果如下： 修改方式 在 wangEditor.js 中进行修改，整体修改内容如下图： 主要分为两个部分的修改：输入框、事件方法。 1、增加输入框： 大约在源码的268...
wangEditor上传图片 demo
10-28
wangEditor上传图片，java图片上传后台代码；下载解压后导入eclipse,然后把项目发布到tomcat中即可，
javaweb 简单案例
06-16
在本JavaWeb简单案例中，我们探讨了一个基于Java技术栈的音乐播放器应用程序。这个案例主要涉及了几个关键技术和框架，包括DOM4J、JSTL（JavaServer Pages Standard Tag Library）以及EL（Expression Language）...
JavaWeb基础-Cookie和Session的简单使用案例
01-13
在JavaWeb开发中，Cookie和Session是两种常见的用户会话管理技术，用于在客户端和服务器之间传递信息。本文将深入探讨这两个概念，并通过一个简单的登录案例来阐述它们的使用。 首先，Cookie是服务器发送到用户...
基于javaweb 的bootstrap table使用案例源码下载
02-10
通过这个案例，开发者不仅可以学习到如何使用Bootstrap Table和Ajax构建动态数据表格，还能了解如何在JavaWeb环境中构建适应性良好的前端与后端交互。案例中的源码将提供完整的实现过程，帮助开发者深入理解这些技术...
JavaWeb中过滤器的三个小案例
04-04
以上三个案例展示了JavaWeb过滤器在实际开发中的应用。它们不仅能够提升网站的功能，还能增强系统的安全性与稳定性。理解并熟练掌握过滤器的使用，对于提升JavaWeb开发技能大有裨益。在实践中，开发者可以根据需求...
JavaWeb中JavaBean的使用
05-26
主要包括什么是JavaBean，定义规则，如何使用以及EL表达式和JSTL标签库； 课堂笔记，大学生，初学者； JavaWeb,JavaBean,EL表达式,JSTL标签库相关代码；
wangEditor-plugin:富文本编辑器wangEditor【全屏】【源码】插件
03-23
wangEditor插件 富文本编辑器wangEditor【全屏】【源码】插件 使用方法： 依赖jquery，须先约会jquery ♡wangEditor-plugin.css和wangEditor-plugin.js两个文件 在wangEditor的create方法调用后，再调用插件的初始化方法，如： var E = window.wangEditor; var editor = new E（'＃editor'）; //去除粘贴样式E.pasteTextHandle.init（editor）; editor.create（）; //全屏E.fullscreen.init（'＃content'）; //原始码E.viewsource.init（'＃content'，编辑器）;
富文本 wangEditor 前后端交互例子
qq_33416416的博客
03-28 1万+
之前看了很多 但都不是很详细，这次贴上的代码，希望新手能少走弯路，与君共勉 参考文献 官方文档 https://www.kancloud.cn/wangfupeng/wangeditor3/332599 主要引入：<script type="text/javascript" src="../static/js/wangEditor.min.js"></script>...
vue中引入wangEditor富文本编辑器
weixin_40667613的博客
06-05 1万+
vue中引入wangEditor富文本编辑器 一. 结果图： 二.步骤图（主页面【组件】内容）： 1,先加载wangEditor编辑框加载进你的项目里 使用的npm安装 npm install wangeditor --save 2.html代码： <div class='clearfix'> <!-- 标题 --> <input type=...
wangEditor 回显
tp5引入layui的表格
02-20 2739
代码如下: js
wangEditor——轻量级web富文本框
王福朋
01-02 2827
wangEditor——轻量级web富文本编辑器，js+css 不足20kb。简单、易用、可扩展，支持所有PC浏览器（包括IE6）。 目前所有代码都在github上开源，下载地址：https://github.com/wangfupeng1988/wangEditor
轻量级富文本编辑器wangEditor源码结构介绍
weixin_30617797的博客
05-11 308
1. 引言 　　wangEditor——一款轻量级html富文本编辑器（开源软件） 网站：http://www.wangeditor.com/ demo演示：http://www.wangeditor.com/wangEditor/demo.html 下载（github）：https://github.com/wangfupeng1988/wangEditor QQ群：16...
wangeditor渲染不出来，报错xxx of undefined
qq_39905409的博客
11-25 2597
原配置： var editor = new E('#div') editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片 editor.create() 改为： var editor = new E('#div') // 兼容老版本 let config = editor.customConfig ? editor.customConfig : editor.confg; config .uploadImgShowBas
富文本编辑器——wangeditor使用
有个派大星的博客
07-11 1742
最近在该系统bug，用户希望把一个表单换成富文本编辑器，奈何自己是小白，第一次上手，所以做起来有点困难，一开始使用百度的ueditor，但是，保存的时候一直提示file is not present，在网上找方法也解决不了，后来放弃了，选择wangeditor,下面是步骤：1、下载 官网：wangEditor.github.io；2、把下载的压缩包放在项目的static下面：3、就是页面使用了①、...
什么是Servlet？如何在JavaWeb中使用Servlet？
04-21
在JavaWeb中使用Servlet需要遵循以下步骤： 1.创建Servlet类并继承HttpServlet类。 2.重写doGet和doPost方法以处理请求和生成响应。 3.在web.xml配置文件中声明Servlet，指定Servlet类和URL映射。 4.将.war文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值