首页  >  文章  >  php教程  >  ThinkPHP示例:Ueditor富文本编辑器 2013-09-10 更新

ThinkPHP示例:Ueditor富文本编辑器 2013-09-10 更新

WBOY
WBOY原创
2016-06-07 11:44:011251浏览

ThinkPHP示例: Ueditor富文本编辑器更新 - 2013-09-10
ThinkPHP示例:Ueditor富文本编辑器 2013-09-10 更新

[/b]

具体插件下载:
http://ueditor.baidu.com/website/download.html#ueditor

UEditor官方文档:
http://ueditor.baidu.com/website/document.html

之前于 "ThinkPHP-代码" 案例中发布版本:
http://www.thinkphp.cn/code/175.html

UEditor解压于:PUBLIC/Ueditor下(同级目录有:Common,Conf,Lib,Tpl等)

例:在Tpl/model/model.html :<br> <title>Ueditor文本编辑器</title> <br> <br>     <title>完整demo</title> <br>     <meta> <br>     <br>     <load></load><br>     <load></load><br>     <br>     <!--使用版--><br>     <!--<script type="text/javascript" charset="utf-8" src="../ueditor.all.js"></script>--><br> <br>     <!--开发版--><br>     <!--<script type="text/javascript" charset="utf-8" src="editor_api.js"> </script>--><br> <br>     <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--><br>     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--><br>     <load></load><br> <br>     <style><br /> .clear {<br /> clear: both;<br /> }<br /> </style> <br> <br> <br> <div> <br> <form> <br>     <script><br /> 从数据库中取出文章内容打印到此处!!!<br /> </script><br> </form> <br> </div> <br> <br> <div> <br>     <div> <br>         <button>获得整个html的内容</button><br>         <button>获得内容</button><br>         <button>写入内容</button><br>         <button>追加内容</button><br>         <button>获得纯文本</button><br>         <button>获得带格式的纯文本</button><br>         <button>判断是否有内容</button><br>         <button>使编辑器获得焦点</button><br>     </div> <br>     <div> <br>         <button>获得当前选中的文本</button><br>         <button>插入给定的内容</button><br>         <button>可以编辑</button><br>         <button>不可编辑</button><br>         <button>隐藏编辑器</button><br>         <button>显示编辑器</button><br>         <button>设置编辑器的高度为300</button><br>     </div> <br> <br> </div> <br> <div> <br>     <button></button><br>     创建编辑器<br>     <button></button><br>     删除编辑器<br>     <br>     <button></button><br>     提交<br> </div> <br> <br> <script><br /> <br /> //UEDITOR_HOME_URL、config、all这三个顺序不能改变(绝对路径)<br /> //window.UEDITOR_HOME_URL = "/ThinkPHP/Public/Ueditor/"; <br /> <br /> //实例化编辑器<br /> var ue = UE.getEditor(&#039;editor&#039;);<br /> <br /> function insertHtml() {<br /> var value = prompt(&#039;插入html代码&#039;, &#039;&#039;);<br /> ue.execCommand(&#039;insertHtml&#039;, value)<br /> }<br /> function createEditor() {<br /> enableBtn();<br /> UE.getEditor(&#039;editor&#039;);<br /> }<br /> function getAllHtml() {<br /> alert(UE.getEditor(&#039;editor&#039;).getAllHtml())<br /> }<br /> function getContent() {<br /> var arr = [];<br /> arr.push("使用editor.getContent()方法可以获得编辑器的内容");<br /> arr.push("内容为:");<br /> arr.push(UE.getEditor(&#039;editor&#039;).getContent());<br /> alert(arr.join("\n"));<br /> }<br /> function getPlainTxt() {<br /> var arr = [];<br /> arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");<br /> arr.push("内容为:");<br /> arr.push(UE.getEditor(&#039;editor&#039;).getPlainTxt());<br /> alert(arr.join(&#039;\n&#039;))<br /> }<br /> function setContent(isAppendTo) {<br /> var arr = [];<br /> arr.push("使用editor.setContent(&#039;欢迎使用ueditor&#039;)方法可以设置编辑器的内容");<br /> UE.getEditor(&#039;editor&#039;).setContent(&#039;欢迎使用ueditor&#039;, isAppendTo);<br /> alert(arr.join("\n"));<br /> }<br /> function setDisabled() {<br /> UE.getEditor(&#039;editor&#039;).setDisabled(&#039;fullscreen&#039;);<br /> disableBtn("enable");<br /> }<br /> <br /> function setEnabled() {<br /> UE.getEditor(&#039;editor&#039;).setEnabled();<br /> enableBtn();<br /> }<br /> <br /> function getText() {<br /> //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容<br /> var range = UE.getEditor(&#039;editor&#039;).selection.getRange();<br /> range.select();<br /> var txt = UE.getEditor(&#039;editor&#039;).selection.getText();<br /> alert(txt)<br /> }<br /> <br /> function getContentTxt() {<br /> var arr = [];<br /> arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");<br /> arr.push("编辑器的纯文本内容为:");<br /> arr.push(UE.getEditor(&#039;editor&#039;).getContentTxt());<br /> alert(arr.join("\n"));<br /> }<br /> function hasContent() {<br /> var arr = [];<br /> arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");<br /> arr.push("判断结果为:");<br /> arr.push(UE.getEditor(&#039;editor&#039;).hasContents());<br /> alert(arr.join("\n"));<br /> }<br /> function setFocus() {<br /> UE.getEditor(&#039;editor&#039;).focus();<br /> }<br /> function deleteEditor() {<br /> disableBtn();<br /> UE.getEditor(&#039;editor&#039;).destroy();<br /> }<br /> <br /> //提交方法<br /> function submitEditor() {<br /> //此处以非空为例<br /> if(ue.hasContents()){<br /> ue.sync(); //同步内容<br /> document.MyForm.submit();<br /> }<br /> } <br /> <br /> function disableBtn(str) {<br /> var div = document.getElementById(&#039;btns&#039;);<br /> var btns = domUtils.getElementsByTagName(div, "button");<br /> for (var i = 0, btn; btn = btns[i++];) {<br /> if (btn.id == str) {<br /> domUtils.removeAttributes(btn, ["disabled"]);<br /> } else {<br /> btn.setAttribute("disabled", "true");<br /> }<br /> }<br /> }<br /> function enableBtn() {<br /> var div = document.getElementById(&#039;btns&#039;);<br /> var btns = domUtils.getElementsByTagName(div, "button");<br /> for (var i = 0, btn; btn = btns[i++];) {<br /> domUtils.removeAttributes(btn, ["disabled"]);<br /> }<br /> }<br /> <br /> </script>

AD:真正免费,域名+虚机+企业邮箱=0元

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn