html的body中:

<script id="editor" type="text/plain" ></script>

js中:

//实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{
                //initialFrameWidth :980,//设置编辑器宽度
                initialFrameHeight:500,//设置编辑器高度
                scaleEnabled:true
            });

后台取出原本文章内容放入编辑器（ajax回调函数中）：

var content = data.body;
            //判断ueditor 编辑器是否创建成功
            ue.addListener("ready", function () {
                // editor准备好之后才可以使用
                ue.setContent(content);
            });

例子：

html代码:

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.       <meta charset="UTF-8">
  5.       <title>oneUser</title>
  6.       <link href="/css/blog_style.css" rel="stylesheet" type="text/css" />
  7.       <script type="text/javascript" src="/js/jquery.min.js"></script>
  8.       <script type="text/javascript" src="/js/datepattern.js"></script>
  9.     <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
  10.     <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
  11.     <script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
  12.     <script type="text/javascript" src="/js/commons_head_foot.js"></script>
  13.     <script type="text/javascript" src="/js/modifyBlog.js"></script>
  14.  </head>
  15.  <body>
  16.      <div>
  17.         <div id="commons_head"></div>
  18.  
  19.         <div class="navigation">
  20.             <span>标题:</span>
  21.             <input id="essay_title" type="text" style="font-size:18px;font-weight:bold;"/>
  22.             <br>
  23.             <br>
  24.             评论:<span id="evaluateCount"></span>
  25.             点赞:<span id="admireCount"></span><br>
  26.             <span id="createTime"></span>
  27.         </div>
  28.         <div class="center_body" style="margin-top:5px;">
  29.             <script id="editor" type="text/plain" ></script>
  30.             <input type="button" id="modifyContent" value="提交修改" style="float:right;"/>
  31.         </div>
  32.  
  33.         <div id="commons_foot"></div>
  34.     </div>
  35.  </body>
  36. </html>

js代码:

  1. $(function(){
  2.     //实例化编辑器
  3.     //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
  4.     var ue = UE.getEditor('editor',{
  5.                 //initialFrameWidth :980,//设置编辑器宽度
  6.                 initialFrameHeight:500,//设置编辑器高度
  7.                 scaleEnabled:true
  8.             });
  9.  
  10.     var ur = window.location.search;
  11.     var essayId = ur.substring(9,ur.length);
  12.     $.ajax({
  13.         url:"/frame/myEssayDetails/"+essayId,
  14.         type:"get",
  15.         contentType:"application/json;charset=utf-8",
  16.         dataType:"json",
  17.         success:function(data){
  18.             $("#essay_title").val(data.title);
  19.             var essayId = data.id;
  20.             $("#createTime").html(new Date(data.createTime).pattern("yyyy-MM-dd hh:mm:ss"));
  21.             $("#evaluateCount").html(data.evaluateCount);
  22.             $("#admireCount").html(data.admireCount);
  23.  
  24.             var content = data.body;
  25.             //判断ueditor 编辑器是否创建成功
  26.             ue.addListener("ready", function () {
  27.                 // editor准备好之后才可以使用
  28.                 ue.setContent(content);
  29.             });
  30.         },
  31.         error:function(){
  32.             alert("error");
  33.         }
  34.     });
  35.  
  36.     $("#modifyContent").click(function(){
  37.         var allHtml = UE.getEditor('editor').getContent();
  38.         var title = $("#essay_title").val().trim();
  39.         $.ajax({
  40.             url:"/frame/essay",
  41.             type:"post",
  42.             contentType:"application/json;charset=utf-8",
  43.             data:JSON.stringify({
  44.                 "id":essayId,
  45.                 "title":title,
  46.                 "body":allHtml
  47.             }),
  48.             dataType:"json",
  49.             success:function(data){
  50.                 if (data.success==true) {
  51.                     var url = "/index.html";
  52.                     window.location.href=url;
  53.                 } else {
  54.                     alert(data.message);
  55.                 }
  56.             },
  57.             error:function(){
  58.                 alert("出错了");
  59.             }
  60.         });
  61.     });
  62. });

