百度编辑器ueditor 调用函数插入HTML

百度编辑器ueditor 调用函数插入HTML,第1张

这个文档里有详细的说明

>//editor 是编辑器实例
 editorexecCommand( 'inserthtml', yourhtml);

1、首先通过php或者jsp等后台语言获取数据库中的内容,保存到变量cont中。\x0d\2、调用editorsetContent(cont)就完成数据赋值到编辑器中了,这里的editor是编辑器实例。\x0d\\x0d\PS:如果在点击诸如“编辑”按钮之后再实例化编辑器,然后设置内容时,通常需要等待编辑器实例化完成之后再赋值,也就是代码需要改成这样子:\x0d\editorready(function(){\x0d\ editorsetContent(cont); \x0d\})\x0d\否则在某些情况下会报错。当然,如果点击编辑的时候编辑器已经显示在桌面上了的时候,那就只需要直接调用即可。

首先我们需要来认识下UEditor,它是由百度web前端研发部开发所见即所得富文本web编辑器,并且是基于BSD协议的开源产品,允许自由使用和修改,这也是小编最看中它的地方,开源就意味着可以自己来定制这个编辑器。
接着我们来下载这个编辑器,百度一下UEditor,第一个就是它的官网。我们点击下载选项,我们发现一共有两个版本供我们选择,一个是UBuilder,一个是开发版,通过下面注释的红色小字我们可以了解到UBuilder和开发版的区别。一般情况下我们选择UBuilder版本即可。
跟我们以往下载软件的方式不同,UEditor采用选择性下载。首先是可见功能的选择,共有基本,插入,格式化,表格四大组,每组下面都有若干功能按钮,我们可以根据自己的需求来进行选择,如果双击四大组则表示全选该组按钮。如果对选择的按钮不满意还可以点击清空选择,有一点要提示的是如果点击清空选择会清楚掉你原先做过的所有选择。
接着就是隐藏功能,语言,服务端版本的选择,隐藏功能默认的是全选,如非必要还是不要更改为好。语言选项共分为了中文和英文两种,默认的是只下载中文语言包,如果你有需要用到英文的话可以把英文包也加上。服务端版本目前提供了三种,分别为PHP,NET,JSP,选择完毕后我们就可以点击下载资源包了。
我们解压缩下载下来的UEditor压缩包。我们双击打开indexhtml文件,从标题上不难看出,这是一个演示文件,比较详细的记录了UEditor的创建和使用,但是这个文件中的很多代码我们都用不到,我们可以精简下代码,只留下需要的代码即可。
其实使用UEditor创建一个编辑器还是很简单的一件事情,首先就是引入俩个js文件,分别为editor_configjs和editor_alljs。然后就是js创建一个可编辑区域,用来创建编辑器,需要注明id,类型为text/plain,最后实例化编辑器即可(具体代码如下图所示,个别代码并未显示完全,仅供参考使用)。
如果将UEditor应用到项目中我们还需要对编辑器的路径进行设置。我们打开editor_configjs文件,找到windowUEDITOR_HOME_URL,然后配置编辑器所在文件的路径,这个路径可以是绝对路径也可以是相对路径。此处的配置仅对这个编辑器起作用,如果你使用了多个UEditor则需要分别进行设置。

1、在editor_configjs文件中
1)注释掉下面的代码:应该在第11行
var tmp = windowlocationpathname,
URL= tmpsubstr(0,tmplastIndexOf("\/")+1)replace("_examples/","");
2)如果你重新定义了URL变量,也要注释掉
3)取消第10行的注释
var URL = windowUEDITOR_HOME_URL || '/';
4)可选第10行代码里面的 '/' 可配置成大部分页面调用UEditor时的路径
2、在要需要外部配置url的页面,修改 windowUEDITOR_HOME_URL 的值,并写在editor_configjs前面,如下:
<script type="text/javascript">
windowUEDITOR_HOME_URL="/ueditor/";
</script>
<script type="text/javascript" src="ueditor/editor_configjs"></script>
<script type="text/javascript" src="ueditor/editor_alljs"></script>
<link href="ueditor/themes/default/ueditorcss" rel="stylesheet" />

将div换成textarea

不行的话将这两个文件调换一下试试:

editor_alljs:带全部功能(排除UI)的js文件压缩后的版本

editor_ui_alljs:带全部功能(包含UI)的js文件压缩后的版本

而我的还更惨,在IE(IE6~9)都正常,但在manthon/FF/chrome下就变形了!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12899401.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-28
下一篇 2023-05-28

发表评论

登录后才能评论

评论列表(0条)

保存