富文本web编辑器--ueditor的使用

最新推荐文章于 2022-08-16 11:30:04 发布

jiangxuanzi1993

最新推荐文章于 2022-08-16 11:30:04 发布

阅读量757

点赞数

分类专栏：富文本编辑器-预览

本文链接：https://blog.csdn.net/u014469254/article/details/50946417

版权

富文本编辑器-预览专栏收录该内容

0 篇文章 0 订阅

订阅专栏

①导入js文件

  <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/ueditor/ueditor.config.js">
    </script>
  <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/ueditor/ueditor.all.js"> 
    </script>
  <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/ueditor/lang/zh-cn/zh-cn.js">
    </script>

②JSP页面嵌入

<body>
<script id="container" name="content"  type="text/plain"></script>
</body>

③js调用

    var tempFolder='${tempFolder}';
    var ue ;
    $(document).ready(function(){
       window.UEDITOR_CONFIG.initialFrameWidth=1150;
       window.UEDITOR_CONFIG.initialFrameHeight=300;
       ue = UE.getEditor('container');
    })

④保存页面获得内容（点击保存按钮）

var activityDesc= ue.getContent();//获得页面html,存入数据库

⑤修改页面，默认显示参数

ue.ready(function() {
    //设置编辑器的内容
    ue.setContent(data.activityDesc);
})

⑥预览页面，参数设置

window.top['previewContent']=previewContent;//点击预览按钮页面

//预览jsp页面
<div  id="previewContent"></div>

<script type="text/javascript" >
    $(function(){
      $("#previewContent").html(window.top['previewContent']);
    })
</script>