百度官網上下載 umeditor 簡版的富文本編輯器(這裏)
<!DOCTYPE HTML>
<html>
<head>
<title>UMEDITOR 完整demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="<?= BASEURL ?>umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="<?= BASEURL ?>umeditor/third-party/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="<?= BASEURL ?>umeditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!--style給定寬度可以影響編輯器的最終寬度-->
<script type="text/plain" id="myEditor">
<p>這裏可以寫一些輸入提示</p>
</script>
<button class="btn" οnclick="getContent()">獲得內容</button>
<button class="btn" οnclick="setContent('1234')">寫入內容</button>
<button class="btn" οnclick="hasContent()">是否有內容</button>
<script type="text/javascript">
//實例化編輯器
// window.UMEDITOR_HOME_URL = "";
var um = UM.getEditor('myEditor',
{
initialContent:'歡迎使用UMEDITOR!',
initialFrameWidth:600,
initialFrameHeight:240,
imageUrl:"<?= BASEURL.'path/to/uploadimage' ?>", //處理圖片上傳的接口
imagePath:"", //路徑前綴
imageFieldName:"upfile" //上傳圖片的表單的name
});
function getContent() {
var arr = [];
arr.push(UM.getEditor('myEditor').getContent());
alert(arr.join("\n"));
}
function setContent(isAppendTo) {
var arr = [];
arr.push("使用editor.setContent('歡迎使用umeditor')方法可以設置編輯器的內容");
UM.getEditor('myEditor').setContent('歡迎使用umeditor', isAppendTo);
alert(arr.join("\n"));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判斷編輯器裏是否有內容");
arr.push("判斷結果爲:");
arr.push(UM.getEditor('myEditor').hasContents());
alert(arr.join("\n"));
}
</script>
</body>
</html>
//富文本編輯器上傳功能
public function umeditor_upimage()
{
$callback = $this->G('callback');
$info = $this->getLib('QiNiu')->upImage('upfile', 'umeditor');
$r = array(
"originalName" => $info['file_name'],
"name" => $info['qiniu_name'],
"url" => $info['qiniu_url'],//不能少
"size" => $info['size'],
"type" => $info['extension'],
"state" => 'SUCCESS' //不能少
);
if($callback) {
echo '<script>'.$callback.'('.json_encode($r).')</script>';
} else {
echo json_encode($r);
}
}