当前位置:首页 > CMS教程 > Thinkphp > 列表

ThinkPHP中使用Ueditor富文本编辑器

发布:smiling 来源: PHP粉丝网  添加日期:2021-06-16 17:07:53 浏览: 评论:0 

这篇文章主要介绍了ThinkPHP中使用Ueditor富文本编辑器,需要的朋友可以参考下

具体插件下载:

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 :

  1. <html> 
  2. <title>Ueditor文本编辑器</title> 
  3. <head> 
  4.   <title>完整demo</title> 
  5.   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
  6.     
  7.   <load href="__PUBLIC__/Ueditor/ueditor.config.js" /> 
  8.   <load href="__PUBLIC__/Ueditor/ueditor.all.min.js" /> 
  9.     
  10.   <!--使用版--> 
  11.   <!--<script type="text/javascript" charset="utf-8" src="../ueditor.all.js"></script>--> 
  12.    
  13.   <!--开发版--> 
  14.   <!--<script type="text/javascript" charset="utf-8" src="editor_api.js"> </script>--> 
  15.    
  16.   <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--> 
  17.   <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--> 
  18.   <load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js" /> 
  19.    
  20.   <style type="text/css"
  21.     .clear { 
  22.       clear: both; 
  23.     } 
  24.   </style> 
  25. </head> 
  26. <body> 
  27. <div> 
  28. <form name='MyForm' id='MyForm' method='POST' action="__URL__/message_insert" > 
  29.   <script id="editor" name="editor" type="text/plain" style="width:1024px;height:300"
  30.     从数据库中取出文章内容打印到此处!!! 
  31.   </script> 
  32. </form> 
  33. </div> 
  34.    
  35. <div id="btns"
  36.   <div> 
  37.     <button onclick="getAllHtml()">获得整个html的内容</button> 
  38.     <button onclick="getContent()">获得内容</button> 
  39.     <button onclick="setContent()">写入内容</button> 
  40.     <button onclick="setContent(true)">追加内容</button> 
  41.     <button onclick="getContentTxt()">获得纯文本</button> 
  42.     <button onclick="getPlainTxt()">获得带格式的纯文本</button> 
  43.     <button onclick="hasContent()">判断是否有内容</button> 
  44.     <button onclick="setFocus()">使编辑器获得焦点</button> 
  45.   </div> 
  46.   <div> 
  47.     <button onclick="getText()">获得当前选中的文本</button> 
  48.     <button onclick="insertHtml()">插入给定的内容</button> 
  49.     <button id="enable" onclick="setEnabled()">可以编辑</button> 
  50.     <button onclick="setDisabled()">不可编辑</button> 
  51.     <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button> 
  52.     <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button> 
  53.     <button onclick=" UE.getEditor('editor').setHeight(300)">设置编辑器的高度为300</button> 
  54.   </div> 
  55.    
  56. </div> 
  57. <div> 
  58.   <button onclick="createEditor()"/> 
  59.   创建编辑器</button> 
  60.   <button onclick="deleteEditor()"/> 
  61.   删除编辑器</button> 
  62.     
  63.   <button onclick="submitEditor()"/> 
  64.   提交</button> 
  65. </div> 
  66. </body> 
  67. <script type="text/javascript"
  68.    
  69.   //UEDITOR_HOME_URL、config、all这三个顺序不能改变(绝对路径) 
  70.   //window.UEDITOR_HOME_URL = "/ThinkPHP/Public/Ueditor/";   
  71.     
  72.   //实例化编辑器 
  73.   var ue = UE.getEditor('editor'); 
  74.    
  75.   function insertHtml() { 
  76.     var value = prompt('插入html代码'''); 
  77.     ue.execCommand('insertHtml', value) 
  78.   } 
  79.   function createEditor() { 
  80.     enableBtn(); 
  81.     UE.getEditor('editor'); 
  82.   } 
  83.   function getAllHtml() { 
  84.     alert(UE.getEditor('editor').getAllHtml()) 
  85.   } 
  86.   function getContent() { 
  87.     var arr = []; 
  88.     arr.push("使用editor.getContent()方法可以获得编辑器的内容"); 
  89.     arr.push("内容为:"); 
  90.     arr.push(UE.getEditor('editor').getContent()); 
  91.     alert(arr.join("\n")); 
  92.   } 
  93.   function getPlainTxt() { 
  94.     var arr = []; 
  95.     arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容"); 
  96.     arr.push("内容为:"); 
  97.     arr.push(UE.getEditor('editor').getPlainTxt()); 
  98.     alert(arr.join('\n')) 
  99.   } 
  100.   function setContent(isAppendTo) { 
  101.     var arr = []; 
  102.     arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容"); 
  103.     UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo); 
  104.     alert(arr.join("\n")); 
  105.   } 
  106.   function setDisabled() { 
  107.     UE.getEditor('editor').setDisabled('fullscreen'); 
  108.     disableBtn("enable"); 
  109.   } 
  110.    
  111.   function setEnabled() { 
  112.     UE.getEditor('editor').setEnabled(); 
  113.     enableBtn(); 
  114.   } 
  115.    
  116.   function getText() { 
  117.     //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容 
  118.     var range = UE.getEditor('editor').selection.getRange(); 
  119.     range.select(); 
  120.     var txt = UE.getEditor('editor').selection.getText(); 
  121.     alert(txt) 
  122.   } 
  123.    
  124.   function getContentTxt() { 
  125.     var arr = []; 
  126.     arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容"); 
  127.     arr.push("编辑器的纯文本内容为:"); 
  128.     arr.push(UE.getEditor('editor').getContentTxt()); 
  129.     alert(arr.join("\n")); 
  130.   } 
  131.   function hasContent() { 
  132.     var arr = []; 
  133.     arr.push("使用editor.hasContents()方法判断编辑器里是否有内容"); 
  134.     arr.push("判断结果为:"); 
  135.     arr.push(UE.getEditor('editor').hasContents()); 
  136.     alert(arr.join("\n")); 
  137.   } 
  138.   function setFocus() { 
  139.     UE.getEditor('editor').focus(); 
  140.   } 
  141.   function deleteEditor() { 
  142.     disableBtn(); 
  143.     UE.getEditor('editor').destroy(); 
  144.   } 
  145.     
  146.   //提交方法 
  147.   function submitEditor()  { 
  148.     //此处以非空为例 
  149.     if(ue.hasContents()){ 
  150.       ue.sync();    //同步内容 
  151.       document.MyForm.submit(); 
  152.     } 
  153.   }   
  154.     
  155.   function disableBtn(str) { 
  156.     var div = document.getElementById('btns'); 
  157.     var btns = domUtils.getElementsByTagName(div, "button"); 
  158.     for (var i = 0, btn; btn = btns[i++];) { 
  159.       if (btn.id == str) { 
  160.         domUtils.removeAttributes(btn, ["disabled"]); 
  161.       } else { 
  162.         btn.setAttribute("disabled""true"); 
  163.       } 
  164.     } 
  165.   } 
  166.   function enableBtn() { 
  167.     var div = document.getElementById('btns'); 
  168.     var btns = domUtils.getElementsByTagName(div, "button"); 
  169.     for (var i = 0, btn; btn = btns[i++];) { 
  170.       domUtils.removeAttributes(btn, ["disabled"]); 
  171.     } 
  172.   } 
  173.    
  174. </script>

Tags: ThinkPHP编辑器 Ueditor

分享到: