textarea标签改写为富文本框编辑器KindEditor

下载 - KindEditor - 在线HTML编辑器

KindEditor的简单使用-CSDN博客

一、 Maven需要的依赖:

如果依赖无法下载,可以多添加几个私服地址:

在Maven框架中加入镜像私服

java 复制代码
  <mirrors>
        <!-- mirror
         | Specifies a repository mirror site to use instead of a given repository. The repository that
         | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
         | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
         |
        <mirror>
          <id>mirrorId</id>
          <mirrorOf>repositoryId</mirrorOf>
          <name>Human Readable Name for this Mirror.</name>
          <url>http://my.repository.com/repo/path</url>
        </mirror>
         -->

        <mirror>
            <id>nexus-aliyun</id>
            <mirrorOf>central</mirrorOf>
            <name>Nexus aliyun</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        </mirror>
        <mirror>
            <id>alimaven</id>
            <name>aliyun maven</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
            <mirrorOf>central</mirrorOf>
        </mirror>
        <mirror>
            <id>alimaven</id>
            <mirrorOf>central</mirrorOf>
            <name>aliyun maven</name>
            <url>http://maven.aliyun.com/nexus/content/repositories/central/</url>
        </mirror>

        <mirror>
            <id>ibiblio</id>
            <mirrorOf>central</mirrorOf>
            <name>Human Readable Name for this Mirror.</name>
            <url>http://mirrors.ibiblio.org/pub/mirrors/maven2/</url>
        </mirror>
        <mirror>
            <id>jboss-public-repository-group</id>
            <mirrorOf>central</mirrorOf>
            <name>JBoss Public Repository Group</name>
            <url>http://repository.jboss.org/nexus/content/groups/public</url>
        </mirror>

        <mirror>
            <id>central</id>
            <name>Maven Repository Switchboard</name>
            <url>http://repo1.maven.org/maven2/</url>
            <mirrorOf>central</mirrorOf>
        </mirror>
        <mirror>
            <id>repo2</id>
            <mirrorOf>central</mirrorOf>
            <name>Human Readable Name for this Mirror.</name>
            <url>http://repo2.maven.org/maven2/</url>
        </mirror>
    </mirrors>

二、富文本编辑器KindEditor:

下载 - KindEditor - 在线HTML编辑器


三、在jsp界面引入kindeditor相关依赖:

java 复制代码
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/kindeditor/themes/default/default.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/kindeditor/plugins/code/prettify.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/kindeditor/kindeditor-all-min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/kindeditor/lang/zh-CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/kindeditor/plugins/code/prettify.js"></script>
<script>

四、富文本编辑框的就绪函数:

java 复制代码
  KindEditor.ready(function(K) {
        var editor1 = K.create('#goodsDesc', {
            uploadJson : '${pageContext.request.contextPath}/kindeditor/upload_json.jsp',
            fileManagerJson : '${pageContext.request.contextPath}/kindeditor/file_manager_json.jsp'
        });
    });

注意 就绪函数中的名称对应textarea标签的id:


五、 编辑框中真实存储路径和项目路径:

注意:需要在项目根目录下手动创建resources目录及子目录upload,不会自动创建此目录;

如果不创建上传图片到富文本编辑框中会提示找不到此目录。

上传一个图片,富文本编辑框是怎么存储的?

数据库存储的值:

可以看到是一个写死的img标签。

相关推荐
TOSUN同星4 小时前
干货分享 | TSMaster DBC编辑器操作指南:功能详解+实战示例
数据库·oracle·编辑器·汽车·软件工程
LIN-JUN-WEI5 小时前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
Ronin30511 小时前
【Linux系统】vim编辑器 | 编译器gcc/g++ | make/Makefile
linux·运维·服务器·ubuntu·编辑器·vim
织_网12 小时前
Visual Studio Code 中统一配置文件在团队协作中的应用
ide·vscode·编辑器
雷羿 LexChien1 天前
从 Prompt 管理到人格稳定:探索 Cursor AI 编辑器如何赋能 Prompt 工程与人格风格设计(上)
人工智能·python·llm·编辑器·prompt
不知所云,1 天前
3. lvgl 9.3 vscode 模拟环境搭建 lv_port_pc_vscode-release-v9.3
ide·vscode·编辑器·c·sdl·lvgl vscode·lvgl模拟器
淡漠的蓝精灵1 天前
【2025】Sublime Text 4安装教程保姆级一键安装教程(附安装包)
其他·编辑器·sublime text
yanjiee2 天前
需要scl来指定编译器的clangd+cmake在vscode/cursor开发环境下的配置
ide·vscode·编辑器
hero_heart3 天前
vscode中c_cpp_properities.cpp文件生成和作用
ide·vscode·编辑器
FrostedLotus·霜莲3 天前
C++主流编辑器特点比较
开发语言·c++·编辑器