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富文本编辑器的使用的更多相关文章

  1. Django项目中添加富文本编辑器django-ckeditor

    django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...

  2. ssm项目中ueditor富文本编辑器的使用

    一.下载 https://ueditor.baidu.com/website/index.html 将ueditor放到项目中合适的位置 二 . 配置文件上传路径 在utf8-jsp/jsp/conf ...

  3. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  4. 浅谈layer.open的弹出层中的富文本编辑器为何不起作用!

    很多童鞋都喜欢用贤心的layui框架.是的,我也喜欢用,方便,简单.但是呢,有时候项目中的需求会不一样,导致我们用的时候,显示效果可能会不一样,好吧.这样的话,个别遇到的问题总是解决不好,但是呢还是那 ...

  5. 在后台管理系统中引入富文本编辑器 (vue-quill-editor)

    在admin系统中引入富文本编辑器 (vue-quill-editor) 由于公司项目的需求,内容需要更新,那么自然需要admin后台来上传内容,在苦苦寻觅了N个编辑器之后,终于找到了一个比较容易使用 ...

  6. 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器

    书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...

  7. 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...

  8. django—xadmin中集成富文本编辑器ueditor

    一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...

  9. ASP.MVC 项目中使用 UEditor 文本编辑器

    1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ued ...

随机推荐

  1. c++——深拷贝和浅拷贝

    深拷贝和浅拷贝 默认复制构造函数可以完成对象的数据成员值简单的复制 对象的数据资源是由指针指示的堆时,默认复制构造函数仅作指针值复制 1浅拷贝问题 1.c++默认的拷贝构造函数 2.=号操作符 都是浅 ...

  2. openshift 持续集成与部署 -- 构建部署流水线

    Jenkins持续构建说得更直白点,就是各种项目的"自动化"编译.打包.分发部署.j跟svn.git能无缝集成,也支持直接与知名源代码托管网站,比如github.bitbucket ...

  3. 浅谈基于FormsAuthentication的认证

    一般情况下,在我们做访问权限管理的时候,会把用户的正确登录后的基本信息保存在Session中,以后用户每次请求页面或接口数据的时候,拿到 Session中存储的用户基本信息,查看比较他有没有登录和能否 ...

  4. easyui div 上下布局 最大化按钮 隐藏标题

    背景:easyui在做上下布局的时候,上面是数据列表,下面是数据图表.如下图 需要在上下面板右上角加上最大化按钮,以便可以全屏显示.逻辑就是当上面点击最大化时候,隐藏下面,主意:此时需要将下面的div ...

  5. mac电脑iTerm2链接linux服务器断线解决方案

    问题 用windows链接linux服务器,方式很多,我最经常用的是xshell.但是xshell没有mac版,那用mac电脑,比较好的命令行软件是什么呢?我用的是iTerm2 ,这个功能确实蛮强大, ...

  6. php数组 组合排列 笛卡尔积

    function Descartes() { $t = func_get_args(); if (func_num_args() == 1) { return call_user_func_array ...

  7. python爬虫-execjs使用

    python爬虫-execjs使用 ecexjs的作用 通过python代码去执行JavaScript代码的库 execjs的安装 pip install PyExecJS execjs使用之前,得先 ...

  8. sqlserver分区视图中分区列的规则

    分区列规则 分区列存在于每个成员表上,并且通过 CHECK 约束标识特定表中的可用数据.分区列必须遵守如下规则: 每个基表都拥有键值由 CHECK 约束所强制的分区列.每个表的 CHECK 约束的键范 ...

  9. 2018下学期C语言学习总结

    怎么说呢,2018年下学期已经过去了,2019年的上学期又来了,在2018年没有达到自己想要的结果,希望2019年可以达到,加油!我希望我以后可以又快又准确的完成C语言的编程,学习好所以关于电脑的基础 ...

  10. python-利用Python窗口可视化抽象开发山寨版翻译软件

    1.图片展示: 2.写出上面图式的小脚本需要利用python两个方面的知识: (1)可视化库 (需用库:tkinter) (2)简单爬虫知识 (需用库:requests) 注意:爬虫在获取翻译信息时, ...