编辑文本框UEditor的使用

下载地址 https://ueditor.baidu.com/website/index.html

从git上下载源码方式https://blog.csdn.net/kxj19980524/article/details/84672120

我下载好的,直接从这下载就可以了https://download.csdn.net/download/kxj19980524/10826934

两种版本,UEditor上面的样式比较多

UMditor样式比较简单 

使用方式,把解压后的文件夹放到项目当中,然后引入css和js文件,切记直接把全部都导进去,有的东西是人家自己调用的,所以不导全出不来,如果导入的是UMditor的话,调用UM.getEditor('container');来初始化,如果导入的是UEditor,调用UE.getEditor('container');

其余的不变

<link href="${pageContext.request.contextPath}/static/Ueditor/themes/default/css/umeditor.min.css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/static/Ueditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/static/Ueditor/umeditor.js"> </script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/static/Ueditor/lang/zh-cn/zh-cn.js"></script>

下面这块虽然是script标签,但是它相当于是内容而不是js ,就是一个容器

<script id="container" name="content" type="text/plain">
    <p style="margin-left: 0px">一、产品介绍</p>
    <p style="margin-left: 0px">二、主要功能点</p>
    <p style="margin-left: 0px">三、可参考品</p>
    <p style="margin-left: 0px">四、人员需求</p>
</script>

<script>
    var ue= null;
    $(function () {
         ue = UM.getEditor('container'); //初始化编辑文本框         ue.ready(function() {
         //设置编辑器的内容
         ue.setContent('hello');
        //获取html内容，返回: <p>hello</p>
        var html = ue.getContent();
       //获取纯文本内容，返回: hello
        var txt = ue.getContentTxt();
      });    });</script>