百度编辑器uediter使用简介

最近做项目使用了下百度编辑器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>



发布了37 篇原创文章 · 获赞 5 · 访问量 5万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章