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