海安做网站公司最近有个项目因为原项目的编辑器不符合客户的需求,所以需要更换一个其他的编辑器,按客户的需求是要接进搜索引擎ueditor富文本编辑器.

海安做网站公司在网上下载好文件,然后将下载好的文件解压到项目中,我这里是解压到public目录下并改文件夹名称为ueditor

 

 

第一步先引进javascript

在html中如进以下的js语句引进相关文件

<script type="text/javascript" src="__lib__/ueditor/ueditor.config.js?{$think.now_time}"></script>

<!-- 编辑器源码文件 -->

<script type="text/javascript" src="__lib__/ueditor/ueditor.all.js?{$think.now_time}"></script>

第2步添加textare文本域并设定id值

<textarea id="[id]" name="[id]" class="form-control kindeditor" style="height:400px;width:100%;">[value]</textarea>

第1步初始化ueditor编辑器

在html代码中添加以下的代码初始化ueditor编译器

<!-- 实例化编辑器 -->

<script type="text/javascript" charset="utf-8">//初始化编辑器

window.ueditor_home_url = "__lib__/ueditor/";//配置路径设定为ueditor所放的位置

window.onload=function(){

window.ueditor_config.initialframeheight='400';//编辑器的高度

window.ueditor_config.initialframewidth='100%';//编辑器的宽度

var editor = new ue.ui.editor({

imageurl : '',

fileurl : '',

imagepath : '',

filepath : '',

imagemanagerurl:'', //图片在线管理的处理地址

imagemanagerpath:'/'

});

editor.render("[id]");//此处的editorid与<textarea name="content" id="editorid">的id值对应 </textarea>

}

</script>

我这里是直接集成在一个公共的页面里,方便调用

 

 

 

 

海安做网站公司第4步设定图片上传路径

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

效果图

 

 

 

这里的工具栏,我是依据海安做网站公司需求开展了删减,删减位置在ueditor.config文件的第36行处删减；编辑器的高度一开始默认是依据内容高度延伸的,需要改成滚动条形式的话,在ueditor.config文件的第36行处修改autoheightenabled：true,true改为false,然后取消注释就可以；