ThinkPHP中使用Ueditor富文本编辑器，-php手册-PHP中文网

ThinkPHP中使用Ueditor富文本编辑器，

首页

php教程

php手册

ThinkPHP中使用Ueditor富文本编辑器，

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 08:55 AM

thinkphp 富文本编辑器

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 :

<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>

登录后复制

本站声明

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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7735

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1290

PHP教程

1233

显示更多

Related knowledge

thinkphp项目怎么运行 Apr 09, 2024 pm 05:33 PM

运行 ThinkPHP 项目需要：安装 Composer；使用 Composer 创建项目；进入项目目录，执行 php bin/console serve；访问 http://localhost:8000 查看欢迎页面。

thinkphp有几个版本 Apr 09, 2024 pm 06:09 PM

ThinkPHP 拥有多个版本，针对不同 PHP 版本而设计。主要版本包括 3.2、5.0、5.1 和 6.0，而次要版本用于修复 bug 和提供新功能。当前最新稳定版本为 ThinkPHP 6.0.16。在选择版本时，需考虑 PHP 版本、功能需求和社区支持。建议使用最新稳定版本以获得最佳性能和支持。

thinkphp怎么运行 Apr 09, 2024 pm 05:39 PM

ThinkPHP Framework 的本地运行步骤：下载并解压 ThinkPHP Framework 到本地目录。创建虚拟主机（可选），指向 ThinkPHP 根目录。配置数据库连接参数。启动 Web 服务器。初始化 ThinkPHP 应用程序。访问 ThinkPHP 应用程序 URL 运行。

laravel和thinkphp哪个好 Apr 09, 2024 pm 03:18 PM

Laravel 和 ThinkPHP 框架的性能比较：ThinkPHP 性能通常优于 Laravel，专注于优化和缓存。Laravel 性能良好，但对于复杂应用程序，ThinkPHP 可能更适合。

开发建议：如何利用ThinkPHP框架实现异步任务 Nov 22, 2023 pm 12:01 PM

《开发建议：如何利用ThinkPHP框架实现异步任务》随着互联网技术的迅猛发展，Web应用程序对于处理大量并发请求和复杂业务逻辑的需求也越来越高。为了提高系统的性能和用户体验，开发人员常常会考虑利用异步任务来执行一些耗时操作，比如发送邮件、处理文件上传、生成报表等。在PHP领域，ThinkPHP框架作为一款流行的开发框架，提供了一些便捷的方式来实现异步任务。

thinkphp怎么安装 Apr 09, 2024 pm 05:42 PM

ThinkPHP 安装步骤：准备 PHP、Composer、MySQL 环境。使用 Composer 创建项目。安装 ThinkPHP 框架及依赖项。配置数据库连接。生成应用代码。启动应用并访问 http://localhost:8000。

thinkphp性能怎么样 Apr 09, 2024 pm 05:24 PM

ThinkPHP 是一款高性能的 PHP 框架，具备缓存机制、代码优化、并行处理和数据库优化等优势。官方性能测试显示，它每秒可处理超过 10,000 个请求，实际应用中被广泛用于京东商城、携程网等大型网站和企业系统。

开发建议：如何利用ThinkPHP框架进行API开发 Nov 22, 2023 pm 05:18 PM

开发建议：如何利用ThinkPHP框架进行API开发随着互联网的不断发展，API（ApplicationProgrammingInterface）的重要性也日益凸显。API是不同应用程序之间进行通信的桥梁，它可以实现数据共享、功能调用等操作，为开发者提供了相对简单和快速的开发方式。而ThinkPHP框架作为一款优秀的PHP开发框架，具有高效、可扩展和易用

See all articles

ThinkPHP中使用Ueditor富文本编辑器，

ThinkPHP中使用Ueditor富文本编辑器，

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题