插件使用教程:百度编辑器

编辑器附件和图片

编辑器附件和图片存储策略修改:

image.png

附件识别码:

image.png


现阶段编辑器附件无法实现同步删除,属于技术难点,后期争取能突破

移动端编辑器无法工作

当移动端单独绑定域名并设计单独的界面时,如果用到编辑器,需要把编辑器目录手动复制到移动端目录


1、复制以下文件

image.png


2、复制到新目录: /mobile/api/***


百度编辑器内容分页开启

在模块管理中的,模块字段,找到内容字段content



然后,编辑内容字段

image.png

开启分页标签

然后切换到发布内容界面就可以看到!

image.png


前端show.html内容分页标签写法是:


{loop $content_page $sn $t}
    {if $pageid==$sn}
        {$sn}
    {else}
         1 ? str_replace('[page]', $sn, $urlrule) : $url;}">{$sn}
    {/if}
{/loop}
{if $pageid<2}
 当前是第一页
{/if}
{if $content_page && $pageid == dr_count($content_page)}
 当前是最后一页
{/if}


注意:当pageid无效时,老版本写法是page,新版写法是pageid


百度编辑器无法加载

情况1、当移动端域名、或者模块自定义域名、自定义后台域名访问百度编辑器时会加载异常,是因为跨域导致编辑器不工作。

{xunruicms_img_title}


情况2、如果改过语言包,需要对编辑器语言进行翻译

需要找到上方的路径,

表示语言包名词不匹配,改成与浏览器中设置的一致就行了




编辑器下载远程图片

编辑器中下载图片必须是包含图片扩展名(gif|jpg|jpeg|png|webp)图片url,否则是进行下载处理的。

编辑器下载远程图片

1、进入字段管理中的编辑器修改界面

{xunruicms_img_title}

2、复制内容到编辑器里面,然后保存

编辑器下载远程图片


错误排查:

当图片不下载的情况下时的错误排查

1、设置开启开发者模式

https://www.xunruicms.com/doc/204.html

2、再重复一次上面的编辑器保存操作

3、进入错误日志,看记录原因

{xunruicms_img_title}

-----------

image

常见的错误代码


1、curl: (52) Empty reply from server

表示防火墙拦截了,比如BT面板是否被防火墙拦截,关闭主机防火墙再测试是否能下载

自定义百度编辑器菜单按钮

首先打开自定义字段中的百度编辑器字段属性,如下图

image.png

选择自定义,然后在工具栏中写上想要的按钮英文字符,格式如下:

'按钮字母', '按钮字母2', '按钮字母3'


完整的按钮表:

'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertframe', 'insertcode', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'drafts'


百度编辑器上传文件大小

百度编辑器上传文件大小配置文件:

api/ueditor/php/config.php

都是中文注释,是人都看得懂!!


大文件配置:https://www.xunruicms.com/doc/20.html

百度编辑器前端table表格样式

image.png


例如,show.html中的内容变量,默认写法是:

{$content}

效果是:

image.png

他就不会加加载表格的样式,当然这不是问题,因为会做网站的人都知道是怎么回事,需要你自己写css即可,也可以使用百度编辑器自带的css


那么,需要改成:



{$content}


效果如下:

image.png


以上css代码仅供参考,原理就是这样,可以适当的自己修改修改css

百度编辑器问题汇总

问题一:后端配置项没有正常加载,上传插件不能正常使用

blob.png


常用解决方案:

1、api目录没有访问权限,导致全部会员无法上传


2、会员没有上传权限,导致部分会员无法上传

image.png


3、确认会员配置是否开启了强制xxx,导致部分会员无法上传

image.png


4、尝试访问 

http://你的网站/index.php?s=api&c=file&m=ueditor

正常情况会显示下面数据

image

如果是提示信息页面那么就按照提示的来操作。


5、访问 http://你的网站/index.php?s=api&c=file&m=ueditor&action=config

正常情况会显示下面数据

image.png

如果是null或者错误提示时,那么说明服务器配配对。



问题二:文件大小超出网站限制

百度编辑器上传文件大小配置文件:

api/ueditor/php/config.php

都是中文注释,是人都看得懂!!


问题三:图片上传提示-未知错误

检测系统环境能不能支持上传文件功能


问题三:不显示编辑器

https://www.xunruicms.com/doc/732.html

百度编辑器配置文件

1、编辑器配置文件

/api/ueditor/php/config.php

 "name", /*图片alt属性和title属性填充值:title为内容标题字段值、name为图片名称*/
    "imageActionName" => "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName" => "upfile", /* 提交的图片表单名称 */
    "imageMaxSize" => 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".webp"], /* 上传图片格式显示 */
    "imageCompressEnable" => false, /* 是否压缩图片,默认是true */
    "imageCompressBorder" => 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign" => "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix" => "", /* 图片访问路径前缀 */
    "imagePathFormat" => "/ueditor/image/{yyyy}{mm}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */

    /* 上传视频配置 */
    "videoActionName" => "uploadvideo", /* 执行上传视频的action名称 */
    "videoFieldName" => "upfile", /* 提交的视频表单名称 */
    "videoPathFormat" => "/ueditor/video/{yyyy}{mm}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "videoUrlPrefix" => "", /* 视频访问路径前缀 */
    "videoMaxSize" => 102400000, /* 上传大小限制,单位B,默认100MB */
    "videoAllowFiles" => [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

    /* 上传文件配置 */
    "fileActionName" => "uploadfile", /* controller里,执行上传视频的action名称 */
    "fileFieldName" => "upfile", /* 提交的文件表单名称 */
    "filePathFormat" => "/ueditor/file/{yyyy}{mm}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "fileUrlPrefix" => "", /* 文件访问路径前缀 */
    "fileMaxSize" => 51200000, /* 上传大小限制,单位B,默认50MB */
    "fileAllowFiles" => [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ], /* 上传文件格式显示 */

    /* 列出目录下的图片 */
    "imageManagerActionName" => "listimage", /* 执行图片管理的action名称 */
    "imageManagerListSize" => 20, /* 每次列出文件数量 */
    "imageManagerUrlPrefix" => "", /* 图片访问路径前缀 */
    "imageManagerInsertAlign" => "none", /* 插入的图片浮动方式 */
    "imageManagerAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

    /* 列出目录下的文件 */
    "showFileExt" => 1, //是否显示文件扩展名,1表示显示,0不显示
    "fileManagerActionName" => "listfile", /* 执行文件管理的action名称 */
    "fileManagerUrlPrefix" => "", /* 文件访问路径前缀 */
    "fileManagerListSize" => 20, /* 每次列出文件数量 */
    "fileManagerAllowFiles" => [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ] /* 列出的文件类型 */

];

