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 相关文章推荐
增加反向链接的101个方法 站长推荐
Jan 31 PHP
PHP 循环列出目录内容的函数代码
May 26 PHP
Php图像处理类代码分享
Jan 19 PHP
php引用计数器进行垃圾收集机制介绍
Sep 19 PHP
在PHP中使用redis
Nov 04 PHP
浅析PHP程序设计中的MVC编程思想
Jul 28 PHP
PHP中使用循环实现的金字塔图形
Nov 08 PHP
php邮件发送的两种方式
Apr 28 PHP
thinkPHP的表达式查询用法详解
Sep 14 PHP
Laravel框架搜索分页功能示例
Feb 01 PHP
PHP钩子实现方法解析
May 21 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
Mar 18 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
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
深入理解Python中变量赋值的问题
2017/01/12 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Java程序员面试90题
2013/10/19 面试题
硕士研究生自我鉴定范文
2013/12/27 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
股东合作协议书
2014/04/14 职场文书
大三学习计划书范文
2014/05/02 职场文书
广播节目策划方案
2014/05/23 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
MySQL表的增删改查基础教程
2021/04/07 MySQL