使用wangEditor作为博客文本编辑器

最新推荐文章于 2024-05-07 11:22:36 发布
最新推荐文章于 2024-05-07 11:22:36 发布
阅读量376 收藏 1
点赞数
文章标签： javascript web js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43867772/article/details/105731179
版权

下载

  • 点击 https://github.com/wangfupeng1988/wangEditor/releases下载最新版。进入release文件夹下找到wangEditor.js或者wangEditor.min.js即可

  • 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

  • 使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）

    PS：支持npm安装，请参见后面的章节

导入

在这里插入图片描述

  • 找到下载的压缩包中的release文件夹，然后将wangEditor.js放入你的项目目录
    -在这里插入图片描述

代码

  • 先简单的将编辑器放入jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>title</title>
</head>
<body>
<center>

    <div style="padding: 5px 0; color: #ccc; width: 65%">
        <p>请输入标题</p>
    </div>
    <div id="editor" style="width: 65%">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
</center>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="http://localhost:8080/Study_SSM08_war_exploded/editor/wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create()
</script>
</body>
</html>

在这里插入图片描述

  • 在加上按钮尝试获取里面的数据
<center>

    <div style="padding: 5px 0; color: #ccc; width: 65%">
        <p>请输入标题</p>
    </div>
    <div id="editor" style="width: 55%;">
        <p>欢迎使用 <b>Geek</b> 富文本编辑器</p>
    </div>
    <button id="btn1">获取html</button>
    <button id="btn2">获取text</button>
</center>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="http://localhost:8080/Study_SSM08_war_exploded/editor/wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create()

    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        alert(editor.txt.html())
    }, false)

    document.getElementById('btn2').addEventListener('click', function () {
        // 读取 text
        alert(editor.txt.text())
    }, false)
</script>

在这里插入图片描述

  • 然后我们加入ajax来进行HTTP请求
    （这里一定要记得加入Jquey依赖，以及将js包放入工程当中）
<body>
<center>

    <div style="padding: 5px 0; color: #ccc; width: 65%">
        <p>请输入标题</p>
    </div>
    <div id="editor" style="width: 55%;">
        <p>欢迎使用 <b>Geek</b> 富文本编辑器</p>
    </div>
    <button id="btn1">获取html</button>
    <button id="btn2">获取text</button>
</center>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="http://localhost:8080/Study_SSM08_war_exploded/editor/wangEditor.js" charset="UTF-8"></script>
<script src="http://localhost:8080/Study_SSM08_war_exploded/js/jquery.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#editor');
    // 或者 var editor = new E( document.getElementById('editor') )
    // 自定义菜单配置
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'foreColor',  // 文字颜色
        'link',  // 插入链接
        'list',  // 列表
        'quote',  // 引用
        'image',  // 插入图片
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];
    editor.customConfig.uploadImgShowBase64 = true;
    editor.customConfig.uploadImgMaxSize = 3*1024*1024;
    editor.customConfig.uploadImgMaxLength = 3;
    editor.customConfig.uploadImgTimeout = 3000;
    editor.customConfig.uploadFileName = 'editor_content';
    editor.create();

    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        var content = editor.txt.html();
        $.ajax({
            url:'http://localhost:8080/Study_SSM08_war_exploded/addcontent?content='+content,
            type:'post',
            dataType:'json',
            contentType:'application/json',
            success:function (data) {
                alert("成功====="+data.result);
                window.location.href='index.jsp'
            },
            error:function (msg) {
                alert("连接异常"+msg);
            }
        });
    }, false);

    document.getElementById('btn2').addEventListener('click', function () {
        // 读取 text
        alert(editor.txt.text());
        $.ajax({
            url:'/addcontent?content='+content,
            type:'post',
            dataType:'json',
            success:function (data) {
                console.log("成功====");
                alert("成功=====")
                window.location.href=data;
            },
            error:function () {
                alert("连接异常");
            }
        });
    }, false);
</script>
</body>

请求响应