可以看其中的中文注释来修改编辑器的配置情况


2、编辑器配置文件:api/ueditor/ueditor.config.js

{xunruicms_img_title}

可以看其中的中文注释来修改编辑器的配置情况


以下参数是固定是由cms定的值,不能在本文件中修改

image

百度编辑器Ueditor增加字体的修改方法

Ueditor本身自带11种字体
编辑器字体样式有点少能否多加一些常用的譬如仿宋

使用过程中这11种字体往往不能满足我们的需求

本教程添加字体后最终效果


image

实现教程开始

1、api/ueditor/ueditor.config.js  在116行左右

image

,'fontfamily':[
 { label:'',name:'songti',val:'宋体,SimSun'},
 { label:'',name:'NSimSun',val:'新宋体,NSimSun'},
 { label:'',name:'SimSun',val:'仿宋,SimSun'},
 { label:'',name:'FangSong_GB2312',val:'仿宋_GB2312,FangSong_GB2312'},
 { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
 { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
 { label:'',name:'heiti',val:'黑体, SimHei'},
 { label:'',name:'lishu',val:'隶书, SimLi'},
 { label:'',name:'andaleMono',val:'andale mono'},
 { label:'',name:'arial',val:'arial, helvetica,sans-serif'},
 { label:'',name:'arialBlack',val:'arial black,avant garde'},
 { label:'',name:'comicSansMs',val:'comic sans ms'},
 { label:'',name:'impact',val:'impact,chicago'},
 { label:'',name:'timesNewRoman',val:'times new roman'}
]

2、api/ueditor/lang.js  在44行左右

image

'NSimSun':'新宋体',
'SimSun':'仿宋',
'FangSong_GB2312':'仿宋_GB2312',

3、全选 api/ueditor/lang.js 里面的所有代码,复制到 api/language/zh-cn/lang.js 最下面

image

4、全部保存后,清浏览器缓存,重新进入后台


最后,附上部分中文字体的英文名,方便添加字体

华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
俪黑 Pro:LiHei Pro Medium
俪宋 Pro:LiSong Pro Light
标楷体:BiauKai
苹果俪中黑:Apple LiGothic Medium
苹果俪细宋:Apple LiSung Light
新细明体:PMingLiU
细明体:MingLiU
标楷体:DFKai-SB
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软正黑体:Microsoft JhengHei
微软雅黑体:Microsoft YaHei
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei


编辑器图片title和alt属性

在编辑器中图片title和alt占位符可以设置为两种值存储:

1、取内容的标题(title)

2、取图片的名称(name)

开发者可以在配置文件中设置,xunruicms/api/ueditor/php/config.php

{xunruicms_img_title}


--------title占位符介绍-------


编辑器的图片的title和alt默认占位字符,编辑器默认属性是上图例子,发布内容后在预览界面会将文字title字段填充图片字符中,如果要改变,需要在index.php中定义变量

define('UEDITOR_IMG_TITLE', '新字符');

{xunruicms_img_title}

百度编辑器:setContent和getContent

使用setContent和getContent,首先要找的编辑器的id号


使用开发者工具,查看编辑器的id号,如下图

{xunruicms_img_title}

那么,调用方法为:

UE.getEditor('dr_content').setContent('新增内容', true);


百度编辑器插件安装方法

前往后台应用市场搜索百度编辑器并通过在线或者离线方式安装。

进入配置界面:

{xunruicms_img_title}

可以设置全站百度编辑器,也可以还原成为系统编辑器

---------------------

如果想单个字段使用百度编辑器时,可以进入其对应的自定义字段中,修改字段类型:

{xunruicms_img_title}

您所使用的地图JS API版本过低

当编辑器的动态地图出现下面提示时:

您所使用的地图JS API版本过低,已不再维护,为保证地图基本功能正常使用,请尽快升级到

您所使用的地图JS API版本过低


解决方案:

1、cms后台升级ueditor插件

2、进入插件设置里面,填写百度申请的AK

您所使用的地图JS API版本过低

3、然后进行批量替换

您所使用的地图JS API版本过低