我们先了解一下编辑器的一般学习步骤:
1、如何引入
引入ueditor.config.js,ueditor.all.js
var x = new UE.ui.Editor();
x.render('某个id');
2、如何个性化配置
参考ueditor_config中的配置项,把需要配置的选项和值拿出来
写一个对象
把该对象当作参数给 new UE.ui.Editor() 即可
3、如何与自己的系统整合
开始学习
1、首先,我们要在ueditor官网上下载一个ueditor编辑器,我下载的是下面这个版本
2、创建一个html和php文件交互
01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form action="01.php" method="post">
<textarea id="goods_desc">我才是初始值</textarea>
<br >
<input type="submit" name="" value="提交">
<input type="button" name="" value="获取编辑器内容(ajax可用)" onclick="t1()">
<input type="button" name="" value="获取编辑器纯文本(ajax可用)" onclick="t2()">
</form>
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<script type="text/javascript">
var editor = new UE.ui.Editor({initialFrameWidth:750,initialContent:'欢迎来到布尔商城!',toolbars: [
['fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain']
]});
editor.render('goods_desc');
function t1() {
alert(editor.getContent());
}
function t2() {
alert(editor.getPlainTxt());
}
</script>
</body>
</html>
01.php
<?php
print_r($_POST);
?>
关键的引用在于
两个script标签的编辑器引用
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
html中三个input框的作用
第一个是提交后跳转输出
第二个是在本页面可弹出编辑器内容(带标签)
第三个是在本页面弹出编辑器纯文本
以上是关于编辑器的简单学习。