网站如何集成百度UEditor编辑器

在平时的网站维护使用过程中,富文本编辑器是网站必不可少的元素之一。现在市面上各种编辑器功能设计参差不齐,自己做了几个网站都是用蝉知建站系统做的,而蝉知默认内置的编辑器是KindEditor,功能简单,已经满足不了我的需求了,比如多图上传、视频发布、代码高亮等功能。

 

所以想换个编辑器,听说百度的UEditro还不错,所以就打算把UEditor集成到蝉知系统中。操作也不是很麻烦,下面分享下过程,考虑到大家通用性,设计蝉知系统的改动我就不过多讲解了,这里主要分享在网站中集成UEditor的主要流程。

 

首先去百度UEditor官网(http://ueditor.baidu.com/website/)下载适用自己网站程序的最新UEditor。解压将文件夹放到网站自定义目录下,下面我以根目录为例,具体目录自行调整。

 

找到内容编辑、创建的页面文件,引入下面代码(注意调整路径):

 

<script type="text/javascript" src="ueditor.config.js"></script> <script type="text/javascript" src="ueditor.all.js"></script>

 

内容编辑处添加下面代码:

 

<script id="container" name="content" type="text/plain"> 内容 </script> <script type="text/javascript"> var ue = UE.getEditor('container'); </script>

 

itor()参数里大家可以根据自己情况进行配置。

 

如果要使用代码高亮功能,可以在前台内容展示页面文件中引入下面代码即可:

 

<script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"> <script> SyntaxHighlighter.all(); </script>

 

整体流程非常简单,剩下的就是根据自己的具体需求,配置一些参数了,最后秀一下最终效果图。

后台文章内容编辑:

 

代码高亮:

 

视频发布:

多图上传:

转载于:https://www.cnblogs.com/chanzhi/p/7053261.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/269132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

福禄克DSX系列教你如何测试铜缆跳线和光纤跳线

无论是用于在数据中心的光纤配线区和交换机之间进行连接的光纤跳线&#xff0c;还是用于将终端设备连接到工作区插座的局域网中的铜跳线&#xff0c;跳线都是网络不可或缺的一个组成部分&#xff0c;而跳线通常也是网络中最脆弱的环节。它比其他任何部件都更容易受到损坏。 由于…

通过福禄克LinkIQ网络电缆测试仪排除 VLAN 故障

IT行业的每个人都听说过局域网&#xff08;LAN&#xff09;&#xff0c;并且很可能知道它是一个由无数设备组成的网络——计算机、服务器、路由器、监控摄像头等他们都是都连接在一个物理位置。由于虚拟局域网&#xff08;VLAN&#xff09;在技术上并不存在于物理上&#xff0c…

2021-09-22

missing right parenthesis 少反括号 后面没跟反括号。

使用福禄克CFP单模光纤测试仪像专家一样设置参数!

在使用福禄克CFP单模光纤测试仪测试光纤链路时&#xff0c;如果要测试一个光纤接头的损耗&#xff0c;不可能只测量单个光纤接头&#xff0c;必须将其与类似的已知质量接头相匹配。这里光纤接头损耗指的是配对光纤接头的损耗&#xff0c;这也是为什么要设置参考值。 举例&…

java不要使用e.printStackTrace()

不要使用e.printStackTrace() 反例&#xff1a; 正例&#xff1a; 原因 e.printStackTrace()打印出的堆栈日志跟业务代码日志是交错混合在一起的&#xff0c;通常排查异常日志不太方便。e.printStackTrace()语句产生的字符串记录的是堆栈信息&#xff0c;如果信息太长太多&am…

阿里云服务器ECS按ctrl+alt+delete无法登录

今天在使用阿里云服务器远程桌面的时候发现怎么也进入不了&#xff0c;远程桌面无法连接&#xff0c;于是想到了在阿里云服务器管理控制台可以使用连接管理终端进行远程桌面连接&#xff0c;下面详细介绍阿里云服务器操作经验。 操作步骤如下 登录阿里云 - 进入云服务器管理控制…

DSX2-5000 CH测试结果使用福禄克LinkWare Live软件的好处

近日&#xff0c;福禄克网络宣布&#xff0c;福禄克LinkWare Live软件中的上传结果数量已超过5000万。如果您是在过去一年中为5000万中做出贡献的众多之一&#xff0c;那么您一定见证体会且享受到了在布线认证工作时随时随地与任何设备上任何人一起管理的方便性及成本节约的好处…

java异常日志不要只打一半,要输出全部错误信息

//错误 try{ }catch(Exception e){log.error("你的程序有异常啦"); } 异常e都没有打印出来&#xff0c;所以压根不知道出了什么类型的异常 //错误 try{ }catch(Exception e){log.error("你的程序有异常啦" e.getMessage()); }e.getMessage()不会记录详细…

福禄克FI-3000光纤监测显微仪使用MPO检查摄像头?

福禄克网络FI-3000 光纤检测显微仪是行业内较好且可以完整的光纤检查仪器&#xff0c;它有单光纤和MPO的测摄像机&#xff1b;自动或手动检查&#xff0c;还可与福禄克网络Versiv布线认证系统、Linkware或智能手机配合使用。下面福禄克网络指定经销商—明辰智航的工程师给大家讲…

Cisco Catalyst 4500

Q. 思科正在推出哪些Cisco Catalyst 4500 E系列线路卡&#xff1f;A.思科正在推出三款全新的E系列线路卡&#xff0c;性能为每线路卡插槽2.4万兆。它们包括&#xff1a; 48端口10/100/1000 PoE &#xff08;2:1过多订购&#xff09; 48端口10/100/1000增强型PoE线路卡&#xff…

通过福禄克FI-7000光纤显微摄像机进行光纤端面清洁

无论任何光纤类型、应用或数据速率&#xff0c;光的传输都需要干净的链接路径&#xff0c;包括通过路线上的任何无源连接或接头&#xff0c;虽然我们谈论了很多关于光纤清洁度的话题&#xff0c;但不管我们在这个话题上说了多少&#xff0c;当我们面对它时&#xff0c;光纤端面…

单元测试mock当前时间

在实际项目中很多地方用到DateTime.Now&#xff0c;这个时间是时时变化的。如果要进行单元测试对比预期结果时&#xff0c;这个时间无法预测&#xff0c;可以添加如下两个时间类 namespace Common.Helper {/// <summary>/// 获取当前时间/// However, when unit testing …

利用福禄克DSX2-5000 CH解决双绞线布线中常见的故障

双绞线布线中最常见的故障原因包括安装错误、在劣质组件&#xff08;电缆、连接器、跳线等&#xff09;中发现的缺陷、已安装电缆的损坏以及测试仪设置不正确&#xff0c;但有时技术人员想知道链路故障的具体原因 那么基于性能参数测试失败的原因都有哪些呢&#xff1f; 当涉…

Windows 2003性能监视器中的计数器名称变成数字的解决方法

前些天在给Exchange安装IMF后&#xff0c;看到IMF指南里面说&#xff0c;利用Performance也就是性能监视器可以查看IMF的性能&#xff0c;于是打开Performance, 但是却看到了下面这一幕&#xff0c;所有的计数器都变成数字。 还好&#xff0c;在微软SUPPORT网站很容易找到了下面…

利用局域网性能测试仪保障企业网络环境

现代社会网络的普及&#xff0c;已经致使人民已经离不开网络&#xff0c;无论是从工作、生活、基础设施等等网络应用到各行各业。而普及了网络&#xff0c;网络的质量就是最重要的一环。试想&#xff0c;网络的快与慢小到影响一个人的心情好坏&#xff0c;大的可以影响到企业业…

电缆的验证、鉴定和认证应该选择什么测试工具

在电缆的测试安装时&#xff0c;有以下几种测试工具选择&#xff1a;验证、鉴定及认证。当您要进行电缆认证时&#xff0c;不同测试工具的部分功能会有重叠&#xff0c;但可以学习以下几个问题&#xff0c;以帮助您选择正确的测试工具。 &#xff08;1&#xff09;电缆验证测试…