ueditor1_4_3_3编辑器修改文章的更多相关文章

  1. 解决外部编辑器修改Eclipse文件延迟刷新【补充】

    在之前的文章,使用gulp解决外部编辑器修改Eclipse文件延迟刷新,原理是用gulp把更改过的项目文件直接复制一份到Tomcat的webapp.root下, 现在补充另外一种方法,双击Server ...

  2. BBS后台发送邮件&修改文章

    一:Django发送邮件 在setting中配置 # EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST ...

  3. Laravel大型项目系列教程（四）显示文章列表和用户修改文章

    小编心语:不知不觉已经第四部分了,非常感谢很多人给小编提的意见,改了很多bug,希望以后能继续帮小编找找茬~小编也不希望误导大家~这一节,主要讲的 是如何显示文章列表和让用户修改文章,小编预告一下(一 ...

  4. 使用gulp解决外部编辑器修改Eclipse文件延迟更新的问题

    本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...

  5. dedeCMS修改文章更新发布时间问题

    今天在dedeCMS系统中,修改或文章时发现,只要提交以后,文章发布时间便是当前时间.但有时候修改文章以后并不想把文章发布时间也更新成修改时间.我希望的是,修改文章不对时间做更改保持文章原有发布时间, ...

  6. WordPress批量修改文章内容、URL链接、文章摘要

    通过SQL语句来批量修改wordpress博客内容,文章中所有语句都使用默认的wp_表前缀,如果您的数据表前缀不是wp_则需要在语句中作相应更改. 方法/步骤   批量修改文章内容 如果您想替换之前写 ...

  7. Django学习（八）---修改文章和添加文章

    博客页面的修改文章和添加新文章 从主页点击不同文章的超链接进入文章页面,就是传递了一个id作为参数,然后后台代码根据这个参数从数据库中取出来对应的文章,并把它传递到前端页面 修改文章和添加新文章,是要 ...

  8. dedecms批量修改文章为待审核稿件怎么操作

    dedecms批量修改文章为待审核稿件要怎么操作呢?因为我们有时会出于某些原因要把文章暂时先隐藏掉,dedecms有一个比较好的功能是将文件状态设为未审核前台就可以看不到了,那要怎么批量设置呢?到后台 ...

  9. Vi编辑器修改文件.bash_profile可解决backspace出现乱码问题,rlwrap 的安装。

    Vi编辑器修改文件.bash_profile可解决backspace出现乱码问题 使用SecureCRT或是pietty_ch连接到一台安装有Oracle DB 10g的RHEL4.2的机器,linu ...

随机推荐

  1. [Codility] CountTriangles

    A zero-indexed array A consisting of N integers is given. A triplet (P, Q, R) is triangular if it is ...

  2. verilog中的latch到底是个啥？？简直快疯了！！！！！

    在很多地方都能看到,verilog中if与case语句必须完整,即if要加上else,case后要加上default语句,以防止锁存器的发生,接下来就来说说其中原因. 一,什么是锁存器?锁存器与触发器 ...

  3. [docker]docker0网络模型探究

    docker0网络模型step by step 将docker的ns软链到linux ns $ ln -s /var/run/docker/netns /var/run/netns 查看ns,无 $ ...

  4. Maven 在eclipse中如何配置

    大部分码农们都很熟悉Eclipse,用eclipse开发项目,Maven是解决依赖库的一个非常好用的java工具,可以与Eclipse集成,方便地管理web,java项目等等:但是很多初学者都不知道怎 ...

  5. ny613 免费馅饼

    免费馅饼 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人 ...

  6. Windows和linux虚拟机之间联网实现SSH远程连接以及VMware的3种网络模式[NAT、桥接和Host-only]

    Windows和linux虚拟机之间联网实现SSH远程连接以及VMware的3种网络模式[NAT.桥接和Host-only] 作者:天齐 一.Windows和linux虚拟机之间联网实现SSH远程连接 ...

  7. css 图标 旋转中

    .person-loading .loading-icon{position: absolute;top: 14px;} i.loading-icon{width: 15px;height: 15px ...

  8. logback日志模板与详解

    <pattern>的转换符说明: (这部分引用自http://aub.iteye.com/blog/1103685)转换符 作用 c {length } lo {length } logg ...

  9. 基于jQuery在线问卷答题系统代码

    分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  10. sqlserver 的一些好用的插件

    sqlserver 的一些好用的插件 1.http://www.red-gate.com/products/