美文网首页
百度富文本编辑器Ueditor的使用

百度富文本编辑器Ueditor的使用

作者: 冰魔 | 来源:发表于2016-04-16 17:57 被阅读1832次

前言最近项目需要集成一个编辑器,于是听从了同事的推荐用的是百度的Ueditor,集成很顺利,本地也很顺利,然后部署到linux上就各种不能用。。。期间也百度了很多的帖子,但是多数帖子都是使用的旧版本,新版本的很少,就算有提问的,也没有人回复,没有办法,只能自己看源码调试了,功夫不负有心人,现在可以用了,也想分享给大家,以免有的小伙伴重蹈我的覆辙。


使用我也不说我的尝试和调试的过程了,直接上最终的配置

  1. 从百度官网下载http://ueditor.baidu.com/website/ ,看你们具体的服务器语言,我使用的是Jsp版本,最好是自己也把完整源码下载下来,这样就可以知道它的路径是怎么实现的了
    这里写图片描述
  2. 最好是将百度官方文档看一遍吧,虽然我就是被它误导的。。。。
    文档地址:http://fex.baidu.com/ueditor/
  3. 下载完成后将包解压并重命名为ueditor(个人喜好修改),并放置在Web的根目录下,如果不是根目录,需要自行调试


    这里写图片描述
  4. 将jsp/lib下的jar文件全部导入到WEB-INF/lib下
  5. jsp页面引用editor编辑器,个人建议直接将解压包里面附带的index.html拿来修改,因为它提供了完整的demo
    • 引入三个js


      这里写图片描述
    • 实例化编辑器


      这里写图片描述

      这里的window.UEDITOR_CONFIG.charset="utf-8";是显示设定字符编码的,避免获取到的Html代码乱码 UEDITOR_CONFIG.UEDITOR_HOME_URL = '/pugilist_system/ueditor/'; 这个是重点,可以配置在所有的实例化编辑器前面,我是配置在ueditor.config.js中,指明了编辑器的具体位置

  6. 修改两个配置文件
    • config.json pugilist_systemTest是我的项目名称 这里写图片描述
    • ueditor.config.js 这里写图片描述

      OK,自此搞定,希望能帮到大家。。

相关文章

  • springboot集成ueditor

    ueditor ueditor是百度开源的富文本编辑器。使用教程可以参考官网。ueditor JPS版下载地址 S...

  • 常用编辑器大全

    一、富文本编辑器 1、UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有...

  • 仿微信公众号富文本编辑器

    微信公众号富文本编辑器使用百度ueditor插件为基础加以封装 百度ueditor配置提供替换皮肤,只要添加相应的...

  • springboot thymeleaf 整合 百度富文本编辑器

    项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入。编辑器官网是...

  • 工具集合

    富文本编辑器 UEditor百度提供的开源和免费的插件

  • React项目中使用百度编辑器Ueditor

    近期在做前端项目,需要用到富文本编辑器。因为团队提出的是使用百度Ueditor,所以也就没有再去看其他的富文本编辑...

  • TinyMCE | 一款非常不错的富文本编辑器

    由于项目需要集成一个富文本编辑器,由于百度的UEditor已经多年没有更新了,其他富文本编辑器有TinyMCE、K...

  • Vue整合Markdown编辑器

    由于项目是资源管理系统,会使用到富文本编辑器,我们选择了百度UEditor和Markdown两款编辑器。这里先介绍...

  • 富文本编辑器加载问题

    使用ueditor富文本编辑器的getcontent()方法时,报错找不到这个编辑器对象 html: {{deta...

  • 一分钟入门vue+ueditor

    UEditor是百度的一个javascript富文本编辑器,功能强大,常见的富文本编辑器中总有它的一席之地,今天我...

网友评论

      本文标题:百度富文本编辑器Ueditor的使用

      本文链接:https://www.haomeiwen.com/subject/vbqolttx.html