@Controller
public class EditorController {

    @RequestMapping("/addcontent")
    @ResponseBody
    public Map<String, Object> addcontent(@RequestParam("content") String content){
        System.out.println(content);
        Map<String, Object> map = new HashMap<String, Object>();
        try {
        } catch (Exception e) {
            map.put("result", "false");
            e.printStackTrace();
        }
        map.put("result", "true");
        return map;
    }

}

再来看看效果
在这里插入图片描述

在这里插入图片描述
可以看到已经将HTML格式的语句得到，我们只要将其进行处理即可。

  • 继续细化，尝试将简单的文本存入数据库中

在btn1中的点击事件进行一个ajax请求

document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        var content = editor.txt.html();
        var userid = document.getElementById('userid').value;
        var headname = document.getElementById('head').value;
        $.ajax({
            url:'http://localhost:8080/Study_SSM08_war_exploded/addcontent?content='+content+'&headname='+headname+'&userid='+userid,
            type:'post',
            dataType:'json',
            contentType:'application/json',
            success:function (data) {

                window.location.href='index.jsp'
            },
            error:function (msg) {
                alert("连接异常"+msg);
            }
        });
    }, false);

（SSM框架的处理语句这里就不赘述了）

来看看结果
在这里插入图片描述
点击之后的数据库中
在这里插入图片描述

