web项目中nicedit富文本编辑器的使用
web项目中nicedit富文本编辑器的使用
一、为什么要用富文本编辑器?
先说什么是富文本编辑器吧,普通的html中input或textarea标签只能进行简单的输入,而做不到其他的文本调整功能,甚至
连空格与回车都要另写工具类去识别,更谈不上字体大小和颜色的修改、整体排版都功能了。其实一般读入文段类型的输入框都需
要富文本编辑器,没错,你们平时写博客用的就是富文本编辑器。如果还是无法理解富文本与普通输入框的区别,请看下图:

二、为什么要选nicedit
同类富文本编辑器有很多,这里选nicedit来说并不是因为它有多好,反而它功能并不全面,也不是很好看,
不过它有几个很大的优点:兼容性好、简单轻量、适合作为后台管理人员的录入框。
三、使用方法
1.下载nicedit工具包,包内目录如下

2.把nicEdit.js和nicEditorIcons.gif文件复制到web项目中,放平时放静态资源的位置即可

3.在nicEdit.js中修改nicEditorIcons.gif在项目中的位置

4.在jsp中代码如下(注意修改js所在路径):

5.获取富文本输入的值,注意这里用textarea的id和值是获取不了的,因为nicedit会隐藏原有的textarea,并生成自带的输入框,这是要获取框内
文本就需要通过其生成的类名去获取,代码实现如下:

我这里为了方便表单直接提交,就在按钮事件触发时直接把富文本内的值获取出来,并赋给表单中隐藏的input.
到这里nicedit富文本就能达到使用目的了,需要的文件只有一个js文件和一张图片,是不是真的很轻量很简单?所以,在只需实现简单的文段编辑功能
时,可以考虑使用这个富文本编辑器。分享完毕,谢谢阅读。
web项目中nicedit富文本编辑器的使用的更多相关文章
- Django项目中添加富文本编辑器django-ckeditor
django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...
- ssm项目中ueditor富文本编辑器的使用
一.下载 https://ueditor.baidu.com/website/index.html 将ueditor放到项目中合适的位置 二 . 配置文件上传路径 在utf8-jsp/jsp/conf ...
- flask项目中使用富文本编辑器
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...
- 浅谈layer.open的弹出层中的富文本编辑器为何不起作用!
很多童鞋都喜欢用贤心的layui框架.是的,我也喜欢用,方便,简单.但是呢,有时候项目中的需求会不一样,导致我们用的时候,显示效果可能会不一样,好吧.这样的话,个别遇到的问题总是解决不好,但是呢还是那 ...
- 在后台管理系统中引入富文本编辑器 (vue-quill-editor)
在admin系统中引入富文本编辑器 (vue-quill-editor) 由于公司项目的需求,内容需要更新,那么自然需要admin后台来上传内容,在苦苦寻觅了N个编辑器之后,终于找到了一个比较容易使用 ...
- 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器
书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...
- 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...
- django—xadmin中集成富文本编辑器ueditor
一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...
- ASP.MVC 项目中使用 UEditor 文本编辑器
1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ued ...
随机推荐
- C语言程序设计I—第六周教学
第六周教学总结(8/10-14/10) 教学内容 第二章 用C语言编写程序 2.4 输出华氏-摄氏温度转换表 课前准备 在蓝墨云班课发布资源: PTA:2018秋第六周作业 分享码:88C28D89E ...
- 内部元素一一相应的集合的算法优化,从list到hashmap
说是算法优化,基本上是在吹牛,仅仅只是算是记录下,我写代码时候的思路.毕竟还是小菜鸟. 我要开一个party,与会者都是情侣,可是情侣并非一起过来的,而是有先有后,可是每位与会者来的时候都拿着一束鲜花 ...
- 用NDK生成so给第三方用
参考了https://blog.csdn.net/zi413293813/article/details/50074239 然后自己重新整理补充 我用的ndk-r10d ndk下载地址http://d ...
- 虹软人脸识别iOS SDK2.0
最近公司要在APP上添加一个人脸识别功能,在网上搜了一圈,发现虹软的人脸识别SDK挺好用的,而且还免费,所以就下载了他们的SDK研究了一下.总的来看功能挺好用的,只是demo上面部分功能不是很完善,所 ...
- 课下测试补交(ch01、ch02、ch07)
课下测试补交(ch01.ch02.ch07) 课下测试ch01 1.Amdahl定律说明,我们对系统的某个部分做出重大改进,可以显著获得一个系统的加速比.(B) A . 正确 B . 错误 解析:课本 ...
- 打开CDQ的大门&BZOJ3262
题目传送门 第一次接触CDQ分治,感谢YZ大佬的教导. CDQ分治就是一种奇特的分治方法,它用左区间的区间信息来更新右区间. 设CDQ(L,R,l,r)表示递归到区间[L,R],区间的值为[l,r]. ...
- 8 stark组件 展示数据
1.编辑按钮构建完成 1.必备知识预习 2.mark_safe模块:将html标签安全传输 3.构造表单数据 4.反向解析 https://www.cnblogs.com/yuanchenqi/art ...
- Docker系列之CentOS7安装Docker(一)
0.前言 整体架构目录:ASP.NET Core分布式项目实战-目录 一.瞎扯淡(只讲有用的) 感兴趣的同学可以上网搜索一下docker具体的介绍.我这边主要介绍偏实战的内容,不喜勿喷,有问题也请指出 ...
- 菜鸟vimer成长记——第2.2章、visual模式
vi是没有可视模式的.然而大多数编辑软件都都是有可视模式.所以我猜测vim是几乎迫于无奈才有了visual模式. 个人建议,能不用就不用.这样能直接在头脑里处理好文本,锻炼文本处理能力,同时能转变过来 ...
- 用Angule Cli创建Angular项目
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...