700字范文 > summernote富文本编辑器

summernote富文本编辑器

时间：2018-07-15 21:46:09

相关推荐

summernote富文本编辑器

一、文档二、使用四、他山之石

一、文档

官网地址 /github /summernote/summernote选择版本下载 /summernote/summernote/tags

二、使用

bootstrap线上地址在官网找summernote线上地址在官网找文件上传以Tp5为例，参考这篇：kindeditor自定义上传文件（图片视频文件）方（后台PHP）成功返回

return ['error' => 0, //成功时'url' => '图片,视频上传后的地址'];

失败返回

return ['error' => 1, //失败时'message' => $file->getError()];

效果图

代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>summernote富文本编辑器</title><link rel="stylesheet" type="text/css"href="/bootstrap/3.4.1/css/bootstrap.min.css"/><link href="/npm/summernote@0.8.18/dist/summernote.css" rel="stylesheet"></head><body><div id="vue-mount-element" style="padding: 20px"><textarea name="content" id="editor">{{info.content}}</textarea></div></body><script src="/jquery/3.4.1/jquery.min.js"></script><script src="/bootstrap/3.4.1/js/bootstrap.min.js"></script><script src="/npm/summernote@0.8.18/dist/summernote.js"></script><script src="/npm/vue@2/dist/vue.js"></script><script>let vueObject = new Vue({el: '#vue-mount-element', //vue挂载的元素data() {return {info: {id: 1, content: "<b>加粗内容</b>，正常内容"}};}})$(document).ready(function () {$('#editor').summernote({//富文本挂载的元素id=editor// height: 500,// width: 1000,minHeight: 300, //宽高，根据自己的需求设置：如果是手机上显示，就把宽设小一点，比如410pxmaxwidth: 1000,minwidth: 200,maxHeight: 500,focus: false,callbacks: {onImageUpload: function (files, editor) {var $files = $(files);// 通过each方法遍历每一个file$files.each(function () {var file = this;// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下var data = new FormData();// 将文件加入到file中，后端可获得到参数名为“file”data.append("file", file);// ajax上传$.ajax({data: data,type: "POST",url: "/upload/image",// div上的actioncache: false,contentType: false,processData: false,// 成功时调用方法，后端返回json数据success: function (response) {// console.log(response)if (response.error != 0) {alert("上传失败：" + response.message);} else {// 插入到summernote$('#editor').summernote('insertImage', response.url);}},});})}, onFileUpload: function (files) {//文件上传，默认没有，具体怎么加，请看下一篇var $files = $(files);// 通过each方法遍历每一个file$files.each(function () {var file = this;// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下var data = new FormData();// 将文件加入到file中，后端可获得到参数名为“file”data.append("file", file);// ajax上传$.ajax({data: data,type: "POST",url: "/upload/file",// div上的actioncache: false,contentType: false,processData: false,// 成功时调用方法，后端返回json数据success: function (response) {// console.log(response)if (response.error != 0) {alert("上传失败：" + response.message);} else {$(".note-video-url").val(response.url);//Insert Video之前是输入线上视频url地址后去除禁用，现在是我们上传之后给Video URL输入框赋值后去除禁用$(".note-video-btn").removeAttr("disabled");}},});})}}});})</script></html>

四、他山之石

summernote富文本编辑器的使用

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。