在平时的网站维护使用过程中,富文本编辑器是网站必不可少的元素之一。现在市面上各种编辑器功能设计参差不齐,自己做了几个网站都是用蝉知建站系统做的,而蝉知默认内置的编辑器是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>

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

后台文章内容编辑:

代码高亮:

网站如何集成百度UEditor编辑器的更多相关文章

  1. 百度UEditor编辑器使用教程与使用方法

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享 ...

  2. 解决百度Ueditor编辑器表格不显示边框问题

    一.主要内容 CMS使用百度Ueditor编辑器中的表格功能,在编辑模式下可以正常显示边框,而文章发布之后表格不能显示边框.本博文经过查阅相关资料,最终解决了该问题. 二.使用平台 1. dedecm ...

  3. 在linux下使用百度ueditor编辑器上传图片

    百度ueditor编辑器虽然强大,但是也有不足的地方.如果对ueditor流程不是很熟悉可以说走的弯路比较多,费力不讨好.下面呢,就是要解决ueditor遇到的问题. 用ueditor上传图片遇到的问 ...

  4. 【军哥谈CI框架】之CI中集成百度UEditor

    Hello,各位亲,新的一周来临啦,很高兴这么快又跟大家伙见面!话说上一回,军哥带大家用JQuery写了一个城市级联菜单的例子 ,不知道亲们学会了多少,是否自己可以独立写出来了呢. 军哥很是期待大家学 ...

  5. 我是如何一步步编码完成万仓网ERP系统的(六)产品库设计 2.百度Ueditor编辑器

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  6. DEDECMS:安装百度UEDITOR编辑器

    第一步:下载相对应编辑器的版本 首先,去百度搜索"百度ueditor编辑器",然后点击进入官网,找到下载页面.找到我们想要的编辑器的版本,看自己网站的编码是UTF-8还是GBK,下 ...

  7. 百度ueditor编辑器注入漏洞修补查杀程序

    百度ueditor编辑器注入查杀程序,用于对百度ueditor的漏洞补丁进行查杀,使用时需要保证本地正确部署了.net 4.0服务. 百度ueditor编辑器是目前网上比较流行的一个网站编辑器,但由于 ...

  8. 百度UEditor编辑器关闭抓取远程图片功能(默认开启)

    这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白名单内的图片到编辑框时触发,坑娘啊............... 问题又来 ...

  9. PHP集成百度Ueditor 1.4.3

    下载安装 1.首先到官网下载最新版的UE1.4.3UE官方下载地址:http://ueditor.baidu.com/website/download.html#ueditor 这里我下载的是1.4. ...

随机推荐

  1. python基础教程(九)

    python异常 python用异常对象(exception object)来表示异常情况.遇到错误后,会引发异常.如果异常对象并未被处理或捕捉,程序就会用所谓的 回溯(Traceback, 一种错误 ...

  2. 即时通信系统Openfire分析之四:消息路由

    两个人的孤独 两个人的孤独,大抵是,你每发出去一句话,都要经由无数网络.由几百个计算机处理后,出在他的面前,而他就在你不远处. 连接管理之后 Openfire使用MINA网络框架,并设置Connect ...

  3. 再起航,我的学习笔记之JavaScript设计模式18(观察者模式)

    观察者模式 观察者模式(Observer): 又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 创建一个观察者对象 首先我们创建一个闭包对象,让其在页面加 ...

  4. 生命游戏 Java

    本程序由四个类组成:其中Init_data,用于初始化各个活细胞的状态judge_state,用于判断下一代的细胞状态,并进行更新.set_color,用于给GUI界面中各个细胞涂色set_frame ...

  5. 主从及转发DNS搭建

    author:JevonWei 版权声明:原创作品 主DNS 安装bind软件包 yum -y install bind systemctl start named systemctl enable ...

  6. 《物联网框架ServerSuperIO教程》- 22.动态数据接口增加缓存,提高数据输出到OPCServer和(实时)数据库的效率

     22.1   概述及要解决的问题 设备驱动有DeviceDynamic接口,可以继承并增加新的实时数据属性,每次通讯完成后更新这些属性数据.原来是通过DeviceDynamic接口实体类反射的方式获 ...

  7. 总结各种排序算法【Java实现】

    一.插入类排序 1.直接插入排序 思想:将第i个插入到前i-1个中的适当位置 时间复杂度:T(n) = O(n²). 空间复杂度:S(n) = O(1). 稳定性:稳定排序. 如果碰见一个和插入元素相 ...

  8. mqtt实现自动监听服务器消息

    本示例借助meteor的一个环境跑,和我们平时用的node自己搭的环境或java,php的环境本质一样,在此不多讨论. 首先需求是:多系统对接进行消息实时传递. 安装好mqtt:  npm insta ...

  9. 团队作业3——需求改进&系统设计

    Deadline: 2017-4-21 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的四个方面 需求&原型改进 系统设计 Alpha任务分配计划 测试计 ...

  10. 团队作业4---第一次项目冲刺(AIpha版本)第二天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 完成了主页及登录页面 2.功能 完成了后端数据处理的全部基本功能:a.数据结构设计及数据交互操作 b.博客页面数据采 ...