努力的蚊子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
wangeditor设置字体_自定义颜色、字体、字号
weixin_39532699的博客
12-21 5612
可通过editor.config.colors editor.config.familys editor.config.fontsizes 三个配置项来配置编辑器的颜色(字体颜色、背景色)，字体，字号。该操作必须再editor.create()方法之前执行代码示例：请输入内容...var editor = new wangEditor("div1");// 颜色editor.config.colo...
wangEditor富文本编辑器的使用
qq_40805231的博客
09-06 174
wangEditor的使用 第一步，将其下载，并引入项目中。 第二步，引入js <script type="text/javascript" src="/plugin/wangEditor/release/wangEditor.min.js"></script> 第三步，初始化对象 <span class="col-lg-8" id="editor"&g...
博客系统-写文章之富文本编辑器editor
roydon
05-23 1817
editor
富文本编辑器wangEditor的使用（即学即用）
kid00712138的博客
01-14 1万+
富文本编辑器wangEditor
wangEditor 富文本详解
最新发布
weixin_64684095的博客
05-07 1726
可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。<template>-- 边框 -->-- 工具栏 -->-- 编译器 --></div></style>如果想要“全屏”功能，则要求工具栏、编辑器 DOM 节点必须是同一层级，同时父级盒子设置 z-index: 999。<template>-- 工具栏 -->-- 编译器 --><Editor /></div></style>如果服务端的返回体，不满足所需格式，可以使用自定义插入。// res 即服务端的返回结果。
wangEditor编辑器使用
qq_40017621的博客
04-25 4706
. wangEditor 编辑器的使用 通过 https://github.com/wangfupeng1988/wangEditor/releases 下载wangEditor文档 引入到项目中。 通过 <script type=”text/ script ” src=”/wangEditor.js”> 引入wangEditor.js到项目中 2.创建wangEdi...
JavaWeb(13) wangEditor富文本编辑器的简单使用
郑清
10-28 2686
第一步：点击下载wangEditor所需js 第二步：项目中引入js 第三步：jsp页面中使用 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> ...
vue 使用 wangEditor 写富文本编辑器
qq_37732761的博客
01-11 430
认定了 就要好好的珍惜对待，人生不容辜负，你必须要更加努力 。加油 骚年。 vue 使用 wangEditor 写富文本 第一步：下载并 在需要的页面引入 wangEditor npm i wangeditor --save import E from 'wangeditor' 第二步 创建 wangEditor // 创建编辑器 CreatingEditor() { let contentJs = localStorage.getItem("auction-token");
HTML前端wangEditor富文本编辑器demo（jQuery）
02-14
wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时也能很好地融入Vue等现代前端框架。本示例是一个基于jQuery的wangEditor应用，具有丰富的功能，包括图片可拖拽调整大小，以及方便地...
wangEditor3富文本编辑器demon
04-24
【wangEditor3富文本编辑器demon】是一个用于学习和实践的项目，它演示了如何在C#编程环境中集成和调用富文本编辑器的方法。富文本编辑器，如wangEditor，是网页或应用程序中常见的一种组件，允许用户创建、编辑和...
wangEditor富文本编辑器
03-11
1. **富文本编辑器**：wangEditor作为一款富文本编辑器，允许用户在网页上创建和编辑具有多种格式的文本，如字体大小、颜色、样式、对齐方式等。它提供了与传统桌面文字处理软件相似的体验，使用户无需编写HTML代码...
wangEditor编辑器
03-11
很好用的富文本编辑器wangEditor,设置内容、获取内容、上传图片、使用 AMD 加载、使用 textarea、onblur、onfocus、onchange、获取 JSON、配置表情、多语言、CSS-Reset
html网页富文本编辑器插件wangEditor富文本编辑器下载
11-02
富文本编辑器是网页开发中常见的一种工具，它允许用户在网页上进行文字编辑、格式化和内容创作，类似于我们日常使用的Word或记事本。wangEditor是一款优秀的开源HTML网页富文本编辑器，专为提升网页编辑体验而设计。...
wangEditor的使用和图片上传服务器
weixin_45935570的博客
04-10 2456
1.官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599 2.下载地址： https://github.com/wangfupeng1988/wangEditor/releases 3.导入所需要的js文件 <script src="${request.contextPath}/statics/libs/wangEditor....
Kate 一款功能丰富的文本编辑器（可能是目前最好的开源跨平台轻量编辑器 之一）
ken2232的博客
03-17 2528
Kate 一款功能丰富的文本编辑器
使用wangEditor实现富文本编辑（后端为Java）
皮蛋瘦肉的博客
05-17 2万+
　　富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器． CSDN的markdown编辑器便是一种富文本编辑器． 　　蓝莓商城商品详情这一部分的编辑需要使用富文本编辑器．本来想使用百度的ueditor的，但是弄了好久依然还是有问题．所以就放弃了．ueditor配置确实比较复杂，官方的文档也没有很好的说清楚，错误提示不够明了，出错时未提...
Beego开发博客
yyq1102394156的博客
07-05 499
Beego开发博客 一、bee工具的使用 1、安装bee工具 go get -u github.com/beego/bee/v2 //安装完成后直接在终端输入bee获取环境 安装完之后，bee 可执行文件默认存放在 $GOPATH/bin 里面，所以您需要把 $GOPATH/bin 添加到您的环境变量中，才可以进行下一步。 2、new命令 new 命令是新建一个 Web 项目，我们在命令行下执行 bee new <项目名> 就可以创建一个新的项目。但是注意该命令必须在 $GOPATH/src
vue项目引用jquery的步骤和使用方法
热门推荐
weixin_41432849的博客
08-23 5万+
一、引用jquery step1:首先安装jquery         npm install jquery --save step2:在项目 build 里的webpack.base.conf.js 里加载webpack文件，注意，要放在配置文件第一行； step3:在module.exports的最后加入 step4:导入jquery import $ from 'jq...
文本编辑器（vim）
qq_52825616的博客
02-18 2449
目录 一、文本编辑器的作用及分类 1、作用 2、分类 二、vim外部命令 1、命令格式 2、选项 3、案例演示 三、vim内部 命令模式及命令 1、命令模式的作用 2、命令模式的常用命令 3、案例演示 四、vim内部输入模式及命令 1、输入模式的作用 2、输入模式的命令 3、案例演示 五、vim内部末行模式及命令 1、末行模式的作用 2、末行模式的常用命令 3、案例演示 一、文本编辑器的作用 1、作用 （1）创作或修改文本文件 （2）维护linux系统中的各种.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值