`
BryanMelody
  • 浏览: 61838 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

在项目中使用富文本编辑器UEditor(开源文本编辑器插件)

阅读更多

第一步:下载UEditor所需要的所有文件

此处用的是JSP-UTF-8版本

下载链接:http://ueditor.baidu.com/website/download.html

第二步:将下载文件解压至项目web目录下

第三步:将文件夹下/jsp/lib目录下的五个jar包拷贝至项目中的WEB-INF/lib下,并添加至项目结构中

第四步:修改ueditor.config.js

        将var URL = window.UEDITOR_HOME_URL || getUEBasePath();

        修改为var URL = "/项目名称/utf8-jsp/";

第五步:修改图片上传路径前缀——UEditor目录下的jsp/config.json

        将imageUrlPrefix后面的""修改为"/项目名称"

        图片上传路径则是可改可不改

第六步:测试index.html看文本编辑器是否能够正常显示在网页上

第七步:将UEditor加载到网页中

        第一步:在要添加文本编辑器的页面上添加如下两行代码,将文本编辑器的配置及源码文件引入

<!-- 配置文件 -->
<script type="text/javascript" src="/CMS/utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/CMS/utf8-jsp/ueditor.all.js"></script>

        第二步:用如下代码方式将文本编辑器引入

<div align="center">
        <textarea id="newsEditor" name="content" style="width: 300px;height: 200px"> </textarea>
        <br/>
        <script type="text/javascript">
            UE.getEditor('newsEditor');
        </script>
</div>

         此方式是先创建一个文本域作为容器,后用文本编辑器将其替换掉,如需显示已有内容,则在textarea标签与反标签中添加即可

第八步:打开编辑页面,测试文本编辑器是否能够正常显示,测试在文本中添加图片是否能够正常上传至服务器对应项目对应目录下,如果可以,UEditor则已经可以正常使用。

分享到:
评论

相关推荐

    百度富文本编辑器UEditor 1.4.3版本

    百度富文本编辑器UEditor是一款由百度公司开发的开源富文本编辑器,它在1.4.3版本中提供了丰富的功能和优秀的用户体验,适用于网页内容编辑、论坛发帖、博客写作等多种场景。UEditor以其易用性、稳定性和可定制性...

    百度富文本编辑器Ueditor1.8.1完美版含文档,例子

    **百度富文本编辑器Ueditor 1.8.1详解** 在Web开发中,富文本编辑器是不可或缺的工具,它允许用户以类似Word的方式在网页上编辑内容,包括字体、颜色、样式、图片和链接等。百度Ueditor是一款开源的、功能强大的富...

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑).doc

    SpringBoot整合layui和百度富文本编辑器ueditor入门使用教程 本教程将指导您如何将layui和百度富文本编辑器ueditor整合到SpringBoot项目中。ueditor是一种轻量、可定制、注重用户体验的富文本web编辑器,由百度的...

    ofbiz集成富文本编辑器ueditor

    本主题将详细讲解如何在Ofbiz框架中集成ueditor,这是一个功能强大的富文本编辑器。 首先,Ofbiz(Open For Business Project)是一个开源的企业应用平台,它提供了全面的企业业务管理解决方案,包括供应链、销售、...

    PHP版百度富文本编辑器ueditor

    **PHP版百度富文本编辑器ueditor** 在Web开发中,富文本编辑器是不可或缺的工具,它允许用户以类似于Microsoft Word的方式创建和编辑内容,然后以HTML格式存储。其中,百度开发的ueditor是一款非常受欢迎的开源富...

    百度富文本编辑器UEditorDemo

    在"百度富文本编辑器UEditor示例"中,我们可以看到图片、视频和附件的上传功能是如何集成到编辑器中的,这为内容创作者提供了极大的便利。通过学习和实践,开发者可以熟练掌握UEditor的使用,提升其项目中的用户体验...

    百度富文本编辑器 ueditor 使用总结

    【百度富文本编辑器 ueditor 使用总结】 在Web开发中,富文本编辑器是一个不可或缺的工具,它允许用户以类似Word的方式编辑网页内容。百度的ueditor是一款功能强大的开源富文本编辑器,广泛应用于博客、论坛、CMS...

    富文本编辑器Ueditor的Jsp版本Demo

    富文本编辑器Ueditor是一款广泛应用于网页开发中的开源编辑器,尤其在Java Web环境中,它提供了JSP版本的Demo,方便开发者快速集成和调试。Ueditor由百度公司开发,具有功能强大、性能优异、易用性高等特点,适用于...

    C# .NET MVC UEditor富文本编辑器

    UEditor会根据这个返回结果更新编辑器中的图片或视频引用。 为了确保安全性,你还需要考虑以下几点: 1. 文件类型检查:限制上传的文件类型,防止恶意文件上传。 2. 文件大小限制:设定上传文件的最大大小,避免...

    精简maven整合百度富文本编辑器Ueditor

    本教程将详细介绍如何使用Maven这一流行的构建工具,整合百度的富文本编辑器——Ueditor,以便在Java Web项目中实现高效的文本编辑功能。Maven是一个强大的项目管理工具,能够帮助我们管理和构建Java项目,而Ueditor...

    百度Ueditor在线富文本编辑器

    百度Ueditor是一款由百度公司开发的开源、免费的在线富文本编辑器,主要用于Web应用中提供便捷的文本编辑功能。它以其强大的功能、良好的用户体验以及易于集成的特点,被广泛应用在各类网站和项目中。 ### 主要特点...

    百度开源在线文本编辑器(ueditor) demo

    在项目中使用UEditor,首先需要下载其源码包,例如这里的`Baidu.Ueditor.Demo`,解压后包含所需的JavaScript库、CSS样式表以及必要的图片资源。接着,在HTML文件中引入相关脚本和样式,并在合适的位置创建一个用于...

    百度富文本编辑器UEditor

    **百度富文本编辑器UEditor详解** UEditor是由百度公司推出的一款开源的Web富文本编辑器,它在互联网开发领域中被广泛应用于内容编辑、新闻发布等场景。UEditor以其强大的功能、良好的用户体验以及丰富的定制性,...

    ueditor_jsp 百度富文本编辑器

    总结,ueditor1_4_3_3-utf8-jsp是Java Web开发者实现富文本编辑功能的优质选择,其强大而灵活的功能、易用的API和良好的社区支持,使其在众多富文本编辑器中脱颖而出。在实际应用中,开发者可以根据需求进行适当的...

    vue使用富文本编辑器解决方案(附代码,亲测可用)

    本教程将详细讲解如何在Vue项目中使用TinyMCE作为富文本编辑器,并提供亲测可用的代码示例。 一、TinyMCE简介 TinyMCE是一款强大的开源富文本编辑器,支持多种功能如文本格式化、图片上传、链接插入等。它具有良好...

    原生js ---- ueditor富文本编辑器实例

    本实例聚焦于"原生JS"实现的"ueditor"富文本编辑器,这是一款功能强大且广泛应用的开源编辑器,它以其丰富的定制性和高效的性能著称。 首先,ueditor提供了两种主要的配置方式:默认的toolbar和自定义的toolbar。...

    百度富文本编辑器ueditor java引入.zip

    UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本编辑器,这是java版,包含html段及js,以及前端文件...

    vue 集成 UEditor 富文本编辑器

    本文将深入探讨如何在Vue项目中集成UEditor,一个功能丰富的JavaScript富文本编辑器。 首先,UEditor是一款由百度开发的开源富文本编辑器,支持多种功能,如图片上传、视频插入、表格编辑等。它提供了良好的API和...

    ueditor百度开源富文本编辑器

    在Web开发中,富文本编辑器扮演着重要的角色,它使得用户可以在网页上进行类似Word的文本编辑操作,如插入图片、创建链接、调整字体样式等。UEditor作为一款成熟的富文本编辑器,它的核心特点包括: 1. **轻量级**...

    开源文本编辑器UEditor

    UEditor是一款广受欢迎的开源文本编辑器,专为开发者提供高度可定制的控件和功能。这款编辑器兼容多种浏览器,包括Chrome、Firefox、Safari、IE等,展现了其强大的跨平台兼容性。UEditor的设计理念是让用户在网页上...

Global site tag (gtag.js) - Google Analytics