mirror of
https://github.com/201206030/novel-plus.git
synced 2025-06-24 04:46:37 +00:00
文件夹结构调整，新增模版自定义功能
This commit is contained in:
xiongxiaoyang
@ -0,0 +1,52 @@
|
||||
# 隐藏/显示 tab
|
||||
|
||||
## 显示“上传图片”tab
|
||||
|
||||
默认情况下，编辑器不会显示“上传图片”的tab，因为你还没有配置上传图片的信息。
|
||||
|
||||
|
||||
|
||||
参考一下示例显示“上传图片”tab
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
<p>欢迎使用 wangEditor 富文本编辑器</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
|
||||
// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
|
||||
// editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
|
||||
// editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
|
||||
|
||||
editor.create()
|
||||
</script>
|
||||
```
|
||||
|
||||
显示效果
|
||||
|
||||
|
||||
|
||||
## 隐藏“网络图片”tab
|
||||
|
||||
默认情况下，“网络图片”tab是一直存在的。如果不需要，可以参考一下示例来隐藏它。
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
<p>欢迎使用 wangEditor 富文本编辑器</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
|
||||
// 隐藏“网络图片”tab
|
||||
editor.customConfig.showLinkImg = false
|
||||
|
||||
editor.create()
|
||||
</script>
|
||||
```
|
||||
@ -0,0 +1,23 @@
|
||||
# 使用 base64 保存图片
|
||||
|
||||
如果需要使用 base64 编码直接将图片插入到内容中，可参考一下示例配置
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
<p>欢迎使用 wangEditor 富文本编辑器</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
|
||||
editor.create()
|
||||
</script>
|
||||
```
|
||||
|
||||
示例效果如下
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,188 @@
|
||||
# 上传图片 & 配置
|
||||
|
||||
将图片上传到服务器上的配置方式
|
||||
|
||||
## 上传图片
|
||||
|
||||
参考如下代码
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
<p>欢迎使用 wangEditor 富文本编辑器</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
|
||||
// 配置服务器端地址
|
||||
editor.customConfig.uploadImgServer = '/upload'
|
||||
|
||||
// 进行下文提到的其他配置
|
||||
// ……
|
||||
// ……
|
||||
// ……
|
||||
|
||||
editor.create()
|
||||
</script>
|
||||
```
|
||||
|
||||
其中`/upload`是上传图片的服务器端接口，接口返回的**数据格式**如下（**实际返回数据时，不要加任何注释！！！**）
|
||||
|
||||
```json
|
||||
{
|
||||
// errno 即错误代码，0 表示没有错误。
|
||||
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
|
||||
"errno": 0,
|
||||
|
||||
// data 是一个数组，返回若干图片的线上地址
|
||||
"data": [
|
||||
"图片1地址",
|
||||
"图片2地址",
|
||||
"……"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 限制图片大小
|
||||
|
||||
默认限制图片大小是 5M
|
||||
|
||||
```javascript
|
||||
// 将图片大小限制为 3M
|
||||
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
|
||||
```
|
||||
|
||||
## 限制一次最多能传几张图片
|
||||
|
||||
默认为 10000 张（即不限制），需要限制可自己配置
|
||||
|
||||
```javascript
|
||||
// 限制一次最多上传 5 张图片
|
||||
editor.customConfig.uploadImgMaxLength = 5
|
||||
```
|
||||
|
||||
## 自定义上传参数
|
||||
|
||||
上传图片时可自定义传递一些参数，例如传递验证的`token`等。参数会被添加到`formdata`中。
|
||||
|
||||
```javascript
|
||||
editor.customConfig.uploadImgParams = {
|
||||
token: 'abcdef12345' // 属性值会自动进行 encode ，此处无需 encode
|
||||
}
|
||||
```
|
||||
|
||||
如果**还需要**将参数拼接到 url 中，可再加上如下配置
|
||||
|
||||
```
|
||||
editor.customConfig.uploadImgParamsWithUrl = true
|
||||
```
|
||||
|
||||
## 自定义 fileName
|
||||
|
||||
上传图片时，可自定义`filename`，即在使用`formdata.append(name, file)`添加图片文件时，自定义第一个参数。
|
||||
|
||||
```javascript
|
||||
editor.customConfig.uploadFileName = 'yourFileName'
|
||||
```
|
||||
|
||||
## 自定义 header
|
||||
|
||||
上传图片时刻自定义设置 header
|
||||
|
||||
```javascript
|
||||
editor.customConfig.uploadImgHeaders = {
|
||||
'Accept': 'text/x-json'
|
||||
}
|
||||
```
|
||||
|
||||
## withCredentials（跨域传递 cookie）
|
||||
|
||||
跨域上传中如果需要传递 cookie 需设置 withCredentials
|
||||
|
||||
```javascript
|
||||
editor.customConfig.withCredentials = true
|
||||
```
|
||||
|
||||
## 自定义 timeout 时间
|
||||
|
||||
默认的 timeout 时间是 10 秒钟
|
||||
|
||||
```javascript
|
||||
// 将 timeout 时间改为 3s
|
||||
editor.customConfig.uploadImgTimeout = 3000
|
||||
```
|
||||
|
||||
## 监听函数
|
||||
|
||||
可使用监听函数在上传图片的不同阶段做相应处理
|
||||
|
||||
```javascript
|
||||
editor.customConfig.uploadImgHooks = {
|
||||
before: function (xhr, editor, files) {
|
||||
// 图片上传之前触发
|
||||
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
|
||||
|
||||
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
|
||||
// return {
|
||||
// prevent: true,
|
||||
// msg: '放弃上传'
|
||||
// }
|
||||
},
|
||||
success: function (xhr, editor, result) {
|
||||
// 图片上传并返回结果，图片插入成功之后触发
|
||||
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
|
||||
},
|
||||
fail: function (xhr, editor, result) {
|
||||
// 图片上传并返回结果，但图片插入错误时触发
|
||||
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
|
||||
},
|
||||
error: function (xhr, editor) {
|
||||
// 图片上传出错时触发
|
||||
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
|
||||
},
|
||||
timeout: function (xhr, editor) {
|
||||
// 图片上传超时时触发
|
||||
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
|
||||
},
|
||||
|
||||
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
|
||||
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
|
||||
customInsert: function (insertImg, result, editor) {
|
||||
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
|
||||
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
|
||||
|
||||
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
|
||||
var url = result.url
|
||||
insertImg(url)
|
||||
|
||||
// result 必须是一个 JSON 格式字符串！！！否则报错
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 自定义提示方法
|
||||
|
||||
上传图片的错误提示默认使用`alert`弹出，你也可以自定义用户体验更好的提示方式
|
||||
|
||||
```javascript
|
||||
editor.customConfig.customAlert = function (info) {
|
||||
// info 是需要提示的内容
|
||||
alert('自定义提示：' + info)
|
||||
}
|
||||
```
|
||||
|
||||
## 自定义上传图片事件
|
||||
|
||||
如果想完全自己控制图片上传的过程，可以使用如下代码
|
||||
|
||||
```javascript
|
||||
editor.customConfig.customUploadImg = function (files, insert) {
|
||||
// files 是 input 中选中的文件列表
|
||||
// insert 是获取图片 url 后，插入到编辑器的方法
|
||||
|
||||
// 上传代码返回结果之后，将图片插入到编辑器中
|
||||
insert(imgUrl)
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
# 上传到七牛云存储
|
||||
|
||||
完整的 demo 请参见 https://github.com/wangfupeng1988/js-sdk ，可下载下来本地运行 demo
|
||||
|
||||
> 注意：配置了上传七牛云存储之后，**无法再使用插入网络图片**
|
||||
|
||||
核心代码如下：
|
||||
|
||||
```js
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
// 允许上传到七牛云存储
|
||||
editor.customConfig.qiniu = true
|
||||
editor.create()
|
||||
|
||||
// 初始化七牛上传
|
||||
uploadInit()
|
||||
|
||||
// 初始化七牛上传的方法
|
||||
function uploadInit() {
|
||||
// 获取相关 DOM 节点的 ID
|
||||
var btnId = editor.imgMenuId;
|
||||
var containerId = editor.toolbarElemId;
|
||||
var textElemId = editor.textElemId;
|
||||
|
||||
// 创建上传对象
|
||||
var uploader = Qiniu.uploader({
|
||||
runtimes: 'html5,flash,html4', //上传模式,依次退化
|
||||
browse_button: btnId, //上传选择的点选按钮，**必需**
|
||||
uptoken_url: '/uptoken',
|
||||
//Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
|
||||
// uptoken : '<Your upload token>',
|
||||
//若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
|
||||
// unique_names: true,
|
||||
// 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
|
||||
// save_key: true,
|
||||
// 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
|
||||
domain: 'http://7xrjl5.com1.z0.glb.clouddn.com/',
|
||||
//bucket 域名，下载资源时用到，**必需**
|
||||
container: containerId, //上传区域DOM ID，默认是browser_button的父元素，
|
||||
max_file_size: '100mb', //最大文件体积限制
|
||||
flash_swf_url: '../js/plupload/Moxie.swf', //引入flash,相对路径
|
||||
filters: {
|
||||
mime_types: [
|
||||
//只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
|
||||
{ title: "图片文件", extensions: "jpg,gif,png,bmp" }
|
||||
]
|
||||
},
|
||||
max_retries: 3, //上传失败最大重试次数
|
||||
dragdrop: true, //开启可拖曳上传
|
||||
drop_element: textElemId, //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
|
||||
chunk_size: '4mb', //分块上传时，每片的体积
|
||||
auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
|
||||
init: {
|
||||
'FilesAdded': function(up, files) {
|
||||
plupload.each(files, function(file) {
|
||||
// 文件添加进队列后,处理相关的事情
|
||||
printLog('on FilesAdded');
|
||||
});
|
||||
},
|
||||
'BeforeUpload': function(up, file) {
|
||||
// 每个文件上传前,处理相关的事情
|
||||
printLog('on BeforeUpload');
|
||||
},
|
||||
'UploadProgress': function(up, file) {
|
||||
// 显示进度
|
||||
printLog('进度 ' + file.percent)
|
||||
},
|
||||
'FileUploaded': function(up, file, info) {
|
||||
// 每个文件上传成功后,处理相关的事情
|
||||
// 其中 info 是文件上传成功后，服务端返回的json，形式如
|
||||
// {
|
||||
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
|
||||
// "key": "gogopher.jpg"
|
||||
// }
|
||||
printLog(info);
|
||||
// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
|
||||
|
||||
var domain = up.getOption('domain');
|
||||
var res = $.parseJSON(info);
|
||||
var sourceLink = domain + res.key; //获取上传成功后的文件的Url
|
||||
|
||||
printLog(sourceLink);
|
||||
|
||||
// 插入图片到editor
|
||||
editor.cmd.do('insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
|
||||
},
|
||||
'Error': function(up, err, errTip) {
|
||||
//上传出错时,处理相关的事情
|
||||
printLog('on Error');
|
||||
},
|
||||
'UploadComplete': function() {
|
||||
//队列文件处理完毕后,处理相关的事情
|
||||
printLog('on UploadComplete');
|
||||
}
|
||||
// Key 函数如果有需要自行配置，无特殊需要请注释
|
||||
//,
|
||||
// 'Key': function(up, file) {
|
||||
// // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
|
||||
// // 该配置必须要在 unique_names: false , save_key: false 时才生效
|
||||
// var key = "";
|
||||
// // do something with key here
|
||||
// return key
|
||||
// }
|
||||
}
|
||||
// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
|
||||
// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
|
||||
});
|
||||
}
|
||||
|
||||
// 封装 console.log 函数
|
||||
function printLog(title, info) {
|
||||
window.console && console.log(title, info);
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user