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

壹柒佰

 找回密码
 立即注册
搜索
查看: 1046|回复: 3

thinkphp5.0 加入 百度UEditor富文本编辑器

[复制链接]

70

主题

76

帖子

602

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
602
发表于 2017-1-4 20:15:41 | 显示全部楼层 |阅读模式
本示范案例只针对菜鸟级程序员,大神不喜勿喷!
本文实际操作于ThinkPHP5.0框架下,现分享与大家参考,整体流程详解如下:
第一步、
下载UEditor编译器,请到官网进行下载:http://ueditor.baidu.com/website/download.html
注:本例中所用UEditor编辑器版本为:【1.4.3.3 PHP版本】
       ThinkPHP框架版本为:【ThinkPHP5.0完整版】
第二步、
把解压后的文件放到public\static\js\ueditor下,然后在后台项目程序中引用入口文件

  1. <script type="text/javascript" charset="utf-8" src="{:m_get_path('js')}/ueditor/ueditor.config.js">
  2. </script><script type="text/javascript" charset="utf-8" src="{:m_get_path('js')}/ueditor/ueditor.all.js"></script>
复制代码

下面需要实例化编辑器:
*这段代码需要放在入口文件下面

<script type="text/javascript">
    var ue = UE.getEditor('EditorId');
</script>
第三部、
在需要放置编辑器的位置放置以下代码:
<script id="EditorId" style='height: 400px; width: 800px;'   name="exams_analytica" type="text/plain"></script>
**需要注意的是,很多人在html页面,都会使用{block}标签。如果使用了{block}标签,以上所有的代码必须在同一个{block}标签内,否则会出现编辑器在页面无法显示的情况!
至此,编辑器就算配置完成了!
优化:
在使用UEditor编辑器编写内容时你会发现,当输入的内容较多时,编辑框的边框高度也会自动增加,若希望输入内容较多时以拉框滚动的效果,可以修改以下代码:
方法:找到Ueditor文件根目录下的ueditor.config.js,用编译器打开,看到282~286行代码如下:
  1.         //scaleEnabled
  2.         //是否可以拉伸长高,默认true(当开启时,自动长高失效)
  3.         //,scaleEnabled:false
  4.         //,minFrameWidth:800    //编辑器拖动时最小宽度,默认800
  5.         //,minFrameHeight:220  //编辑器拖动时最小高度,默认220
复制代码
现修改成如下:(编译器拖动的最小高度可自行设置)
  1.   //scaleEnabled
  2.         //是否可以拉伸长高,默认true(当开启时,自动长高失效)
  3.         ,scaleEnabled:true
  4.         //,minFrameWidth:800    //编辑器拖动时最小宽度,默认800
  5.         ,minFrameHeight:300  //编辑器拖动时最小高度,默认220
复制代码


回复

使用道具 举报

Archiver|手机版|小黑屋|壹柒佰  

GMT+8, 2018-5-25 23:00 , Processed in 0.185875 second(s), 22 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

在线咨询
关注公众号

扫一扫
获取最新资讯

在线技术支持

扫一扫
在线技术支持

返回顶部