ueditor使用过程的注意事项

26212次浏览

之前写个一篇文章前端开发中的复文本框 ,讲述了一个功能比较强大的复文本编辑器,但是一直没有应用于真正的项目。前几天在真正项目上小试了一把,很不错!推荐大家使用!大家有兴趣可以看下我之前对其介绍: 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改成自己想要的。

备注:

方法经过实战,是可以用的,要是你改了之后没有反应,请更新一下缓存!更新之后就会变好!

相关文章: