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

2024-06-22 23:20

本文主要是介绍textarea标签改写为富文本框编辑器KindEditor,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

下载 - KindEditor - 在线HTML编辑器

KindEditor的简单使用-CSDN博客

一、 Maven需要的依赖:

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

        在Maven框架中加入镜像私服

  <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相关依赖:

<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>

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

  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标签。

这篇关于textarea标签改写为富文本框编辑器KindEditor的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1085700

相关文章

ONLYOFFICE 8.1 版本桌面编辑器测评

在现代办公环境中,办公软件的重要性不言而喻。从文档处理到电子表格分析,再到演示文稿制作,强大且高效的办公软件工具能够极大提升工作效率。ONLYOFFICE 作为一个功能全面且开源的办公软件套件,一直以来都受到广大用户的关注与喜爱。而其最新发布的 ONLYOFFICE 8.1 版本桌面编辑器,更是带来了诸多改进和新特性。本文将详细评测 ONLYOFFICE 8.1 版本桌面编辑器,探讨其在功能、用户

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以需要我们去Git下载源码,拿到其中两个主

vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

文章目录 1.vscode创建运行编译vue3项目2.添加项目资源3.添加element-plus元素4.修改为暗黑主题4.1.在main.js主文件中引入暗黑样式4.2.添加自定义样式文件4.3.html页面html标签添加样式 5.常见错误5.1.未使用变量5.2.关闭typescript检查5.3.调试器支持5.4.允许未到达代码和未定义代码 6.element常用标签6.1.下拉列表

图形编辑器基于Paper.js教程03:认识Paper.js中的所有类

先来认一下Paper的资源对象,小弟有哪些,有个整体的认识。认个脸。 在Paper.js的 官方文档中类大致有如下这些: 基类: ProjectViewItemPointToolSizeSegmentRectangleCurveCurveLocationMatrixColorStyleTweenToolEventGradientGradientStopEvent 二级或三级类 继承Ite

html标签转换成img图片

app 里的元素需要转换成图片 <script src="../assets/js/html2canvas.min.js"></script>$(function () {html2canvas(document.querySelector("#app"), {useCORS: true}).then(canvas => {layer.close(vm.layerIndex)var img =

2021-02-16物料档案条码添加和蓝牙条码标签打印,金蝶安卓盘点机PDA,金蝶仓库条码管理WMS系统

物料档案条码添加和蓝牙条码标签打印,金蝶安卓盘点机PDA https://member.bilibili.com/platform/upload-manager/article 本期视频我们来讲解一下汉点机PDA条码添加和条码标签蓝牙便携打印: 在实际使用中,我们商品有两种情况: 一种是商品本身就有条码, 比如:超市卖的可口可乐,牛奶等商品,商品本身就有69开头的国标码,那么我们就可以使用盘点

abbr 标签的使用

更多内容: http://blog.yuhai.win 作用:标签指示简称或者缩写 用法: The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

Mybatis-映射文件中select标签resultType属性的使用

数据库的最最基本操作“增删改查”,“查”是最复杂的,有各种各样的查询,所以对应到Mybatis中的select标签也是这四个操作中最复杂的 resultType属性的使用 1.返回的结果是List集合的类型 select标签里的resultType类型设置为List集合里的元素类型 2.返回一个Map集合 key是列名称,value是列对应的值 3.返回的查询结果也是Map集合

HTML文字修饰标签

内容修饰标签 文字斜体 <i></i>、<em></em>加粗 <b></b>、<strong></strong>下标 <sub></sub>上标 <sup></sup>下划线 <ins></ins>删除线 <del></del>

HTML水平线标签

HTML水平线标签用<hr/> 相应的属性有: width 水平线宽度color 颜色align 对齐noshade 阴影