ThinkPHP中使用Ueditor富文本編輯器，
Jun 13, 2016 am 08:55 AM
ThinkPHP中使用Ueditor富文本編輯器，
具體插件下載：
http://ueditor.baidu.com/website/download.html#ueditor
UEditor官方文檔：
http://ueditor.baidu.com/website/document.html
之前于 "ThinkPHP-代碼" 案例中發(fā)布版本：
http://www.thinkphp.cn/code/175.html
UEditor解壓于:PUBLIC/Ueditor下(同級(jí)目錄有:Common,Conf,Lib,Tpl等)
例：在Tpl/model/model.html :
<html>
<title>Ueditor文本編輯器</title>
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<load href="__PUBLIC__/Ueditor/ueditor.config.js" />
<load href="__PUBLIC__/Ueditor/ueditor.all.min.js" />
<!--使用版-->
<!--<script type="text/javascript" charset="utf-8" src="../ueditor.all.js"></script>-->
<!--開發(fā)版-->
<!--<script type="text/javascript" charset="utf-8" src="editor_api.js"> </script>-->
<!--建議手動(dòng)加在語(yǔ)言，避免在ie下有時(shí)因?yàn)榧虞d語(yǔ)言失敗導(dǎo)致編輯器加載失敗-->
<!--這里加載的語(yǔ)言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語(yǔ)言類型，比如你在配置項(xiàng)目里配置的是英文，這里加載的中文，那最后就是中文-->
<load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js" />
<style type="text/css">
.clear {
clear: both;
}
</style>
</head>
<body>
<div>
<form name='MyForm' id='MyForm' method='POST' action="__URL__/message_insert" >
<script id="editor" name="editor" type="text/plain" style="width:1024px;height:300">
從數(shù)據(jù)庫(kù)中取出文章內(nèi)容打印到此處！??！
</script>
</form>
</div>
<div id="btns">
<div>
<button onclick="getAllHtml()">獲得整個(gè)html的內(nèi)容</button>
<button onclick="getContent()">獲得內(nèi)容</button>
<button onclick="setContent()">寫入內(nèi)容</button>
<button onclick="setContent(true)">追加內(nèi)容</button>
<button onclick="getContentTxt()">獲得純文本</button>
<button onclick="getPlainTxt()">獲得帶格式的純文本</button>
<button onclick="hasContent()">判斷是否有內(nèi)容</button>
<button onclick="setFocus()">使編輯器獲得焦點(diǎn)</button>
</div>
<div>
<button onclick="getText()">獲得當(dāng)前選中的文本</button>
<button onclick="insertHtml()">插入給定的內(nèi)容</button>
<button id="enable" onclick="setEnabled()">可以編輯</button>
<button onclick="setDisabled()">不可編輯</button>
<button onclick=" UE.getEditor('editor').setHide()">隱藏編輯器</button>
<button onclick=" UE.getEditor('editor').setShow()">顯示編輯器</button>
<button onclick=" UE.getEditor('editor').setHeight(300)">設(shè)置編輯器的高度為300</button>
</div>
</div>
<div>
<button onclick="createEditor()"/>
創(chuàng)建編輯器</button>
<button onclick="deleteEditor()"/>
刪除編輯器</button>
<button onclick="submitEditor()"/>
提交</button>
</div>
</body>
<script type="text/javascript">
//UEDITOR_HOME_URL、config、all這三個(gè)順序不能改變(絕對(duì)路徑)
//window.UEDITOR_HOME_URL = "/ThinkPHP/Public/Ueditor/";
//實(shí)例化編輯器
var ue = UE.getEditor('editor');
function insertHtml() {
var value = prompt('插入html代碼', '');
ue.execCommand('insertHtml', value)
}
function createEditor() {
enableBtn();
UE.getEditor('editor');
}
function getAllHtml() {
alert(UE.getEditor('editor').getAllHtml())
}
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以獲得編輯器的內(nèi)容");
arr.push("內(nèi)容為：");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
}
function getPlainTxt() {
var arr = [];
arr.push("使用editor.getPlainTxt()方法可以獲得編輯器的帶格式的純文本內(nèi)容");
arr.push("內(nèi)容為：");
arr.push(UE.getEditor('editor').getPlainTxt());
alert(arr.join('\n'))
}
function setContent(isAppendTo) {
var arr = [];
arr.push("使用editor.setContent('歡迎使用ueditor')方法可以設(shè)置編輯器的內(nèi)容");
UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo);
alert(arr.join("\n"));
}
function setDisabled() {
UE.getEditor('editor').setDisabled('fullscreen');
disableBtn("enable");
}
function setEnabled() {
UE.getEditor('editor').setEnabled();
enableBtn();
}
function getText() {
//當(dāng)你點(diǎn)擊按鈕時(shí)編輯區(qū)域已經(jīng)失去了焦點(diǎn)，如果直接用getText將不會(huì)得到內(nèi)容，所以要在選回來，然后取得內(nèi)容
var range = UE.getEditor('editor').selection.getRange();
range.select();
var txt = UE.getEditor('editor').selection.getText();
alert(txt)
}
function getContentTxt() {
var arr = [];
arr.push("使用editor.getContentTxt()方法可以獲得編輯器的純文本內(nèi)容");
arr.push("編輯器的純文本內(nèi)容為：");
arr.push(UE.getEditor('editor').getContentTxt());
alert(arr.join("\n"));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判斷編輯器里是否有內(nèi)容");
arr.push("判斷結(jié)果為：");
arr.push(UE.getEditor('editor').hasContents());
alert(arr.join("\n"));
}
function setFocus() {
UE.getEditor('editor').focus();
}
function deleteEditor() {
disableBtn();
UE.getEditor('editor').destroy();
}
//提交方法
function submitEditor() {
//此處以非空為例
if(ue.hasContents()){
ue.sync(); //同步內(nèi)容
document.MyForm.submit();
}
}
function disableBtn(str) {
var div = document.getElementById('btns');
var btns = domUtils.getElementsByTagName(div, "button");
for (var i = 0, btn; btn = btns[i++];) {
if (btn.id == str) {
domUtils.removeAttributes(btn, ["disabled"]);
} else {
btn.setAttribute("disabled", "true");
}
}
}
function enableBtn() {
var div = document.getElementById('btns');
var btns = domUtils.getElementsByTagName(div, "button");
for (var i = 0, btn; btn = btns[i++];) {
domUtils.removeAttributes(btn, ["disabled"]);
}
}
</script>
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
thinkphp專案怎麼運(yùn)行
Apr 09, 2024 pm 05:33 PM
執(zhí)行 ThinkPHP 專案需要：安裝 Composer；使用 Composer 建立專案；進(jìn)入專案目錄，執(zhí)行 php bin/console serve；造訪 http://localhost:8000 查看歡迎頁(yè)面。
thinkphp有幾個(gè)版本
Apr 09, 2024 pm 06:09 PM
ThinkPHP 擁有多個(gè)版本，針對(duì)不同 PHP 版本而設(shè)計(jì)。主要版本包括 3.2、5.0、5.1 和 6.0，而次要版本用於修復(fù) bug 和提供新功能。目前最新穩(wěn)定版本為 ThinkPHP 6.0.16。在選擇版本時(shí)，需考慮 PHP 版本、功能需求和社群支援。建議使用最新穩(wěn)定版本以獲得最佳性能和支援。
thinkphp怎麼運(yùn)行
Apr 09, 2024 pm 05:39 PM
ThinkPHP Framework 的本機(jī)運(yùn)作步驟：下載並解壓縮 ThinkPHP Framework 到本機(jī)目錄。建立虛擬主機(jī)（可選），指向 ThinkPHP 根目錄。配置資料庫(kù)連線參數(shù)。啟動(dòng) Web 伺服器。初始化 ThinkPHP 應(yīng)用程式。存取 ThinkPHP 應(yīng)用程式 URL 運(yùn)行。
laravel和thinkphp哪個(gè)好
Apr 09, 2024 pm 03:18 PM
Laravel 和 ThinkPHP 框架的效能比較：ThinkPHP 效能通常優(yōu)於 Laravel，專注於最佳化和快取。 Laravel 性能良好，但對(duì)於複雜應(yīng)用程序，ThinkPHP 可能更適合。
thinkphp怎麼安裝
Apr 09, 2024 pm 05:42 PM
ThinkPHP 安裝步驟：準(zhǔn)備 PHP、Composer、MySQL 環(huán)境。使用 Composer 建立專案。安裝 ThinkPHP 框架及相依性。配置資料庫(kù)連線。產(chǎn)生應(yīng)用程式碼。啟動(dòng)應(yīng)用程式並造訪 http://localhost:8000。
thinkphp效能怎麼樣
Apr 09, 2024 pm 05:24 PM
ThinkPHP 是一款高效能的 PHP 框架，具備快取機(jī)制、程式碼最佳化、平行處理和資料庫(kù)最佳化等優(yōu)勢(shì)。官方性能測(cè)試顯示，它每秒可處理超過 10,000 個(gè)請(qǐng)求，實(shí)際應(yīng)用中被廣泛用於京東商城、攜程網(wǎng)等大型網(wǎng)站和企業(yè)系統(tǒng)。
開發(fā)建議：如何利用ThinkPHP框架進(jìn)行API開發(fā)
Nov 22, 2023 pm 05:18 PM
開發(fā)建議：如何利用ThinkPHP框架進(jìn)行API開發(fā)隨著網(wǎng)際網(wǎng)路的不斷發(fā)展，API（ApplicationProgrammingInterface）的重要性也日益凸顯。 API是不同應(yīng)用程式之間進(jìn)行通訊的橋樑，它可以實(shí)現(xiàn)資料共享、功能呼叫等操作，為開發(fā)者提供了相對(duì)簡(jiǎn)單且快速的開發(fā)方式。而ThinkPHP框架作為一款優(yōu)秀的PHP開發(fā)框架，具有高效能、可擴(kuò)展且易用
開發(fā)建議：如何利用ThinkPHP框架實(shí)現(xiàn)非同步任務(wù)
Nov 22, 2023 pm 12:01 PM
《開發(fā)建議：如何利用ThinkPHP框架實(shí)現(xiàn)非同步任務(wù)》隨著網(wǎng)路技術(shù)的快速發(fā)展，Web應(yīng)用程式對(duì)於處理大量並發(fā)請(qǐng)求和複雜業(yè)務(wù)邏輯的需求也越來越高。為了提高系統(tǒng)的效能和使用者體驗(yàn)，開發(fā)人員常常會(huì)考慮利用非同步任務(wù)來執(zhí)行一些耗時(shí)操作，例如發(fā)送郵件、處理文件上傳、產(chǎn)生報(bào)表等。在PHP領(lǐng)域，ThinkPHP框架作為一個(gè)流行的開發(fā)框架，提供了一些便捷的方式來實(shí)現(xiàn)非同步任務(wù)。
