之前写个一篇文章前端开发中的复文本框 ,讲述了一个功能比较强大的复文本编辑器,但是一直没有应用于真正的项目。前几天在真正项目上小试了一把,很不错!推荐大家使用!大家有兴趣可以看下我之前对其介绍: http://www.haorooms.com/post/fuwenben
下面说说ueditor使用过程避免不了的几点注意吧:
1、ueditor form表单提交,如何给ueditor定义name ,编辑的时候如何回填?方法如下:
<script id="editor" type="text/plain" name="haorooms" style="width:95%;height:350px;">{$data.haorooms}</script>
这样就可以回填了,这是用smarty绑定的代码! 提交的是haorooms字段
2、ueditor修改默认编辑器字体与大小
在插件目录ueditor里面的找到editor_config.js根目录:修改默认字体
//fontfamily
//字体
//,'fontfamily':[
// ['宋体',['宋体', 'SimSun']],
// ['楷体',['楷体', '楷体_GB2312', 'SimKai']],
// ['黑体',['黑体', 'SimHei']],
// ['隶书',['隶书', 'SimLi']],
// ['andale mono',['andale mono']],
// ['arial',['arial', 'helvetica', 'sans-serif']],
// ['arial black',['arial black', 'avant garde']],
// ['comic sans ms',['comic sans ms']],
// ['impact',['impact', 'chicago']],
// ['times new roman',['times new roman']]
// ]
只要把里面的注释“//”去掉。更改为你需要的就是了。在他下面还有一句
//fontsize
//字号
,'fontsize':[10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 36]
这一句是设置“编辑器里有更多字体大小选择”
找到editor_all.js根目录:修改默认字体大小
//这些默认属性不能够让用户改变
//选中的td上的样式
'.selectTdClass{background-color:#3399FF !important;}' +
'table.noBorderTable td{border:1px dashed #ddd !important}' +
//插入的表格的默认样式
'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' +
//分页符的样式
'.pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' +
'.subtitle{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' +
//锚点的样式,注意这里背景图的路径
'.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px;width: 15px;}' +
//设置四周的留边
'.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' +
//设置默认字体和字号
'body{margin:8px;font-family:\'宋体\';font-size:16px;}' +
//针对li的处理
'li{clear:both}' +
//设置段落间距
'p{margin:5px 0;}'
+ ( options.initialStyle || '' ) +
'</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';
把:'body{margin:8px;font-family:\'宋体\';font-size:16px;}' 中16改成自己想要的。
备注:
方法经过实战,是可以用的,要是你改了之后没有反应,请更新一下缓存!更新之后就会变好!