6kzz整合ueditor
用过6kzz免费版的朋友都知道,它的后台编辑器是kindeditor,并且是两三年前的版本,有很多功能都没有,现在的kindeditor也不错,但感觉还是没有百度的ueditor强大(据说微信后台的编辑器也是它,依托竞争对手的产品,微信还需要不断提升实力),于是就把编辑器换位ueditor吧
下载下来ueditor后
就要进行配置了
本文就6kzz后台做实例,一般的比这个还要简单
1.仿照kindeditor,将ueditor拷贝到
目录的inc/下
2.找到调用编辑气的页面,在6k中是到admin/admin.php里
在引入编辑器文件的位置引入ueditor的文件和对其初始化
同时将引入原来编辑器的js文件删除或者注释掉
<!-- <script type="text/javascript" src="../inc/kindeditor/kindeditor.js"></script> --> <script type="text/javascript" src="../inc/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="../inc/ueditor/ueditor.all.js"></script>
然后初始化
<script type="text/javascript"> //var editor = new UE.ui.Editor(); //editor.render("myEditor"); //1.2.4以后可以使用一下代码实例化编辑器 UE.getEditor('myEditor') </script>
如果是文件编辑或者修改
那么在admin.php里会根据判断引入文章编辑article.php文件(6k自己的事,与配置编辑器无关)
在article.php里在文章内容处加载编辑器界面
<textarea name="content" id="myEditor" style="width: 800px; height: 400px;">{$row['content']}</textarea>
千万注意 此处id的值要与上文中编辑器初始化里
UE.getEditor('myEditor')
的值一致,否者不起作用
自此以成功引入编辑器
但用编辑器编辑的内容在读取时是不是自己想要的展示效果呢,显然不是
在ueditor下
有
在展示(文件读取页面)还需进行配置
在模板文件夹下模板文件比如
View.htm里加入
<script src="./inc/ueditor/ueditor.parse.js" type="text/javascript"></script> <script> uParse('.viewcontent',{ 'highlightJsUrl':'./inc/ueditor/third-party/SyntaxHighlighter/shCore.js', 'highlightCssUrl':'./inc/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css' }) </script>
注意文件路径
是view.php引入view.htm进行展示的,要以view.php的路劲为基准引入js文件
还得注意
<div class="viewcontent">{$row['content']}</div>
要展示的内容,的class名要与uParse()里的参数一致,否者也不会解析。
到此,基本的配置基本结束
下一步要配置的就是图片上传路径与在线图片管理了。
上传图片路劲配置
在ue下的php文件夹下的imageUp.php里
//上传配置
$config = array( "savePath" => ($path == "1" ? "../../../uploadfile/attachment" : "upload1/"), "maxSize" => 1000, //单位KB "allowFiles" => array(".gif", ".png", ".jpg", ".jpeg", ".bmp") );
在savePath里,如果上传到upload(后台上传进行)
把路劲改为
"../../../uploadfile/attachment"
上传图片时,图片就会存储到
Uploadfile/attachment/年月日/
在线图片的管理
有时(在我们没有配置该项时)我们明明上传了图片,但点击在线管理时却是空的
是应为我们少了这项配置
在ue下的php文件夹下的
imageManager.php里
$paths = array('upload/','../../../uploadfile/attachment/');
改成上面的上传路径就Ok了
文件附件等的上传与图片上传的配置类似
其实在ueditor.config.js
说的很明白,可以参考进行相关配置
本文仅作抛砖引玉,与大家分享!
6kzz整合ueditor的更多相关文章
- thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印
今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...
- Dedecmsv5.7整合ueditor 图片上传添加水印
最近的项目是做dedecmsv5.7的二次开发,被要求上传的图片要加水印,百度ueditor编辑器不支持自动加水印,所以,找了很多资料整合记录一下,具体效果图 这里不仔细写dedecmsv5.7 整合 ...
- 很详细的SpringBoot整合UEditor教程
很详细的SpringBoot整合UEditor教程 2017年04月10日 20:27:21 小宝2333 阅读数:21529 版权声明:本文为博主原创文章,未经博主允许不得转载. https: ...
- CI框架整合UEditor编辑器上传功能
最近项目中要使用到富文本编辑器,选用了功能强大的UEditor,接下来就来讲讲UEditor编辑器的上传功能整合. 本文UEditor版本:ueditor1_4_3_utf8_php版本 第一步:部署 ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
- activiti自定义流程之整合(二):使用angular js整合ueditor创建表单
注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义 ...
- springMVC -- 整合UEditor(富文本编辑器)
工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...
- 七牛整合 ueditor (拦住那头牛,七牛又如何)
最近遇到个项目,要求所有图片都必须整合到七牛上,看了把你谈文档踩在前辈们的基础上终于把他完成了,恰巧本屌丝最近刚好有时间,本着天下屌丝是一家的原则,和小朋友们一同学习 闲话少说入正题. 第一 :下载编 ...
- JAVA SpringBoot2 整合 JSP视图模板 整合 Ueditor富文本编辑器
一般涉及到后台管理系统,就少不了富文本编辑器,这个可以图,文,视频混排的高级工具,笔者通过对比,发现目前市场上最好的三方库还当属百度的 ueditor 近年来 SpringBoot 框架可谓越来越火, ...
随机推荐
- 修改Tomcat默认端口号,避免与IDEA冲突
修改Tomcat默认端口号,避免与IDEA冲突 APT安装默认位置如下 /var/lib/tomcat8/conf 修改server.xml中的8080端口为8088或其他. 重启服务,试试看效果. ...
- python----标准库概要
操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...
- Openstack Mitaka 负载均衡 LoadBalancerv2
最近研究了一下Openstack负载均衡,yum源和源码级别的安装都尝试成功了.网上有很多文章都是LoadBalancerv1,这个已经被放弃了.所以写一下自己是如何使用LoadBalancerv ...
- iframe框架
在一个页面里做一个区域引入另一个页面的方法: <a href="http://www.baidu.com" target="in">百度</a ...
- Unity3D事件顺序与功能
Unity3D中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Start,Update等函数,以下做个总结. Awake 当 ...
- MySQL index merge
深入理解 index merge 是使用索引进行优化的重要基础之一. [ index merge] 当where谓词中存在多个条件(或者join)涉及到多个字段,它们之间进行 AND 或者 ...
- Selenium-xapth定位
xpath 的定位方法, 非常强大. 使用这种方法几乎可以定位到页面上的任意元素. 什么是xpath xpath 是XML Path的简称, 由于HTML文档本身就是一个标准的XML页面,所以我们可 ...
- Struts07---访问servlet的API
01.创建登录界面 <%@ page language="java" import="java.util.*" pageEncoding="UT ...
- LeetCode OJ:Reverse Linked List (反转链表)
Reverse a singly linked list. 做II之前应该先来做1的,这个倒是很简单,基本上不用考虑什么,简单的链表反转而已: /** * Definition for singly- ...
- C#模拟网络POST请求
using System; using System.IO; using System.Net; using System.Text; using System.Collections.Generic ...