Vue.js中集成summernote
首先引用summernote样式及js:
<!--summernote css -->
<link href="${ctxPath}/static/css/summernote/summernote-0.8.8.css" rel="stylesheet"> <!--summernote-->
<script src="${ctxPath}/static/plugins/summernote/summernote.js"></script>
<script src="${ctxPath}/static/plugins/summernote/summernote-zh-CN.min.js"></script>
Add.html:
<input id="content" name="content" type="hidden" v-model="sysNotify.notifyContent">
<div class="col-sm-11">
<div class="ibox-content no-padding">
<div id="content_sn" class="summernote"></div>
</div>
</div>
Add.js:
$().ready(function() {
$('.summernote').summernote({
height : '220px',
lang : 'zh-CN',
callbacks : {
onImageUpload: function(files, editor, $editable) {
sendFile(files);
}
}
});
}); var vm = new Vue({
el:'#dpLTE',
data: {
sysNotify: {
id:
}
},
methods : {
/* html_encode: function (str) {
var s = ''
if (str.length === 0) return ''
s = str.replace(/&/g, '&')
s = s.replace(/</g, '<')
s = s.replace(/>/g, '>')
s = s.replace(/ /g, ' ')
s = s.replace(/'/g, ''')
s = s.replace(/"/g, '"')
s = s.replace(/\n/g, '<br>')
return s
},
html_decode: function (str) {
var s = ''
if (str.length === 0) return ''
s = str.replace(/&/g, '&')
s = s.replace(/</g, '<')
s = s.replace(/>/g, '>')
s = s.replace(/ /g, ' ')
s = s.replace(/'/g, '\'')
s = s.replace(/"/g, '"')
s = s.replace(/<br>/g, '\n')
return s }, */
acceptClick: function() {
if (!$('#form').Validform()) {
return false;
} var content_sn = $("#content_sn").summernote('code');
$("#content").val(content_sn);
//vm.sysNotify.notifyContent=html_encode(content_sn); //采用js中直接转义方式,调用公用的转义函数encode
vm.sysNotify.notifyContent=content_sn; //采用过滤器的方式,在数据提交时进行转义 //alert(vm.sysNotify.notifyContent); $.SaveForm({
url: '../../sys/notify/save?_' + $.now(),
param: vm.sysNotify,
success: function(data) {
$.currentIframe().vm.load();
}
});
}
}
})
Edit.js:
$().ready(function() {
$('.summernote').summernote({
height : '220px',
lang : 'zh-CN',
callbacks: {
onImageUpload: function(files, editor, $editable) {
sendFile(files);
}
}
});
}); var vm = new Vue({
el:'#dpLTE',
data: {
sysNotify: {
id:
}
},
methods : {
/* html_encode: function (str) {
var s = ''
if (str.length === 0) return ''
s = str.replace(/&/g, '&')
s = s.replace(/</g, '<')
s = s.replace(/>/g, '>')
s = s.replace(/ /g, ' ')
s = s.replace(/'/g, ''')
s = s.replace(/"/g, '"')
s = s.replace(/\n/g, '<br>')
return s
},
html_decode: function (str) {
var s = ''
if (str.length === 0) return ''
s = str.replace(/&/g, '&')
s = s.replace(/</g, '<')
s = s.replace(/>/g, '>')
s = s.replace(/ /g, ' ')
s = s.replace(/'/g, '\'')
s = s.replace(/"/g, '"')
s = s.replace(/<br>/g, '\n')
return s
}, */
setForm: function() {
$.SetForm({
url: '../../sys/notify/info?_' + $.now(),
param: vm.sysNotify.id,
success: function(data) {
vm.sysNotify = data;
///alert(vm.sysNotify.notifyContent);
//$('#content_sn').summernote('code', html_decode(vm.sysNotify.notifyContent)); //采用js中直接转义方式,调用公用的转义函数decode
$('#content_sn').summernote('code', vm.sysNotify.notifyContent); //采用过滤器的方式,在数据提交时进行转义
}
});
},
acceptClick: function() {
if (!$('#form').Validform()) {
return false;
} var content_sn = $("#content_sn").summernote('code');
$("#content").val(content_sn);
vm.sysNotify.notifyContent=vm.html_encode(content_sn); $.ConfirmForm({
url: '../../sys/notify/update?_' + $.now(),
param: vm.sysNotify,
success: function(data) {
$.currentIframe().vm.load();
}
});
}
}
})
summernote图片上传回调函数sendFile:
//编辑器新增的ajax上传图片函数
function sendFile(files, editor, $editable) {
var size = files[].size;
if((size / / ) > ) {
alert("图片大小不能超过2M...");
return false;
}
console.log("size="+size);
var formData = new FormData();
formData.append("file", files[]);
$.ajax({
data : formData,
type : "POST",
url : "/sys/file/upload", // 图片上传出来的url,返回的是图片上传后的路径,http格式
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//data是返回的hash,key之类的值,key是定义的文件名
$('.summernote').summernote('insertImage',data.fileName);
},
error:function(){
alert("上传失败");
}
});
}
后台upload方法:
@ResponseBody
@PostMapping("/upload")
R upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
/*if ("test".equals(getUsername())) {
return R.error(1, "演示系统不允许修改,完整体验请部署程序");
}*/
String fileName = file.getOriginalFilename();
fileName = FileUtil.renameToUUID(fileName);
SysFileEntity sysFile = new SysFileEntity(FileType.fileType(fileName), "/files/" + fileName, new Date());
try {
FileUtil.uploadFile(file.getBytes(), dpConfig.getUploadPath(), fileName);
} catch (Exception e) {
return R.error();
} if (sysFileService.save(sysFile) > ) {
return R.ok().put("fileName",sysFile.getUrl());
}
return R.error();
}
文件上传路径虚拟映射:
registry.addResourceHandler("/files/**").addResourceLocations("file:///"+dpConfig.getUploadPath());
文件路径过滤:
public FilterRegistrationBean xssFilterRegistration() {
XssFilter xssFilter = new XssFilter();
FilterRegistrationBean registration = new FilterRegistrationBean(xssFilter);
registration.setOrder(Integer.MAX_VALUE);
registration.addUrlPatterns("/upload");
return registration;
}
这样就不需要在前端encode和decode,xssFilter过滤器会自动做这些事情。
测试图例:
Vue.js中集成summernote的更多相关文章
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- Vue.js中css的作用域
Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- angular.js和vue.js中实现函数去抖(debounce)
问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...
随机推荐
- Docker镜像保存save、加载load(外网转移至内网)
(1)查看要要保存的镜像的ID [root@localhost docker]# docker images (2)保存镜像 [root@localhost docker]# docker save ...
- Solr坏境搭建
1.1. 搭建步骤 第一步:把solr 的压缩包上传到Linux系统 第二步:解压solr. 第三步:安装Tomcat,解压缩即可. 第四步:把dist目录下的solr.war部署到Tomcat下. ...
- nginx 配置身份验证 http_auth_basic_module
ngx_http_auth_basic_module模块实现访问必须输入用户名和密码 正确情况向访问,这为我们一些重要资源访问增添了一道安全锁. 语法: auth_basic_user_fil ...
- Android的路接下来该怎么走?
其实想写这篇文章好久了,很多小伙伴们也经常在群里探讨android移动开发者的走向,一部分人都想多快好省,间歇性踌躇满志.持续性混吃等死 ,只想用CV的开发模式们快速完成工作,然后回家王者农药.其实这 ...
- chromerdriver下载地址:xpath_help
chrome下载地址 http://npm.taobao.org/mirrors/chromedriver xpath_help https://blog.csdn.net/Cayny/article ...
- Intsall The Nessus in you kali linux
1.first you shold download the nessus on the web station the nessus download site url: https://www. ...
- java中对象的创建过程
public class Test1 { public static void main(String[] args) { new B(); System.out.println("---- ...
- jenkins添加类ubuntu/centos节点报错
前言:在jenkins添加ubuntu节点,发现启动代理报错 以下是报错: [SSH] Checking java version of /usr/java/latest/bin/java Could ...
- HTML,js的基础知识
HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签 ...
- pip命令出现了问题,提示说找不到ssl模块
Could not find a version that satisfies the requirement pygame (from versions: ) No matching distrib ...