欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

ThinkPHP中使用Ueditor富文本编辑器

程序员文章站 2022-04-15 09:32:49
具体插件下载： ueditor官方文档： 之前于 "thinkphp-代码" 案例中发布版本： ueditor解压于:public/uedit...

具体插件下载：


ueditor官方文档：


之前于 "thinkphp-代码" 案例中发布版本：


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>

上一篇： C#使用正则表达式过滤html标签

下一篇： 鸿蒙系统怎么设置小组件?鸿蒙系统设置小组件教程

推荐阅读