201206030/novel-plus
1
0
Fork 0
mirror of https://github.com/201206030/novel-plus.git synced 2025-06-24 04:46:37 +00:00
Code Issues Packages Releases Wiki Activity

文件夹结构调整，新增模版自定义功能

Browse Source
This commit is contained in:
xiongxiaoyang
2020-12-26 19:13:07 +08:00
parent f03ab953d0
commit 6ad51908d5
601 changed files with 75656 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
templates/orange/static/wangEditor/docs/usage/03-config/01-menu.md Normal file
View File

@ -0,0 +1,52 @@
# 自定义菜单
编辑器创建之前，可使用`editor.customConfig.menus`定义显示哪些菜单和菜单的顺序。**注意：v3 版本的菜单不支持换行折叠了（因为换行之后菜单栏是在太难看），如果菜单栏宽度不够，建议精简菜单项。**
## 代码示例
```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.menus = [
'head',
'bold',
'italic',
'underline'
]
editor.create()
</script>
```
## 默认菜单
编辑默认的菜单配置如下
```javascript
[
'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
```

21
templates/orange/static/wangEditor/docs/usage/03-config/02-debug.md Normal file
View File

@ -0,0 +1,21 @@
# 定义 debug 模式
可通过`editor.customConfig.debug = true`配置`debug`模式，`debug`模式下，有 JS 错误会以`throw Error`方式提示出来。默认值为`false`，即不会抛出异常。
但是，在实际开发中不建议直接定义为`true`或者`false`，可通过 url 参数进行干预，示例如下：
```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')
// 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
editor.create()
</script>
```

40
templates/orange/static/wangEditor/docs/usage/03-config/03-onchange.md Normal file
View File

@ -0,0 +1,40 @@
# 配置 onchange 函数
配置`onchange`函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发`onchange`函数执行。
但是，**用户自己使用 JS 修改了`div1`的`innerHTML`，不会自动触发`onchange`函数**，此时你可以通过执行`editor.change()`来手动触发`onchange`函数的执行。
```html
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
<p>手动触发 onchange 函数执行</p>
<button id="btn1">change</button>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.onchange = function (html) {
// html 即变化之后的内容
console.log(html)
}
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
// 如果未配置 editor.customConfig.onchange，则 editor.change 为 undefined
editor.change && editor.change()
})
</script>
```
-----
另外，如果需要修改 onchange 触发的延迟时间（onchange 会在用户无任何操作的 xxx 毫秒之后被触发），可通过如下配置
```js
// 自定义 onchange 触发的延迟时间，默认为 200 ms
editor.customConfig.onchangeTimeout = 1000 // 单位 ms
```

19
templates/orange/static/wangEditor/docs/usage/03-config/04-z-index.md Normal file
View File

@ -0,0 +1,19 @@
# 配置编辑区域的 z-index
编辑区域的`z-index`默认为`10000`，可自定义修改，代码配置如下。需改之后，编辑区域和菜单的`z-index`会同时生效。
```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.zIndex = 100
editor.create()
</script>
```

30
templates/orange/static/wangEditor/docs/usage/03-config/05-lang.md Normal file
View File

@ -0,0 +1,30 @@
# 多语言
可以通过`lang`配置项配置多语言，其实就是通过该配置项中的配置，将编辑器显示的文字，替换成你需要的文字。
```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.lang = {
'设置标题': 'title',
'正文': 'p',
'链接文字': 'link text',
'链接': 'link',
'上传图片': 'upload image',
'上传': 'upload',
'创建': 'init'
// 还可自定添加更多
}
editor.create()
</script>
```
**注意，以上代码中的`链接文字`要写在`链接`前面，`上传图片`要写在`上传`前面，因为前者包含后者。如果不这样做，可能会出现替换不全的问题，切记切记！**

33
templates/orange/static/wangEditor/docs/usage/03-config/06-paste.md Normal file
View File

