首页 技术 正文
技术 2022年11月12日
0 收藏 901 点赞 3,831 浏览 1369 个字

1.首先我们要去官网下载UEditor编辑器,选择语言,这里我用的是php utf-8版本(李昌辉)

2.下载完成之后解压文件,将解压的文件放到我们的网站目录里面

3.ueditor/utf8-php目录下面有个index.html,也就是官方做的demo

UEditor编辑器的使用UEditor编辑器的使用

UEditor编辑器的使用

可以打开这个demo看一下源代码,它的功能非常多,我们要用的时候选择自己想用的功能使用就可以了。

4.下一步我们自己建一个页面来测试

5.在页面内引入以下三个JS文件,注意根据自己的文件位置修改路径:

<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script>

6.然后在页面要显示编辑器的地方写入以下代码,可以修改宽度高度,注意要取一个唯一id:

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>  

7.在页面最后嵌入JS来实例化出编辑器:

<script type="text/javascript">      //实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor'); function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为:");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
} </script>

其中getContent()函数是我们取的其中一个功能,就是获取编辑器中的内容(包含html代码)。

8.其中以下这句代码是实例化编辑器,注意id是和第6步里面的id一致

var ue = UE.getEditor(‘editor’);

9.如果要修改路径,可以在ueditor.config.js文件中修改

window.UEDITOR_HOME_URL = "/xxxx/xxxx/";  

10.编辑器默认上传的图片在ueditor\php\upload\image里面

11.要修改图片的上传存储路径可以在ueditor\utf8-php\php路径下config.json文件里面修改

 "imagePathFormat": "/zuoye/chajian/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,104
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,580
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,428
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,835
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,918