ueditor1_4_3_3编辑器修改文章

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代码:

<!doctype html>
<html>
 <head>
      <meta charset="UTF-8">
      <title>oneUser</title>
      <link href="/css/blog_style.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="/js/jquery.min.js"></script>
      <script type="text/javascript" src="/js/datepattern.js"></script>
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="/js/commons_head_foot.js"></script>
    <script type="text/javascript" src="/js/modifyBlog.js"></script>
 </head>
 <body>
     <div>
        <div id="commons_head"></div>

        <div class="navigation">
            <span>标题:</span>
            <input id="essay_title" type="text" style="font-size:18px;font-weight:bold;"/>
            <br>
            <br>
            评论:<span id="evaluateCount"></span>
            点赞:<span id="admireCount"></span><br>
            <span id="createTime"></span>
        </div>
        <div class="center_body" style="margin-top:5px;">
            <script id="editor" type="text/plain" ></script>
            <input type="button" id="modifyContent" value="提交修改" style="float:right;"/>
        </div>

        <div id="commons_foot"></div>
    </div>
 </body>
</html>

js代码:

$(function(){
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{
                //initialFrameWidth :980,//设置编辑器宽度
                initialFrameHeight:500,//设置编辑器高度
                scaleEnabled:true
            });
    
    var ur = window.location.search;
    var essayId = ur.substring(9,ur.length);
    $.ajax({
        url:"/frame/myEssayDetails/"+essayId,
        type:"get",
        contentType:"application/json;charset=utf-8",
        dataType:"json",
        success:function(data){
            $("#essay_title").val(data.title);
            var essayId = data.id;
            $("#createTime").html(new Date(data.createTime).pattern("yyyy-MM-dd hh:mm:ss"));
            $("#evaluateCount").html(data.evaluateCount);
            $("#admireCount").html(data.admireCount);
            
            var content = data.body;
            //判断ueditor 编辑器是否创建成功
            ue.addListener("ready", function () {
                // editor准备好之后才可以使用
                ue.setContent(content);
            });
        },
        error:function(){
            alert("error");
        }
    });
    
    $("#modifyContent").click(function(){
        var allHtml = UE.getEditor('editor').getContent();
        var title = $("#essay_title").val().trim();
        $.ajax({
            url:"/frame/essay",
            type:"post",
            contentType:"application/json;charset=utf-8",
            data:JSON.stringify({
                "id":essayId,
                "title":title,
                "body":allHtml
            }),
            dataType:"json",
            success:function(data){
                if (data.success==true) {
                    var url = "/index.html";
                    window.location.href=url;
                } else {
                    alert(data.message);
                }
            },
            error:function(){
                alert("出错了");
            }
        });
    });
});

 

posted @ 2016-07-24 17:15  007少侠  阅读(1000)  评论(0编辑  收藏  举报
友情链接:便宜vps(CN2GIA线路)
站长统计: