ThinkPHP中使用Ueditor富文本编辑器


Posted in PHP onSeptember 02, 2015

具体插件下载:
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 :

<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>-->
 
  <!--开发版-->
  <!--<script type="text/javascript" charset="utf-8" src="editor_api.js"> </script>-->
 
  <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
  <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">
    从数据库中取出文章内容打印到此处!!!
  </script>
</form>
</div>
 
<div id="btns">
  <div>
    <button onclick="getAllHtml()">获得整个html的内容</button>
    <button onclick="getContent()">获得内容</button>
    <button onclick="setContent()">写入内容</button>
    <button onclick="setContent(true)">追加内容</button>
    <button onclick="getContentTxt()">获得纯文本</button>
    <button onclick="getPlainTxt()">获得带格式的纯文本</button>
    <button onclick="hasContent()">判断是否有内容</button>
    <button onclick="setFocus()">使编辑器获得焦点</button>
  </div>
  <div>
    <button onclick="getText()">获得当前选中的文本</button>
    <button onclick="insertHtml()">插入给定的内容</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)">设置编辑器的高度为300</button>
  </div>
 
</div>
<div>
  <button onclick="createEditor()"/>
  创建编辑器</button>
  <button onclick="deleteEditor()"/>
  删除编辑器</button>
  
  <button onclick="submitEditor()"/>
  提交</button>
</div>
</body>
<script type="text/javascript">
 
  //UEDITOR_HOME_URL、config、all这三个顺序不能改变(绝对路径)
  //window.UEDITOR_HOME_URL = "/ThinkPHP/Public/Ueditor/";  
  
  //实例化编辑器
  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()方法可以获得编辑器的内容");
    arr.push("内容为:");
    arr.push(UE.getEditor('editor').getContent());
    alert(arr.join("\n"));
  }
  function getPlainTxt() {
    var arr = [];
    arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
    arr.push("内容为:");
    arr.push(UE.getEditor('editor').getPlainTxt());
    alert(arr.join('\n'))
  }
  function setContent(isAppendTo) {
    var arr = [];
    arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    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() {
    //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
    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()方法可以获得编辑器的纯文本内容");
    arr.push("编辑器的纯文本内容为:");
    arr.push(UE.getEditor('editor').getContentTxt());
    alert(arr.join("\n"));
  }
  function hasContent() {
    var arr = [];
    arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
    arr.push("判断结果为:");
    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();    //同步内容
      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>
PHP 相关文章推荐
十天学会php之第六天
Oct 09 PHP
一个php作的文本留言本的例子(三)
Oct 09 PHP
PHP生成静态页面详解
Dec 05 PHP
获得Google PR值的PHP代码
Jan 28 PHP
php下用GD生成生成缩略图的两个选择和区别
Apr 17 PHP
深入PHP中的HashTable结构详解
Jun 13 PHP
ThinkPHP令牌验证实例
Jun 18 PHP
C/S和B/S两种架构区别与优缺点分析
Oct 23 PHP
php中动态调用函数的方法
Mar 16 PHP
微信access_token的获取开发示例
Apr 16 PHP
thinkPHP下的widget扩展用法实例分析
Dec 26 PHP
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
Apr 11 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
Aug 31 #PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
Aug 31 #PHP
PHP中error_reporting()用法详解
Aug 31 #PHP
大家在抢红包,程序员在研究红包算法
Aug 31 #PHP
微信公众平台开发之天气预报功能
Aug 31 #PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
Aug 28 #PHP
PHP7.0安装笔记整理
Aug 28 #PHP
You might like
php+js实现异步图片上传实例分享
2014/06/02 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
onpropertypchange
2006/07/01 Javascript
Javascript 不能释放内存.
2006/09/07 Javascript
如何实现JS函数的重载
2006/09/22 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
学习经验交流会主持词
2014/04/01 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2014年人大工作总结
2014/12/10 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS