ueditor1_4_3_3编辑器修改文章
2023-09-14 08:56:58 时间
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("出错了"); } }); }); });
相关文章
- ubuntu 更改或重设crontab的默认编辑器
- 第三天 vi编辑器使用和软件安装
- 解决百度 ueditor v1.4.3 编辑器上传图片失真的bug?
- 欢迎使用CSDN-markdown编辑器
- Unity3D研究院编辑器之不实例化Prefab获取删除更新组件(十五)
- vim编辑器技巧备忘(初级-中级)
- 【问题解决方案】之 Word 公式编辑器 使用小tips
- Markdown在线编辑器
- JavaFX FXML场景编辑器使用示例
- Eclipse里Java项目设置Java编辑器版本的位置
- Eclipse Java类编辑器里出现乱码的解决方案
- Python的IDE之PyCharm:PyCharm的使用技巧图文教程(修改Pycharm默认风格颜色、编辑器内代码注释区域的颜色、编辑器内的Python Interpreter等)之详细攻略
- Vim 程序编辑器 经常使用操作
- Source Insight(C/C++/Java编辑器)用法
- scrapy 直接在编辑器运行
- markdown编辑器语法——文字颜色、大小、字体与背景色的设置