wangEditor富文本编辑器简单使用案例

最新推荐文章于 2021-10-28 11:47:23 发布

生活压力大

最新推荐文章于 2021-10-28 11:47:23 发布

阅读量883

点赞数

分类专栏： Java开发文章标签： wangEditor富文本 Java中富文本使用

本文链接：https://blog.csdn.net/weixin_37783650/article/details/93192632

版权

本文介绍了如何在Java项目中使用wangEditor富文本编辑器，包括加载JS，初始化编辑器，以及后台图片上传代码的实现。示例代码展示了textarea结合编辑器提交富文本内容的方式，图片上传至FastDFS服务器。

摘要由CSDN通过智能技术生成

之前在项目中使用过富文本编辑器，记得当时分别考察了几种编辑器，现在简单介绍一下，首先是wangeditor富文本的用法。大家也可以通过下面的链接wangEditor文档地址查看wangEditor的文档进行开发。
接下来介绍一下我的用法：

首先需加载wangEditor的js

<script type="text/javascript" src="../static/plugins/wangEditor-3.1.1/release/wangEditor.min.js"></script>

接下来初始化富文本

话不多说直接上代码，首先提交页面代码

$(function () {
            var E = window.wangEditor
            var editor = new E('#div1');
            editor.customConfig.uploadImgServer = '/pic/uploadedit'  //图片上传路径
            editor.customConfig.uploadFileName = 'file'; //文件名称
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
            editor.customConfig.uploadImgMaxLength = 5;
            editor.$textElem.attr('c