node.js+express+jade系列七:富文本编辑框的使用
下载nicEdit富文本编辑框,
把nicEdit.js文件放到public/javascripts/下
新建jade文件:代码如下
doctype html
html
head
title
script(type="text/javascript", src="/javascripts/nicEdit.js")
script(type="text/javascript").
var niceditor;
bkLib.onDomLoaded(function() {
niceditor = new nicEditor({fullPanel : true}).panelInstance('area3');
});
function getStr(){
var str=niceditor.instanceById("area3").getContent()
alert(str);
}
body
textarea(name="area3", id="area3", style="width:500px;height:200px;") hello world
button(name="btn", id="btn", onclick="getStr()") btn
在浏览器访问即可看到显示的富文本编辑器,但是上传图片不能用,接下来需要修改nicEdit.js,
打开nicEdit.js。找到nicURI,把值改成post请求上传图片的方法,如nicURI:"/nicEditUpload"
后端实现nicEditUpload即可(实现方法如上篇文章),完成后图片上传成功了,但是在编辑器中没有显示不知道怎么解决....以后再弄吧
node.js+express+jade系列七:富文本编辑框的使用的更多相关文章
- node.js+express+jade系列五:ajax登录
本文通过jquery实现简单的无刷新登录 1:首先要在router中配置登录请求,因为登录需要传user和pwd考虑到安全需用post请求 { path:'/', meth ...
- node.js+express+jade系列四:jade嵌套的使用
jade是express自带的模板引擎 jade文件可以嵌套使用,include引用外部jade文件,extends引用jade模板 例如 有一个主jade文件layout.jade,引用top.ja ...
- node.js+express+jade系列三:404错误的配置
1:新建一个404.jade 2:在app.js后面配置如下代码 app.use(function(req, res){ res.render("404", {sta ...
- node.js+express+jade系列二:rotue路由的配置
页面的访问最常见的是get和post两种,无论是get请求还是post请求express自动判断执行app.get或app.post 1:app.get(名称,路径)或app["get&qu ...
- node.js+express+jade系列一:session的使用
此出只介绍内存session的配置好使用 1:打开app.js文件,添加下面红色内容,一定要注意位置在router前面 app.use(express.methodOverride()); sessi ...
- node.js+express+jade系列六:图片的上传
安装npm install formidable 先把文件上传到临时文件夹,再通过fs重命名移动到指定的目录即可 fs.rename即重命名,但是fs.rename不能夸磁盘移动文件,所以我们需要指定 ...
- [译]简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站
原文: http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ 原文的源代码在此 太多的教程教你些一个Hello, World!了, ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
- Node.js Express 框架学习
转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...
随机推荐
- vmware下为CentOS7设置静态IP
vmware下为CentOS7设置静态IP可以分为三个主要步骤: 1. 在windows中设置VMWare创建的虚拟网络 2. 设置VMWare为静态IP 3. 设置CentOS7的网络为静态IP 首 ...
- 《TomCat与Java Web开发技术详解》(第二版) 第一章节的学习总结--HTTP组成+基本访问方式
1.需要看懂HTML文件中的组成元素的基本含义.不同的组成元素,可以使得HTML支持文本,图片(img,将图片发给客户端),静态音频/视频(embed src,将音频视频发给客户端),超链接(href ...
- Tautology - poj 3295
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10437 Accepted: 3963 Description WF ...
- java中什么是bridge method(桥接方法)
java中什么是bridge method(桥接方法) https://blog.csdn.net/z69183787/article/details/81115524
- Python3 多线程 学习 threading
#-*- coding:utf-8 --*- #多线程测试 import time import datetime import threading def worker(): print(" ...
- YUM安装(卸载)KDE和GNOME
YUM安装(卸载)KDE和GNOME显示系统已经安装的组件,和可以安装的组件:#yum grouplist 如果系统安装之初采用最小化安装,没有安装xwindow,那么先安装:#yum groupin ...
- 【BZOJ5020】[THUWC 2017]在美妙的数学王国中畅游 泰勒展开+LCT
[BZOJ5020][THUWC 2017]在美妙的数学王国中畅游 Description 数字和数学规律主宰着这个世界. 机器的运转, 生命的消长, 宇宙的进程, 这些神秘而又美妙的过程无不可以用数 ...
- MediaRecorder实现微信、QQ、人人、易信等语音录制功能工具:MediaUtilAPI
本文介绍使用MediaRecorder进行录制音频.录制视频学习,熟悉MediaRecorder执行流程,通过简单的Demo结合解释运行效果,最后封装MediaRecorder的API工具,实现常见比 ...
- CXF生成client注意事项
1. 在使用wsdl2java命令生成client文件时在Service的Java文件中面出现super构造错误,这是因为jax-ws2.2规约与java6冲突 故须要减少jax-ws规约版本号. ...
- JVM性能优化, Part 1 ―― JVM简介
JVM性能优化这些列文章共分为5章,是ImportNew上面翻译自Javaworld: 第1章:JVM技术概览 第2章:编译器 第3章:垃圾回收 第4章:并发垃圾回收 第5章:可伸缩性 众所周知,Ja ...