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,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": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
Reference in New Issue
Block a user