请选择 进入手机版 | 继续访问电脑版

我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

Thinkphp如何引入Ueditor富文本编辑器

本文我爱自学小编分享Thinkphp5.1版本引入ueditor富文本编辑器的方法。
本文小编以114好帮手的亲身的学习经验,分享tp5.1引入ueditor富文本编辑器的方法:


1、获取PHP版本的ueditor,下载地址:https://github.com/fex-team/ueditor

Thinkphp如何引入Ueditor富文本编辑器

Thinkphp如何引入Ueditor富文本编辑器


进入ueditor github库,选择Tags,选择最新的V1.4.3.3版本Download,然后下载对应PHP版本

2、将下载的ueditor文件解压后,重命名为ueditor存储到public目录下。然后在template.php中配置__UEDITOR__'=>'/ueditor'

     通过以下形式在head头部引入ueditor相关js文件
  1. <script type="text/javascript" src="__UEDITOR__/ueditor.config.js"></script>
  2.         <script type="text/javascript" src="__UEDITOR__/ueditor.all.js"></script>
复制代码


3、在需要显示文本编辑窗的html代码位置,插入如下代码

  1. <script id="editor" name="editor" type="text/plain" style="width:1024px;height:300">
  2.   </script>
复制代码


这个script中间,可以通过数据获取的方式,获取已经在库的数据

在html尾部,引入ueditor实例化js

  1. <script type="text/javascript">
  2.   
  3.   //UEDITOR_HOME_URL、config、all这三个顺序不能改变(绝对路径)
  4.   //window.UEDITOR_HOME_URL = "/ThinkPHP/Public/Ueditor/";  
  5.    
  6.   //实例化编辑器
  7.   var ue = UE.getEditor('editor');
  8.   
  9.   function insertHtml() {
  10.     var value = prompt('插入html代码', '');
  11.     ue.execCommand('insertHtml', value)
  12.   }
  13.   function createEditor() {
  14.     enableBtn();
  15.     UE.getEditor('editor');
  16.   }
  17.   function getAllHtml() {
  18.     alert(UE.getEditor('editor').getAllHtml())
  19.   }
  20.   function getContent() {
  21.     var arr = [];
  22.     arr.push("使用editor.getContent()方法可以获得编辑器的内容");
  23.     arr.push("内容为:");
  24.     arr.push(UE.getEditor('editor').getContent());
  25.     alert(arr.join("n"));
  26.   }
  27.   function getPlainTxt() {
  28.     var arr = [];
  29.     arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
  30.     arr.push("内容为:");
  31.     arr.push(UE.getEditor('editor').getPlainTxt());
  32.     alert(arr.join('n'))
  33.   }
  34.   function setContent(isAppendTo) {
  35.     var arr = [];
  36.     arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
  37.     UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
  38.     alert(arr.join("n"));
  39.   }
  40.   function setDisabled() {
  41.     UE.getEditor('editor').setDisabled('fullscreen');
  42.     disableBtn("enable");
  43.   }
  44.   
  45.   function setEnabled() {
  46.     UE.getEditor('editor').setEnabled();
  47.     enableBtn();
  48.   }
  49.   
  50.   function getText() {
  51.     //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
  52.     var range = UE.getEditor('editor').selection.getRange();
  53.     range.select();
  54.     var txt = UE.getEditor('editor').selection.getText();
  55.     alert(txt)
  56.   }
  57.   
  58.   function getContentTxt() {
  59.     var arr = [];
  60.     arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
  61.     arr.push("编辑器的纯文本内容为:");
  62.     arr.push(UE.getEditor('editor').getContentTxt());
  63.     alert(arr.join("n"));
  64.   }
  65.   function hasContent() {
  66.     var arr = [];
  67.     arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
  68.     arr.push("判断结果为:");
  69.     arr.push(UE.getEditor('editor').hasContents());
  70.     alert(arr.join("n"));
  71.   }
  72.   function setFocus() {
  73.     UE.getEditor('editor').focus();
  74.   }
  75.   function deleteEditor() {
  76.     disableBtn();
  77.     UE.getEditor('editor').destroy();
  78.   }
  79.    
  80.   //提交方法
  81.   function submitEditor()  {
  82.     //此处以非空为例
  83.     if(ue.hasContents()){
  84.       ue.sync();    //同步内容
  85.       document.MyForm.submit();
  86.     }
  87.   }  
  88.    
  89.   function disableBtn(str) {
  90.     var div = document.getElementById('btns');
  91.     var btns = domUtils.getElementsByTagName(div, "button");
  92.     for (var i = 0, btn; btn = btns[i++];) {
  93.       if (btn.id == str) {
  94.         domUtils.removeAttributes(btn, ["disabled"]);
  95.       } else {
  96.         btn.setAttribute("disabled", "true");
  97.       }
  98.     }
  99.   }
  100.   function enableBtn() {
  101.     var div = document.getElementById('btns');
  102.     var btns = domUtils.getElementsByTagName(div, "button");
  103.     for (var i = 0, btn; btn = btns[i++];) {
  104.       domUtils.removeAttributes(btn, ["disabled"]);
  105.     }
  106.   }
  107.   
  108. </script>
复制代码


完成以上操作后,页面就出现了富文本编辑器窗口

点击阅读更多内容!
如果内容对您有所帮助,不妨微信扫一扫给个打赏!

微信扫一扫打赏

回复

使用道具 举报

ueditor默认的设置,会将remote图片进行本地化,这样时间长了占用服务器空间。
取消远程图片本地化的方法:进入ueditor文件夹,打开ueditor.config.js文件,插入,catchRemoteImageEnable: false即可关闭远程图片本地化功能
发表 LCeditor 发表于 2022-11-18 11:01:55
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2022-12-6 02:24 , Processed in 0.057197 second(s), 55 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

本站部分资源来源网络,仅供学习与交流使用,如果侵犯到您的权益,请及时联系本站(569705694@qq.com)删除该资源。

X
淘宝聚划算
快速回复 返回顶部 返回列表