Ueditor如何保存编辑好的内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ueditor如何保存编辑好的内容相关的知识,希望对你有一定的参考价值。

在线编辑器Ueditor怎么保存,编辑好了内容,不知道如何保存,没有保存按钮,只有个预览的,无法保存,下次打开还是什么都没有

参考技术A 我用的是Eclipse JSP,不晓得你用是什么工具。

新建一个JSP文件 index.jsp
head头部引用Ueditor的JS文件
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
body下面加入以下代码:
<textarea id="container" name="container"
style="width: 800px; height: 400px; margin: 0 auto;">
</textarea>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor("container");
</script>
<input type="text" id="word_type" style="display:none;" value="" name="word_type"/> </br>
<button id="tijiao" name="tijiao"
sytle="margin-left:250px; width:60px; position:relative">提交</button>

后台获取UEditor的代码:
String word_content = request.getParameter("container"); 获取页面上的name="container "就行了
参考技术B 什么意思,保存需要你获取里面的内容然后保存的,楼主的保存意思是指什么?本回答被提问者采纳

PHP如何搭建百度Ueditor富文本编辑器

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下

下载UEditor

官网:下载地址

将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor

技术分享图片

第一步 引入javascript

在html中如入下面的js语句引入相关文件

1
2
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script>

第二步 添加textare文本域并设置id值

1
<textarea type="text" name="content" id="EditorId" placeholder="请输入内容"></textarea>

第三步 初始化UEditor编辑器

在html代码中添加下面的代码初始化UEditor编译器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" charset="utf-8">//初始化编辑器
   window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置
   window.onload=function(){
    window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的高度
    window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度
    var editor = new UE.ui.Editor({
      imageUrl : ‘‘,
      fileUrl : ‘‘,
      imagePath : ‘‘,
      filePath : ‘‘,
      imageManagerUrl:‘‘, //图片在线管理的处理地址
      imageManagerPath:‘__ROOT__/‘
    });
    editor.render("EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea>
  }
</script>

第四步 设置图片上传路径

UEditor编辑器的默认图片上传路径是根目录下/ueditor/php/upload/image/目录,没有这个目录会自动创建,如果要自定义图片上传路径,可以在ueditor/php/config.json文件中12行处修改。

最后贴上完整的html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
</head>
<body>
  
 <form action="__URL__/receiver" method="post" accept-charset="utf-8">
  <textarea type="text" name="content" id="EditorId" placeholder="请输入内容"></textarea>
  <input type="submit" value="提交">
 </form>
    
  <script type="text/javascript" charset="utf-8">//初始化编辑器
  window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置
  window.onload=function(){
    window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的高度
    window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度
    var editor = new UE.ui.Editor({
      imageUrl : ‘‘,
      fileUrl : ‘‘,
      imagePath : ‘‘,
      filePath : ‘‘,
      imageManagerUrl:‘‘, //图片在线管理的处理地址
      imageManagerPath:‘__ROOT__/‘
    });
    editor.render("EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea>
  }
</script>
</body>
</html>

效果图

技术分享图片

以上就是本文的全部内容,

 


以上是关于Ueditor如何保存编辑好的内容的主要内容,如果未能解决你的问题,请参考以下文章

如何将已保存的html载入百度UEditor编辑器?

dedecms自定义模型内容调用多个Ueditor

使用ueditor编辑后保存到数据库,内容中含有html代码

百度文本编辑器Ueditor如何生成网页

PHP如何搭建百度Ueditor富文本编辑器

ueditor插入html代码保存后,再次编辑文章时html代码被过滤只显示文本内容!