@ -0,0 +1,33 @@
# 粘贴文本
**注意，以下配置暂时对 IE 无效。IE 暂时使用系统自带的粘贴功能，没有样式过滤！**
## 关闭粘贴样式的过滤
当从其他网页复制文本内容粘贴到编辑器中，编辑器会默认过滤掉复制文本中自带的样式，目的是让粘贴后的文本变得更加简洁和轻量。用户可通过`editor.customConfig.pasteFilterStyle = false`手动关闭掉粘贴样式的过滤。
## 自定义处理粘贴的文本内容
使用者可通过`editor.customConfig.pasteTextHandle`对粘贴的文本内容进行自定义的过滤、处理等操作，然后返回处理之后的文本内容。编辑器最终会粘贴用户处理之后并且返回的的内容。
## 示例代码
```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.pasteFilterStyle = false
// 自定义处理粘贴的文本内容
editor.customConfig.pasteTextHandle = function (content) {
// content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
return content + '<p>在粘贴内容后面追加一行</p>'
}
editor.create()
</script>
```

12
templates/orange/static/wangEditor/docs/usage/03-config/07-linkImgCallback.md Normal file
View File

@ -0,0 +1,12 @@
# 插入网络图片的回调
插入网络图片时，可通过如下配置获取到图片的信息。`v3.0.10`开始支持。
```js
var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkImgCallback = function (url) {
console.log(url) // url 即插入图片的地址
}
editor.create()
```

16
templates/orange/static/wangEditor/docs/usage/03-config/08-linkCheck.md Normal file
View File

@ -0,0 +1,16 @@
# 插入链接的校验
插入链接时，可通过如下配置对文字和链接进行校验。`v3.0.10`开始支持。
```js
var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkCheck = function (text, link) {
console.log(text) // 插入的文字
console.log(link) // 插入的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串，即校验失败的提示信息
}
editor.create()
```

19
templates/orange/static/wangEditor/docs/usage/03-config/09-onfocus.md Normal file
View File

@ -0,0 +1,19 @@
# 配置 onfocus 函数
配置`onfocus`函数之后，用户点击富文本区域会触发`onfocus`函数执行。
```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.onfocus = function () {
console.log("onfocus")
}
editor.create()
</script>
```

20
templates/orange/static/wangEditor/docs/usage/03-config/10-onblur.md Normal file
View File

@ -0,0 +1,20 @@
# 配置 onblur 函数
配置`onblur`函数之后，如果当前有手动获取焦点的富文本并且鼠标点击富文本以外的区域，则会触发`onblur`函数执行。
```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.onblur = function (html) {
// html 即编辑器中的内容
console.log('onblur', html)
}
editor.create()
</script>
```

15
templates/orange/static/wangEditor/docs/usage/03-config/11-linkImgCheck.md Normal file
View File

@ -0,0 +1,15 @@
# 插入网络图片的校验
插入网络图片时，可对图片地址做自定义校验。`v3.0.13`开始支持。
```js
var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkImgCheck = function (src) {
console.log(src) // 图片的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串，即校验失败的提示信息
}
editor.create()
```

29
templates/orange/static/wangEditor/docs/usage/03-config/12-colors.md Normal file
View File

@ -0,0 +1,29 @@
# 配置字体颜色、背景色
编辑器的字体颜色和背景色，可以通过`editor.customConfig.colors`自定义配置
```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.colors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#c24f4a',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff'
]
editor.create()
</script>
```

48
templates/orange/static/wangEditor/docs/usage/03-config/13-emot.md Normal file
View File

@ -0,0 +1,48 @@
# 配置表情
`v3.0.15`开始支持配置表情，支持图片格式和 emoji ，可通过`editor.customConfig.emotions`配置。**注意看代码示例中的注释：**
```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 ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
editor.customConfig.emotions = [
{
// tab 的标题
title: '默认',
// type -> 'emoji' / 'image'
type: 'image',
// content -> 数组
content: [
{
alt: '[坏笑]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的标题
title: 'emoji',
// type -> 'emoji' / 'image'
type: 'emoji',
// content -> 数组
content: ['😀', '😃', '😄', '😁', '😆']
}
]
editor.create()
</script>
```
温馨提示：需要表情图片可以去 https://api.weibo.com/2/emotions.json?source=1362404091 和 http://yuncode.net/code/c_524ba520e58ce30 逛一逛，或者自己搜索。