第一步:首先我们要到KindEditor官网下载资源包-点击进入官网下载KindEditor资源包

第二部:在下载完了KindEditor的资源包后解压结构如下图所示:

里面包括集中语言的文件上传后台处理语言:asp.php,jsp等,可以将它删除。

第三步:插入其中的css和js,其中default.css是富文本的框的样式

第四步:在适当的位置加入如下html代码,这是富文本框的显示,很简单,就一条html语句:

低5步:初始KindEditor富文本框js代码,放在script中:

之后运行就可以出来了:

值说下本地上传图片的方法:

如果要在前端返回的路径并且要在KindEditor这里显示图片,后台返回的jsonde 格式为{‘error’:’ ‘,’url’:’ ‘},其中error的值必须是int类型或者Integer类型,否则前端是无法显示出来的

效果如图所示:

配置KindEditor富文本编辑器的更多相关文章

  1. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  2. coding++:快速构建 kindeditor 富文本编辑器(一)

    此案例 demo 为 SpringBoot 开发 1.官网下载相关资源包:http://kindeditor.net/down.php 2.编写页面(引入相关JS) <!DOCTYPE html ...

  3. KindEditor富文本编辑器使用

    我的博客本来打算使用layui的富文本编辑器,但是出了一个问题,无法获取编辑器内容,我参考官方文档,获取内容也就那几个方法而已,但是引入进去后始终获取的值为空,百度和bing都试过了,但是始终还是获取 ...

  4. kindeditor富文本编辑器初步使用教程

    下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...

  5. (转)淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  6. (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  7. ASP.NET网站使用Kindeditor富文本编辑器配置步骤

    1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip ...

  8. springboot中使用kindeditor富文本编辑器实现博客功能

    kindeditor在之前已经用过,现在在springboot项目中使用.并且也在里面使用了图片上传以及回显等功能. 其实主要的功能是图片的处理:kindeditor对输入的内容会作为html标签处理 ...

  9. kindEditor 富文本编辑器 使用介绍

    第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 <scr ...

随机推荐

  1. 典型的NIO代码

    public void selector() throws IOException { ByteBuffer buffer = ByteBuffer.allocate(1024); Selector ...

  2. 关于github在客户端不小心删除新仓库,重建后无法上传解决方法

    不小心删除了如果直接在客户端重建一个不行,首先找出本地新仓库,删除,然后在重新再客户端建立一个. 但此时如果两仓库名字一样,会发现无法上传. 此时应该在网页打开github,点击进入之前删除的仓库(云 ...

  3. 保存单文件为mhtml

    1.F6 ,在地址栏输入 输入:chrome://flags 然后ctrl+f: 输入:mhtml 启动,重启即可保存为单文件.

  4. 【前端】javascript实现导航栏筋斗云效果特效

    实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...

  5. 【问题排查】fastjson线上排坑记

    前言 版本上线时发现fastjson的toString方法的返回的字符串与与之前版本的toString方法返回的字符串不相同,这导致依赖toString进行md5计算所得到的结果不相同,更进一步导致其 ...

  6. 如何用php写app接口[原创]

    人生就如一列永不停止的列车,no one knows when or where to stop.总有那些美好,值得永远怀念.也总有那些希望,值得你无怨无悔的付出,追逐.去年年底带着女儿一起坐火车会湖 ...

  7. Einbahnstrasse

    Einbahnstrasse Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...

  8. oracle数据库显示所有用户方法

    sql>show user查看自己的是哪个用户sql>select * from all_users; 查询所有用户sql>select * from user_users;查询当前 ...

  9. 兼容IE、火狐、谷歌的页面关闭事件

    <html> <head> <script language="javascript"> var blnCheckUnload = true; ...

  10. Three ways to throw exception in C#. Which is your preference?

    There are three ways to 'throw' a exception in C#  C#中有三种抛出异常的方式 Use the throw keyword without an id ...