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

网站如何集成百度UEditor编辑器相关推荐

  1. ECSHOP集成百度ueditor编辑器上传图片到服务器或又拍云(七牛云)

    1.打开admin/includes/lib_main.php文件 找到:(大约在306-323行左右) /** * 生成编辑器 * @param string input_name 输入框名称 * ...

  2. 百度编辑器如何在html引入,网页制作中如何集成百度Ueditor网页编辑器

    开发项目必不可少用到在线网页编辑器,常用的网页编辑器有: eWebEditor 网页编辑器.Fckeditor 网页编辑器.KindEditor HTML在线编辑器.百度Ueditor编辑器-- 百度 ...

  3. java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器

    spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片 依赖库版本: spring boot ...

  4. 百度UEditor编辑器,合入PHP网站

    本文转自:http://www.cnblogs.com/losen/archive/2013/05/23/3094612.html 百度UEditor编辑器!合入PHP网站! Posted on 20 ...

  5. ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...

    <百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法>要点: 本文介绍了百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法,希望 ...

  6. 织梦html编辑器功能在哪,织梦dede自带编辑器替换百度ueditor编辑器

    用过dedecms的朋友都知道dede自带的文本编辑器很不好用,且有些功能还需要我们自己手动去修改源码,才能完成我们想要的效果.现在广大用dedecms的朋友们,你们有福啦!我们可以利用百度的Uedi ...

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

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

  8. [转]百度UEditor编辑器(php)

    百度UEditor编辑器!合入PHP网站! 一.富文本内容交互 1.编辑器内容初始化(即往编辑器中设置富文本) 场景一:写新文章,编辑器中预置提示.问候等内容. 在editor_config.js文件 ...

  9. 关于dedecms织梦后台html编辑器不能复制word格式的处理方法/ kindEditor编辑器/百度(ueditor)编辑器的添加方法

    Q:word文件内容粘贴到dede后台编辑器里,格式都失效了 dede自带的文本编辑器很不好用,且有些功能还需要我们自己手动去修改源码,才能完成我们想要的效果 一.更换kindEditor编辑器操作步 ...

最新文章

  1. 蚂蚁金服天街:OceanBase 在大促 5 年来的技术演进
  2. golang 得到 结构体 struct 标签 tag 内容 结构体中的``数据
  3. 设置dialog显示,自定义时间到后dialog消失
  4. 互相封杀8年后,阿里终于挖开腾讯12亿流量金矿?
  5. php larval开发规范,数据模型 |《 Laravel 项目开发规范 5.5》| Laravel China 社区
  6. 在 .NET 6 中使用 DATEONLY 和 TIMEONLY
  7. vscode上传GitHub
  8. 基于HTTP协议的轻量级开源简单消息队列服务:HTTPSQS
  9. [leetcode] 55. 跳跃游戏
  10. python重写和装饰器_Python | 老司机教你 5 分钟读懂 Python 装饰器
  11. 《Python学习手册》——使用入门
  12. MPLS(Multi-Protocol Label Switching)——多协议标签交换
  13. 【教3妹学java】JVM调优有哪些工具?
  14. 公积金网厅显示连接服务器错误,住房公积金网厅解决方案
  15. php出生年月日怎么写,出生年月日五行查询表,五行属性查询表
  16. python名片系统代码练习并存储到数据库中
  17. eval 是做什么的?
  18. Graphics2D进行后台绘图
  19. 计算机程序无法启动,应用程序无法正常启动,教您电脑应用程序无法正常启动0xc000007b怎么解决...
  20. 轮训网页,并打开截图保存

热门文章

  1. 13点建议顺利通过JAVA面试【转载】
  2. Asp.net创建伪静态页面
  3. 2010年亚运会前广州将大力推广清洁能源公交
  4. 由LintCode问题子集出发,浅析ArrayList的拷贝问题
  5. asp.net mvc4开启SqlServer 会话共享模式
  6. 数据分析真的能驱动用户快速增长吗?
  7. Windows Server 2008设置远程桌面连接的最大数量
  8. javascript :得到上星期的这一天日期
  9. BXNA在调试显示新闻的JS?
  10. 2018 年视频监控企业竞争力分析 海康威视连续七年蝉联全球第一