mirror of
https://github.com/201206030/novel-plus.git
synced 2025-06-24 04:46:37 +00:00
文件夹结构调整，新增模版自定义功能
This commit is contained in:
xiongxiaoyang
25
templates/orange/static/wangEditor/docs/dev/README.md
Normal file
25
templates/orange/static/wangEditor/docs/dev/README.md
Normal file
@ -0,0 +1,25 @@
|
||||
面向开发者的文档
|
||||
|
||||
|
||||
框架介绍
|
||||
|
||||
- 下载和运行
|
||||
- 目录结构介绍
|
||||
- `example`目录
|
||||
- `src`目录（`js`目录，`less`目录）
|
||||
- `package.json`
|
||||
- `gulpfile.js`
|
||||
|
||||
如何提交 PR
|
||||
|
||||
|
||||
|
||||
上线
|
||||
|
||||
- 修改`package.json`版本
|
||||
- 提交到github，并创建tag
|
||||
- 提交到 npm
|
||||
- 更新 .md 文档
|
||||
- 文档同步到 kancloud
|
||||
- ……
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
# 简单的 demo
|
||||
|
||||
## 下载
|
||||
|
||||
- 点击 [https://github.com/wangfupeng1988/wangEditor/releases](https://github.com/wangfupeng1988/wangEditor/releases) 下载最新版。进入`release`文件夹下找到`wangEditor.js`或者`wangEditor.min.js`即可
|
||||
- 使用CDN：[//unpkg.com/wangeditor/release/wangEditor.min.js](https://unpkg.com/wangeditor/release/wangEditor.min.js)
|
||||
- 使用`bower`下载：`bower install wangEditor` （前提保证电脑已安装了`bower`）
|
||||
|
||||
*PS：支持`npm`安装，请参见后面的章节*
|
||||
|
||||
## 制作 demo
|
||||
|
||||
编辑器效果如下。
|
||||
|
||||
|
||||
|
||||
代码示例如下。**注意，以下代码中无需引用任何 CSS 文件！！！**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>wangEditor demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="editor">
|
||||
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
|
||||
</div>
|
||||
|
||||
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#editor')
|
||||
// 或者 var editor = new E( document.getElementById('#editor') )
|
||||
editor.create()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,49 @@
|
||||
# 使用模块定义
|
||||
|
||||
wangEditor 除了直接使用`<script>`引用之外，还支持`AMD`和`CommonJS`的引用方式。
|
||||
|
||||
## AMD
|
||||
|
||||
以`require.js`为例演示
|
||||
|
||||
先创建`main.js`，代码为
|
||||
|
||||
```javascript
|
||||
require(['/wangEditor.min.js'], function (E) {
|
||||
var editor = new E('#editor')
|
||||
editor.create()
|
||||
})
|
||||
```
|
||||
|
||||
然后创建页面，代码为
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>wangEditor demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="editor">
|
||||
<p>欢迎使用 wangEditor 富文本编辑器</p>
|
||||
</div>
|
||||
|
||||
<script data-main="./main.js" src="//cdn.bootcss.com/require.js/2.3.3/require.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## CommonJS
|
||||
|
||||
可以使用`npm install wangeditor`安装（注意，这里`wangeditor`全是**小写字母**）
|
||||
|
||||
```javascript
|
||||
// 引用
|
||||
var E = require('wangeditor') // 使用 npm 安装
|
||||
var E = require('/wangEditor.min.js') // 使用下载的源码
|
||||
|
||||
// 创建编辑器
|
||||
var editor = new E('#editor')
|
||||
editor.create()
|
||||
```
|
||||
@ -0,0 +1,48 @@
|
||||
# 菜单和编辑区域分离
|
||||
|
||||
如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样，将编辑区域和菜单分离，也可以实现。
|
||||
|
||||
这样，菜单和编辑器区域就是使用者可自己控制的元素，可自定义样式。例如：将菜单`fixed`、编辑器区域高度自动增加等
|
||||
|
||||
## 代码示例
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>wangEditor 菜单和编辑器区域分离</title>
|
||||
<style type="text/css">
|
||||
.toolbar {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.text {
|
||||
border: 1px solid #ccc;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1" class="toolbar">
|
||||
</div>
|
||||
<div style="padding: 5px 0; color: #ccc">中间隔离带</div>
|
||||
<div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
|
||||
<p>请输入内容</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor1 = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器
|
||||
editor1.create()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 显示效果
|
||||
|
||||
从上面代码可以看出，菜单和编辑区域其实就是两个单独的`<div>`，位置、尺寸都可以随便定义。
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
# 同一个页面创建多个编辑器
|
||||
|
||||
wangEditor 支持一个页面创建多个编辑器
|
||||
|
||||
## 代码示例
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>wangEditor 一个页面多个编辑器</title>
|
||||
<style type="text/css">
|
||||
.toolbar {
|
||||
background-color: #f1f1f1;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.text {
|
||||
border: 1px solid #ccc;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1" class="toolbar">
|
||||
</div>
|
||||
<div style="padding: 5px 0; color: #ccc">中间隔离带</div>
|
||||
<div id="div2" class="text">
|
||||
<p>第一个 demo（菜单和编辑器区域分开）</p>
|
||||
</div>
|
||||
|
||||
<div id="div3">
|
||||
<p>第二个 demo（常规）</p>
|
||||
</div>
|
||||
|
||||
<!-- 引用js -->
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
|
||||
var editor1 = new E('#div1', '#div2')
|
||||
editor1.create()
|
||||
|
||||
var editor2 = new E('#div3')
|
||||
editor2.create()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
# 设置内容
|
||||
|
||||
以下方式中，如果条件允许，尽量使用第一种方式，效率最高。
|
||||
|
||||
## html 初始化内容
|
||||
|
||||
直接将内容写到要创建编辑器的`<div>`标签中
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
<p>初始化的内容</p>
|
||||
<p>初始化的内容</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.create()
|
||||
</script>
|
||||
```
|
||||
|
||||
## js 设置内容
|
||||
|
||||
创建编辑器之后，使用`editor.txt.html(...)`设置编辑器内容
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
editor.create()
|
||||
editor.txt.html('<p>用 JS 设置的内容</p>')
|
||||
</script>
|
||||
```
|
||||
|
||||
## 追加内容
|
||||
|
||||
创建编辑器之后，可使用`editor.txt.append('<p>追加的内容</p>')`继续追加内容。
|
||||
|
||||
## 清空内容
|
||||
|
||||
可使用`editor.txt.clear()`清空编辑器内容
|
||||
@ -0,0 +1,80 @@
|
||||
# 读取内容
|
||||
|
||||
可以`html`和`text`的方式读取编辑器的内容。
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
<p>欢迎使用 wangEditor 编辑器</p>
|
||||
</div>
|
||||
<button id="btn1">获取html</button>
|
||||
<button id="btn2">获取text</button>
|
||||
|
||||
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
editor.create()
|
||||
|
||||
document.getElementById('btn1').addEventListener('click', function () {
|
||||
// 读取 html
|
||||
alert(editor.txt.html())
|
||||
}, false)
|
||||
|
||||
document.getElementById('btn2').addEventListener('click', function () {
|
||||
// 读取 text
|
||||
alert(editor.txt.text())
|
||||
}, false)
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
需要注意的是：**从编辑器中获取的 html 代码是不包含任何样式的纯 html**，如果显示的时候需要对其中的`<table>` `<code>` `<blockquote>`等标签进行自定义样式（这样既可实现多皮肤功能），下面提供了编辑器中使用的样式供参考
|
||||
|
||||
```css
|
||||
/* table 样式 */
|
||||
table {
|
||||
border-top: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
table td,
|
||||
table th {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
table th {
|
||||
border-bottom: 2px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* blockquote 样式 */
|
||||
blockquote {
|
||||
display: block;
|
||||
border-left: 8px solid #d0e5f2;
|
||||
padding: 5px 10px;
|
||||
margin: 10px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 100%;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* code 样式 */
|
||||
code {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
padding: 3px 5px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
pre code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ul ol 样式 */
|
||||
ul, ol {
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
# 使用 textarea
|
||||
|
||||
wangEditor 从`v3`版本开始不支持 textarea ，但是可以通过`onchange`来实现 textarea 中提交富文本内容。
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
|
||||
</div>
|
||||
<textarea id="text1" style="width:100%; height:200px;"></textarea>
|
||||
|
||||
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../wangEditor.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
var $text1 = $('#text1')
|
||||
editor.customConfig.onchange = function (html) {
|
||||
// 监控变化，同步更新到 textarea
|
||||
$text1.val(html)
|
||||
}
|
||||
editor.create()
|
||||
// 初始化 textarea 的值
|
||||
$text1.val(editor.txt.html())
|
||||
</script>
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
# 获取 JSON 格式的内容
|
||||
|
||||
可以通过`editor.txt.getJSON`获取 JSON 格式的编辑器的内容，`v3.0.14`开始支持，示例如下
|
||||
|
||||
```html
|
||||
<div id="div1">
|
||||
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
|
||||
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/>
|
||||
</div>
|
||||
<button id="btn1">getJSON</button>
|
||||
|
||||
<script type="text/javascript" src="/wangEditor.js"></script>
|
||||
<script type="text/javascript">
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
editor.create()
|
||||
|
||||
document.getElementById('btn1').addEventListener('click', function () {
|
||||
var json = editor.txt.getJSON() // 获取 JSON 格式的内容
|
||||
var jsonStr = JSON.stringify(json)
|
||||
console.log(json)
|
||||
console.log(jsonStr)
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
-----
|
||||
|
||||
如果编辑器区域的 html 内容是如下：
|
||||
|
||||
```html
|
||||
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
|
||||
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/>
|
||||
```
|
||||
|
||||
那么获取的 JSON 格式就如下：
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"tag": "p",
|
||||
"attrs": [],
|
||||
"children": [
|
||||
"欢迎使用 ",
|
||||
{
|
||||
"tag": "b",
|
||||
"attrs": [],
|
||||
"children": [
|
||||
"wangEditor"
|
||||
]
|
||||
},
|
||||
" 富文本编辑器"
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "img",
|
||||
"attrs": [
|
||||
{
|
||||
"name": "src",
|
||||
"value": "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png"
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"value": "max-width:100%;"
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"tag": "p",
|
||||
"attrs": [],
|
||||
"children": [
|
||||
{
|
||||
"tag": "br",
|
||||
"attrs": [],
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -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' // 重复
|
||||
]
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
|
||||
@ -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
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
|
||||
|
||||
@ -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>
|
||||
```
|
||||
|
||||
**注意，以上代码中的`链接文字`要写在`链接`前面，`上传图片`要写在`上传`前面，因为前者包含后者。如果不这样做，可能会出现替换不全的问题，切记切记！**
|
||||
@ -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>
|
||||
```
|
||||
@ -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()
|
||||
```
|
||||
@ -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()
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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()
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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 逛一逛，或者自己搜索。
|
||||
@ -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);
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,10 @@
|
||||
# 全屏 & 预览 & 查看源码
|
||||
|
||||
## 全屏
|
||||
|
||||
虽然 wangEditor 没有内置全屏功能，但是你可以通过简单的代码来搞定，作者已经做了一个demo来示范。通过运行 demo（文档一开始就介绍了）即可看到该示例页面，直接查看页面源代码即可。
|
||||
|
||||
## 预览 & 查看源码
|
||||
|
||||
如果需要预览和查看源码的功能，也需要跟全屏功能一样，自己定义按钮。点击按钮时通过`editor.txt.html()`获取编辑器内容，然后自定义实现预览和查看源码功能。
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
# 关于上传附件
|
||||
|
||||
**有用户问到编辑器能否有上传附件的功能？我的建议是不要把附件做到内容中。**
|
||||
|
||||
原因很简单，如果将附件上传之后再插入到富文本内容中，其实就是一个链接的形式。如下图：
|
||||
|
||||
|
||||
|
||||
而用户在用编辑器编辑文本时，操作是非常随意多样的，他把这个链接删了，你服务器要想实时删除上传的附件文件，是难监控到的。
|
||||
|
||||
还有，用户如果要上传很多个附件，也是很难管理的，还是因为富文本的内容变化多样，用户可以随便在什么地方插入附件，而且形式和链接一样。
|
||||
|
||||
-------
|
||||
|
||||
反过来，我们想一下平时用附件和编辑器最多的产品是什么——是邮箱。邮箱如何处理附件的，大家应该很清楚。它把文本内容和附件分开，这样附件就可以很轻松、明了的进行管理，绝对不会和编辑内容的链接产生混淆。
|
||||
|
||||
|
||||
|
||||
你能看到的所有的邮箱产品，几乎都是这样设计的。
|
||||
|
||||
-------
|
||||
|
||||
因此，在你提问编辑器能否上传附件这个问题的时候，可以想一下能否参照邮箱的实现来设计？
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
# 关于 markdown
|
||||
|
||||
**好多使用者问到，wangEditor编辑器能否集成markdown？——答案是：富文本编辑器无法和markdown集成到一起。**
|
||||
|
||||
-----
|
||||
|
||||
|
||||
你可以参考 [简书](http://www.jianshu.com/) 的实现方式，简书中编辑器也无法实现富文本和`markdown`的自由切换。要么使用富文本编写文章，要么使用`markdown`编写文章，不能公用。
|
||||
|
||||
本质上，富文本编辑器和`markdown`编辑器是两回事儿。
|
||||
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
# 预防 XSS 攻击
|
||||
|
||||
> 术业有专攻
|
||||
|
||||
要想在前端预防 xss 攻击，还得依赖于其他工具，例如[xss.js](http://jsxss.com/zh/index.html)（如果打不开页面，就从百度搜一下）
|
||||
|
||||
代码示例如下
|
||||
|
||||
```html
|
||||
<script src='/xss.js'></script>
|
||||
<script src='/wangEditor.min.js'></script>
|
||||
<script>
|
||||
var E = window.wangEditor
|
||||
var editor = new E('#div1')
|
||||
|
||||
document.getElementById('btn1').addEventListener('click', function () {
|
||||
var html = editor.txt.html()
|
||||
var filterHtml = filterXSS(html) // 此处进行 xss 攻击过滤
|
||||
alert(filterHtml)
|
||||
}, false)
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
# 用于 React
|
||||
|
||||
如果需要将 wangEditor 用于 React 中，可参见如下示例
|
||||
|
||||
- 下载源码 `git clone git@github.com:wangfupeng1988/wangEditor.git`
|
||||
- 进入 React 示例目录 `cd wangEditor/example/demo/in-react/`，查看`src/App.js`即可
|
||||
- 也可以运行`npm install && npm start`查看在 React 中的效果（`http://localhost:3000/`）
|
||||
@ -0,0 +1,7 @@
|
||||
# 用于 Vue
|
||||
|
||||
如果需要将 wangEditor 用于 Vue 中，可参见如下示例
|
||||
|
||||
- 下载源码 `git clone git@github.com:wangfupeng1988/wangEditor.git`
|
||||
- 进入 vue 示例目录 `cd wangEditor/example/demo/in-vue/`，查看`src/components/Editor.vue`即可
|
||||
- 也可以运行`npm install && npm run dev`查看在 vue 中的效果（`http://localhost:8080/`）
|
||||
@ -0,0 +1,3 @@
|
||||
# 用于 Angular
|
||||
|
||||
感谢 [@fengnovo](https://github.com/fengnovo) 提供了一个 angular2 的兼容示例，可供参考 https://github.com/fengnovo/wangEditor/tree/master/example/demo/in-ng2
|
||||
@ -0,0 +1,27 @@
|
||||
# 常用 API
|
||||
|
||||
## 属性
|
||||
|
||||
- 获取编辑器的唯一标识 `editor.id`
|
||||
- 获取编辑区域 DOM 节点 `editor.$textElem[0]`
|
||||
- 获取菜单栏 DOM 节点 `editor.$toolbarElem[0]`
|
||||
- 获取编辑器配置信息 `editor.config`
|
||||
- 获取编辑区域 DOM 节点 ID `editor.textElemId`
|
||||
- 获取菜单栏 DOM 节点 ID `editor.toolbarElemId`
|
||||
- 获取菜单栏中“图片”菜单的 DOM 节点 ID `editor.imgMenuId`
|
||||
|
||||
## 方法
|
||||
|
||||
### 选取操作
|
||||
|
||||
- 获取选中的文字 `editor.selection.getSelectionText()`
|
||||
- 获取选取所在的 DOM 节点 `editor.selection.getSelectionContainerElem()[0]`
|
||||
- 开始节点 `editor.selection.getSelectionStartElem()[0]`
|
||||
- 结束节点 `editor.selection.getSelectionEndElem()[0]`
|
||||
- 折叠选取 `editor.selection.collapseRange()`
|
||||
- 更多可参见[源码中](https://github.com/wangfupeng1988/wangEditor/blob/master/src/js/selection/index.js)定义的方法
|
||||
|
||||
### 编辑内容操作
|
||||
|
||||
- 插入 HTML `editor.cmd.do('insertHTML', '<p>...</p>')`
|
||||
- 可通过`editor.cmd.do(name, value)`来执行`document.execCommand(name, false, value)`的操作
|
||||
3
templates/orange/static/wangEditor/docs/usage/README.md
Normal file
3
templates/orange/static/wangEditor/docs/usage/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
同步[../../README.md](../../README.md)的内容
|
||||
|
||||
将所有文档跟新到 www.kancloud.cn/wangfupeng/wangeditor3/332599 中
|
||||
Reference in New Issue
Block a user