wordpress ueditor 教程(wordpress vue)

WordPress作为全球最受欢迎的博客平台,拥有着庞大的用户群体。而UEditor作为一款优秀的富文本编辑器,广泛应用于各种网站和平台。本文将为大家详细介绍WordPress UEditor的安装、配置和使用方法,帮助大家轻松实现富文本编辑功能。

一、WordPress UEditor简介

UEditor是一款基于HTML5的富文本编辑器,具有功能强大、操作简单、兼容性好等特点。它支持多种浏览器,包括IE8+、Chrome、Firefox、Safari等。UEditor支持在线编辑、离线编辑、富文本格式、图片上传、视频插入等多种功能。

二、WordPress UEditor安装

1. 下载UEditor:我们需要从UEditor官网(http://ueditor.baidu.com/)下载最新版本的UEditor。下载完成后,将下载的压缩包解压到WordPress主题的`/js/`目录下。

2. 配置UEditor:在WordPress后台,进入“设置”-“常规”页面,找到“JavaScript文件位置”选项,将其设置为“自目录”。

3. 添加UEditor到文章编辑器:在WordPress后台,进入“外观”-“编辑器”页面,找到“文章编辑器”选项,将“自定义编辑器”设置为“启用”。

4. 添加UEditor插件:在WordPress后台,进入“插件”-“安装插件”页面,搜索“UEditor”,然后点击“安装”按钮,安装完成后点击“激活”按钮。

三、WordPress UEditor配置

1. 基本配置:在WordPress后台,进入“设置”-“UEditor”页面,进行以下基本配置:

* 编辑器类型:选择“全功能编辑器”或“简单编辑器”。

* 工具栏:选择需要显示的工具栏按钮。

* 图片上传:设置图片上传的参数,如上传路径、上传大小等。

2. 高级配置:在WordPress后台,进入“设置”-“UEditor”页面,进行以下高级配置:

* 自定义工具栏:自定义工具栏按钮的名称和图标。

* 自定义插件:添加自定义插件,如自定义图片上传、视频插入等。

* 自定义样式:自定义编辑器样式,如字体、颜色、背景等。

四、WordPress UEditor使用

1. 创建文章:在WordPress后台,点击“添加新文章”,进入文章编辑页面。

2. 使用UEditor编辑文章:在文章编辑页面,可以看到UEditor编辑器。点击编辑器,即可进行富文本编辑。

3. 插入图片:在UEditor编辑器中,点击“图片”按钮,选择图片上传或从本地选择图片。

4. 插入视频:在UEditor编辑器中,点击“视频”按钮,选择视频上传或从本地选择视频。

5. 保存文章:编辑完成后,点击“保存”或“发布”按钮,保存或发布文章。

五、常见问题及解决方案

1. 问题:安装UEditor插件后,文章编辑页面没有出现UEditor编辑器。

解决方案:检查插件是否安装成功,或者重新安装插件。

2. 问题:UEditor编辑器无法上传图片。

解决方案:检查图片上传路径是否正确,或者修改图片上传参数。

3. 问题:UEditor编辑器无法插入视频。

解决方案:检查视频上传路径是否正确,或者修改视频上传参数。

六、总结

WordPress UEditor是一款功能强大的富文本编辑器,可以帮助我们轻松实现富文本编辑功能。通过本文的介绍,相信大家已经掌握了WordPress UEditor的安装、配置和使用方法。希望本文对大家有所帮助!

如何用百度UEditor编辑器替换WordPress编辑器

为WordPress更换百度Ueditor编辑器

先声明,我现在在使用的wp为3.9版本。Ueditor插件为1.30。

在网上找过很多富文本插件,感觉国产的这个用起来最强大,最舒服。而且还内置baidu地图,google地图。为什么不去用呢?

这个插件的几个重要问题如使用后contact-form-7失效,图片上传后被自动压缩的看不清。我都会告诉大家解决方案。

为什么要更换Ueditor编辑器?

先上一个原来的编辑器图片,超级简单吧。根本无法满足我的需要。

下载和安装方法。

自己在百度上搜索 ueditor wordpress插件吧。这里不提供了,百度审核不通过。

下载后解压,直接放在这个目录下,然后启动。

已有问题的解决

1、Ueditor为了安全考虑,转译了一些特殊标签和符号。也会在段落的地方加<p>标签。

不过这些都不影响使用,实在影响的自己可以写CSS样式控制。再或者只能改源码了。

改源码方式,我这里就不写了,我也没有用上。

我是通过CSS方式去处理的。

但有个最大的问题,就是使用ueditor后,concact-form-7无法使用,会出现404。把这个插件禁用后,就会没有问题。所以我想和在HTML格式下加p标签和特殊符号转译有关。

所以我这里的解决方法很笨。也很简单。就是我们在使用concact-form-7时,基本都是用在单页面上的。所以我们在要用时,就把ueditor停用一下。把短码打后发布后再启用就是了。

2、图片失真,被自动压缩。我在网上看到几个网友有这样的问题,也没有解决,这里发出来给大家参考下。

这个问题是概览事件,上传几次图片后,就会不再被压缩得很小。不过我还是找了下配置文件。改后确实不再有这个问题了。

上图.这个是配置文件位置,打开编辑

把compressSide:1前的//去掉,

设置为1

然后自己更改合适的压缩比例。maxImageSideLength

我这里是 700px

意思就是上传图片最大宽度700px,以宽度为准,如果宽度大于700,就缩放到700px.高度自适应。

而我们原来的设计只有一个maxImageSideLength:900;而compressSide默认值为0.

也就是说,如果图片以最长边为准。

例子:长9000PX,宽900px图片上传。会把高9000等比缩放为900,而宽自然被缩放为90.所以就出现图片失真问题!

注意事项

请下载上面给出的地址下载。

maxImageSideLength和compressSide要设置,用默认基本是要出问题的。

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享