700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Ueditor富文本编辑器

Ueditor富文本编辑器

时间:2022-10-11 05:41:44

相关推荐

Ueditor富文本编辑器

Ueditor富文本编辑器

Ueditor富文本编辑器插件应用步骤如下:

1.引入css和js文件

2.设置承载标签

设置富文本编辑器的承载标签,必须设置id属性。一般使用textarea或script标签,使用script标签时,必须设置type=”text/plain”

3.实例化富文本编辑器

getEditor的参数为承载标签的id值,可增加第二个参数进行自定义配置项

4.实例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ueditor富文本编辑器测试</title><link rel="stylesheet" type="text/css" href="themes/default/css/umeditor.css"><script type="text/javascript" src="third-party/jquery.min.js"></script><script type="text/javascript" src="umeditor.config.js"></script><script type="text/javascript" src="umeditor.min.js"></script><script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script></head><body><!-- 设置承载标签,一般使用两种标签(textarea、script,使用script标签时,必须设置type="text/plain"),必须要设置id属性 --><textarea id="content"></textarea><script type="text/javascript">// 实例化富文本编辑器,getEditor第一个参数就是承载标签的id值var um = UM.getEditor('content',{//自定义配置项会覆盖配置文件中的配置项initialFrameWidth:600, //初始化编辑器宽度initialFrameHeight:300, //初始化编辑器高度isShow : true, //默认显示编辑器initialContent:'请编辑内容',//自定义工具栏toolbar:['source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |','insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,'| justifyleft justifycenter justifyright justifyjustify |','link unlink | emotion image video | map','| horizontal print preview fullscreen', 'drafts', 'formula'],// 自定义字体大小fontsize:[10, 11, 12, 14, 16, 18, 20, 24, 36]})</script></body></html>

效果图:

代码及相关文件详见GitHub主页富文本编辑器插件Ueditor

/Jianxq12/ITcast/tree/master/Ajax

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。