idea开发javaweb项目引用ueditor

时间：2024-04-14 08:44:35
1.第一步

.idea开发javaweb项目引用ueditor

2.第二部

分别解压下载的压缩包：

2.1：jsp解压

idea开发javaweb项目引用ueditor

2.2源码压缩包解压：

idea开发javaweb项目引用ueditor

3.将utf8-jsp\jsp\lib jar文件考到WEB-INF/lib 文件中，我的目录如下：

idea开发javaweb项目引用ueditor

4.拷贝源码里面的包到自己的项目目录下。

idea开发javaweb项目引用ueditoridea开发javaweb项目引用ueditoridea开发javaweb项目引用ueditor

复制后，目录如下：idea开发javaweb项目引用ueditor


idea开发javaweb项目引用ueditor
5.测试（index.jsp页面）：
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/4/9 0009
  Time: 08:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
      div{
        width:100%;
      }
    </style>
  </head>
  <body>
  <div>
    <h1>完整demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script></div>
      <div id="btns">
          <div>
          <button onclick="getAllHtml()">获得整个html的内容</button>
          <button onclick="getContent()">获得内容</button>
          <button onclick="setContent()">写入内容</button>
          <button onclick="setContent(true)">追加内容</button>
          <button onclick="getContentTxt()">获得纯文本</button>
          <button onclick="getPlainTxt()">获得带格式的纯文本</button>
          <button onclick="hasContent()">判断是否有内容</button>
          <button onclick="setFocus()">使编辑器获得焦点</button>
          <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
          <button onmousedown="setblur(event)" >编辑器失去焦点</button>

          </div>
          <div>
          <button onclick="getText()">获得当前选中的文本</button>
          <button onclick="insertHtml()">插入给定的内容</button>
          <button id="enable" onclick="setEnabled()">可以编辑</button>
          <button onclick="setDisabled()">不可编辑</button>
          <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
          <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
          <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
          </div>

          <div>
          <button onclick="getLocalData()" >获取草稿箱内容</button>
          <button onclick="clearLocalData()" >清空草稿箱</button>
          </div>

          </div>
          <div>
          <button onclick="createEditor()">
          创建编辑器</button>
          <button onclick="deleteEditor()">
          删除编辑器</button>
          </div>

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


      function isFocus(e){
          alert(UE.getEditor('editor').isFocus());
          UE.dom.domUtils.preventDefault(e)
      }
      function setblur(e){
          UE.getEditor('editor').blur();
          UE.dom.domUtils.preventDefault(e)
      }
      function insertHtml() {
          var value = prompt('插入html代码', '');
          UE.getEditor('editor').execCommand('insertHtml', value)
      }
      function createEditor() {
          enableBtn();
          UE.getEditor('editor');
      }
      function getAllHtml() {
          alert(UE.getEditor('editor').getAllHtml())
      }
      function getContent() {
          var arr = [];
          arr.push("使用editor.getContent()方法可以获得编辑器的内容");
          arr.push("内容为：");
          arr.push(UE.getEditor('editor').getContent());
          alert(arr.join("\n"));
      }
      function getPlainTxt() {
          var arr = [];
          arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
          arr.push("内容为：");
          arr.push(UE.getEditor('editor').getPlainTxt());
          alert(arr.join('\n'))
      }
      function setContent(isAppendTo) {
          var arr = [];
          arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
          UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
          alert(arr.join("\n"));
      }
      function setDisabled() {
          UE.getEditor('editor').setDisabled('fullscreen');
          disableBtn("enable");
      }

      function setEnabled() {
          UE.getEditor('editor').setEnabled();
          enableBtn();
      }

      function getText() {
          //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
          var range = UE.getEditor('editor').selection.getRange();
          range.select();
          var txt = UE.getEditor('editor').selection.getText();
          alert(txt)
      }

      function getContentTxt() {
          var arr = [];
          arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
          arr.push("编辑器的纯文本内容为：");
          arr.push(UE.getEditor('editor').getContentTxt());
          alert(arr.join("\n"));
      }
      function hasContent() {
          var arr = [];
          arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
          arr.push("判断结果为：");
          arr.push(UE.getEditor('editor').hasContents());
          alert(arr.join("\n"));
      }
      function setFocus() {
          UE.getEditor('editor').focus();
      }
      function deleteEditor() {
          disableBtn();
          UE.getEditor('editor').destroy();
      }
      function disableBtn(str) {
          var div = document.getElementById('btns');
          var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
          for (var i = 0, btn; btn = btns[i++];) {
              if (btn.id == str) {
                  UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
              } else {
                  btn.setAttribute("disabled", "true");
              }
          }
      }
      function enableBtn() {
          var div = document.getElementById('btns');
          var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
          for (var i = 0, btn; btn = btns[i++];) {
              UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
          }
      }

      function getLocalData () {
          alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
      }

      function clearLocalData () {
          UE.getEditor('editor').execCommand( "clearlocaldata" );
          alert("已清空草稿箱")
      }</script>
  </body>
</html>

6.可以在web.xml中写上：
测试页面如下：
7.图片上传配置：
        7.1找到ueditor.config.js文件，添加红色框的内容
     idea开发javaweb项目引用ueditor

7.2找到config.json进行配置的修改

idea开发javaweb项目引用ueditor

7.3上传图片测试：

idea开发javaweb项目引用ueditoridea开发javaweb项目引用ueditor

7.4工具栏有乱码的话，一般是编码格式问题，改成utf-8，自己搜（urditor工具栏乱码），网上一大推解决方案.....

8.参考博客：https://www.imooc.com/article/details/id/20138

正式测试，纯web访问图片：

idea开发javaweb项目引用ueditor

idea开发javaweb项目引用ueditor

相关文章