idea开发javaweb项目引用ueditor

最新推荐文章于 2019-05-24 17:33:21 发布

大海无量波涛凶

最新推荐文章于 2019-05-24 17:33:21 发布

阅读量2.4k

点赞数 2

分类专栏： javaweb

本文链接：https://blog.csdn.net/qq_37164847/article/details/79867690

版权

javaweb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.第一步

2.第二部

分别解压下载的压缩包：

2.1：jsp解压

2.2源码压缩包解压：

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

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

复制后，目录如下：

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 οnclick="getAllHtml()">获得整个html的内容</button>
          <button οnclick="getContent()">获得内容</button>
          <button οnclick="setContent()">写入内容</button>
          <button οnclick="setContent(true)">追加内容</button>
          <button οnclick="getContentTxt()">获得纯文本</button>
          <button οnclick="getPlainTxt()">获得带格式的纯文本</button>
          <button οnclick="hasContent()">判断是否有内容</button>
          <button οnclick="setFocus()">使编辑器获得焦点</button>
          <button οnmοusedοwn="isFocus(event)">编辑器是否获得焦点</button>
          <button οnmοusedοwn="setblur(event)" >编辑器失去焦点</button>

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

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

          </div>
          <div>
          <button οnclick="createEditor()">
          创建编辑器</button>
          <button οnclick="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>