81 lines
1.7 KiB
Markdown
Executable File
81 lines
1.7 KiB
Markdown
Executable File
# 读取内容
|
|
|
|
可以`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;
|
|
}
|
|
```
|
|
|