UEditor在JavaWeb中的应用

    xiaoxiao2021-03-25  153

    富文本编辑器(UEditor)

          在平时开发Java Web项目的时候,往往会使用第三方插件来帮助我们更快的实现功能。

          这里教大家使用百度开源的富文本编辑器(UEditor)来帮助我们更好的编写文本。

    官网下载地址

    http://ueditor.baidu.com/website/download.html

    这里下载最新版的就可以了


    解压出来是这样的


    打开index.html的效果

    好了 ,废话不多说,开始我们的正题。


    1、配置编辑器环境

    创建一个动态web工程


    将解压出来的编辑器文件夹整个拷贝到WebContent目录下


    此时工程会报错,因为我们没有引用所需的jar包。

    将utf8-jsp -> jsp->lib目录下中的所有jar包拷贝到WEB-INF目录下的lib文件夹中


    在WebContent下创建一个index.jsp的文件。

    将utf8-jsp中的index.html文件内容拷贝到index.jsp


    注:使用插件时必须引入以下3个文件

    <script type="text/javascript" charset="utf-8" src=" ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src=" ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src=" lang/zh-cn/zh-cn.js"></script>

    调用编辑器:

    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

    初始化编辑器:

    <script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器, //直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor'); </script>


    将引用js文件的相对路径补全


    完成之后运行index.jsp或者右键工程运行

    这样基本的配置就搭建好了。


    2、获取编辑框的内容

    我们来使用富文本编辑器随便写一些内容,然后点击获取内容


    我们发现,在javaScript中可以使用 editor.getContent()获得整个p标签的内容,那我们怎么在java web中拿到内容呢?


    回到index.jsp中

    使用form表单将整个 编辑器包涵,并且加上用于提交表单的按钮

    <body> <div> <form action=""> <h1>完整demo</h1> <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> <button type="submit">提交</button> </form> </div> <script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor'); </script> </body>

    将多余的按钮以及js脚本都删除,保留一个实例化编辑器的方法

    var ue = UE.getEditor('editor');


    运行之后 编辑一段内容然后点击提交

    http://localhost:8080/ueditor/index.jspeditorValue=>
    转载请注明原文地址: https://ju.6miu.com/read-7705.html

    最新回复(0)