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文件和一张图片,是不是真的很轻量很简单?所以,在只需实现简单的文段编辑功能

时,可以考虑使用这个富文本编辑器。分享完毕,谢谢阅读。

时间: 2024-08-05 10:52:38

web项目中nicedit富文本编辑器的使用的相关文章

使用Flask-CKEditor在Flask项目中集成富文本编辑器

基本用法 安装 首先使用pip或Pipenv等工具安装或更新: $ pip install -U flask-ckeditor 初始化扩展 一般情况下,你只需要导入并实例化CKEditor类,并传入程序实例即可: from flask_ckeditor import CKEditor app = Flask(__name__) ckeditor = CKEditor(app) 如果你使用了工厂函数,那么也可以调用init_app()方法来进行初始化: from flask_ckeditor im

Java-Swing中实现富文本编辑器

问题介绍 使用Java-swing技术实现邮件发送功能.(为什么使用Java,因为我们组没学过C#) 邮件编辑使用富文本编辑器,用户可以自定义邮件格式. 支持上传图片. 支持附件发送. 内容支持名字的替换,显得像是单独给某个人发的一样. 功能图片展示 解决过程 开始看到这个需求,也没有什么想法感觉还好,于是百度.谷歌了一堆东西.首先百度Java swing的富文本编辑器组件,虽然确实找到了几个组件但是都是很老的版本,而且是一个独立的弹窗,样式也有点难看.问了一下学长的意见,说:“接受不了独立弹窗

在Django项目中使用富文本编辑器

1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.ckeditor等等.在项目中使用这些编辑器主要有以下几个问题: 编辑页面 在HTML页面渲染编辑器: 定制编辑器的功能,比如有哪些文本样式.图片上传.代码插入: 定制编辑器的样式,指的是编辑器整体的样式,比如高度.宽度.显示位置等等: 预览内容: 获取内容: 显示页面 显示内容: 2 Django APP 下表列出一些常用的APP,它们都可以在GitHub上找的到,链接见下文

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

1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ueditorcss = new StyleBundle("~/assets/plugins/ueditor/themes/default/css"); ScriptBundle ueditorjquery = new ScriptBundle("~/assets/plugins/ue

Vue项目增加TinyMec富文本编辑器组件

TinyMec富文本编辑器开源,而且开发人员对他的支持比较好,所以选用了它 https://liubing.me/vue-tinymce-5.html 基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/details/83310879做了些小修改,详情见github Github:https://github.com/liub1934/vue-us

Django中添加富文本编辑器

使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目的urls.py文件中 INSTALLED_APPS = [ ... 'ckeditor' ] urlpatterns = [ ... url(r'^ckeditor/', include('ckeditor_uploader.urls')),] 3.在models.py文件中使用ckeditor的

Django框架中tinymce富文本编辑器的使用

1. 安装富文本模块 pip install tinymce 2. Django项目中注册添加配置. Setting文件中应用注册 'tinymce', 添加tinymce的基本设置.(高级-长600-宽-400) TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400, }  3. urls配置 添加tinymce配置 url(r'^tinymce/', include('tinymce.urls'

silverlight中使用富文本编辑器

因为项目的需要在silverlight项目中使用富文本编辑器,好用的在线富文本编辑器有很多Fckeditor,百度的ueditor,但是这些富文本编辑器都是html的,想在silverlight中使用必须承载html页面再使用这些富文本编辑器. 之前找到了一个在silverliht中承载html页面的第三方控件htmlhost,但是这个控件有一个不好的地方时,用了只有silverlight项目中所有服务端控件都不能输入中文. 最近找到了一个大牛自己写的一个控件,能够满足我们的需要,自己改造之后放

富文本编辑器和fastdfs的使用

宜立方商城的系统架构a) 功能介绍(项目架构,有哪些功能模块,这些功能模块如何实现?)b) 架构讲解工程搭建-后台工程c) 使用maven搭建工程(后台工程如何搭建?)d) 使用maven的tomcat插件启动工程SSM框架整合. 服务中间件dubbo,使用dubbo实现soa架构.项目改造为基于SOA架构(什么是SOA架构,有什么好处,如何使用),面向服务的架构 图片上传功能分析,图片服务器,如何保存图片,如何访问图片?nginx的安装:反向代理服务器.Nginx配置虚拟机,Nginx实现反向