百度编辑器uediter使用简介

来源：互联网发布：淘宝提前收款编辑：程序博客网时间：2024/06/06 13:55

最近做项目使用了下百度编辑器ueditor，简要介绍下它的调用方法

1、ueditor官司网下最新包，地址： http://ueditor.baidu.com/website/download.html

2、以thinkphp框架的调用讲解

A：将ueditor包放入\Public\ueditor目录

B：在需要调用编辑器的页面引入ueditor相关JS文件

<SCRIPT type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></SCRIPT><SCRIPT type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></SCRIPT>

    C：创建一个textarea标签，如： <textarea name="FContent" id="FContent"></textarea>

    D：初始化ueditor相关配置

      <script type="text/javascript">    UE.getEditor('FContent', { //此处FContent与textarea的id保持一致即可        theme:"default", //皮肤        lang:"zh-cn", //语言        initialFrameWidth:1200,  //初始化编辑器宽度,默认800        initialFrameHeight:400    });</script>
    E：这步比较关健，利用jquery的$('#ID').val()是获取不到编辑器内容的，我们得利用编辑器提供的接口来获取，调用方法如下
var editor = new UE.getEditor('FContent');//获取编辑器内容var FContent = editor.getContent();
      备注：ueditor接口查看地址  http://ueditor.baidu.com/doc/     好吧，最近做项目对一次用到了ueditor，跟之前的版本用法竟然完全不一样，用法如下：2016/09/08     <script type="text/javascript">       var ue = UE.getEditor('contents', {           //初始化编辑器，好坑，一版本一个样，跟不上节奏       });       ue.addListener("ready", function () {           //alert(ue.isFocus());           //$("input[type='submit']").on('click',function(){             //  alert(333);           //});好吧， 不知道在编辑器里如何写JQUERY，写原始的吧            document.getElementById('submit').onclick = function(){                var contents = ue.getContent();                document.getElementById('new_contents').value = contents;                //alert(document.getElementById('new_contents').value);            };       });</script>

0 0