网站如何集成百度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>

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

后台文章内容编辑:

代码高亮:

 视频发布:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,818评论 25 709
  • 1.背景介绍 在做Web应用时,经常会进行富文本编辑,常用的富文本编辑器有很多,比如CuteEditor、CKEd...
    维克拉玛蒂亚阅读 2,272评论 0 0
  • 我们妖王说,“互联网+学习=……”(他说的等于啥?我忘了) 关于提升英语能力,还是有很多APP可以推荐的,接下来大...
    ___永不开封的汽水阅读 394评论 0 0
  • 嗨!朋友们,五一小长假结束了,应该都过的很开心吧! 我也很开心!哈哈!忙着放假,都没顾上学习和写感恩日记,就算是奖...
    宽两秒心自在阅读 270评论 0 0
  • 上週六(9/13)有幸受邀去觀賞了一場非常精彩的印度傳統舞蹈( Bharathanatyam)演出。 舞者們豐富的...
    陽冰阅读 426评论 0 1