简单编辑器的入门使用，修改编辑工具增加表情

Posted on 2015-06-03 00:01  小蕊同学  阅读(1409)  评论(0)    收藏  举报
1.编辑器的入门使用
去http://ueditor.baidu.com下载

选择自己需要的字符集类型，下载本地表情
然后解压放在虚拟服务器admin目录下
ueditor1_4_3-utf8-php 名字修改为 ueditor把里面的内容粘在一级目录下
把如下代码放入需要的的body目录下，注意路径的问题不要写错
  1. <!-- 加载编辑器的容器 -->
  2.     <script id="container" name="content" type="text/plain">
  3.         这里写你的初始化内容
  4.     </script>
  5.     <!-- 配置文件 -->
  6.     <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
  7.     <!-- 编辑器源码文件 -->
  8.     <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
  9.     <!-- 实例化编辑器 -->
  10.     <script type="text/javascript">
  11.         var ue = UE.getEditor('container',{
  12. 			
  13. 		});
  14.     </script>
然后F12即可浏览到简单的编辑器样式
2.修改本地化表情
把此文件解压
images目录下的所有表情文件夹复制到ueditor/dialogs/emotion/images/文件夹下面
查看ueditor.config.js可以看到帮助文档
  1. <!-- 加载编辑器的容器 -->
  2.     <script id="container" name="content" type="text/plain">
  3.         这里写你的初始化内容
  4.     </script>
  5.     <!-- 配置文件 -->
  6.     <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
  7.     <!-- 编辑器源码文件 -->
  8.     <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
  9.     <!-- 实例化编辑器 -->
  10.     <script type="text/javascript">
  11.         var ue = UE.getEditor('container',{
  12. 			emotionLocalization:true, /*  表情本地化 */
  13. 			lang:'zh-cn',/*  指定编辑器语言 */
  14. 			initialFrameWidth:'80%',  //初始化编辑器宽度,默认1000
  15.             initialFrameHeight:320,/*编辑器的高*/
  16. 			textarea:'content',/* 是表单名称，用来接值*/
  17. 			initialContent:'欢迎留言!',    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
  18.             autoClearinitialContent:true, //是是否自动清除编辑器初始内容
  19. 			/*focus:true*/
  20. 		});
  21.     </script>
3.编辑器工具按钮的修改
【1】http://ueditor.baidu.com 下载->UBuilder选择需要的功能然后下载文件包即可
【2】
进入ueditor.config.js找到如下代码复制到编辑器html文件中
  1. toolbars: [[
  2.             'fullscreen', 'source', '|', 'undo', 'redo', '|',
  3.             'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
  4.             'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
  5.             'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
  6.             'directionalityltr', 'directionalityrtl', 'indent', '|',
  7.             'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
  8.             'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
  9.             'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
  10.             'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
  11.             'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
  12.             'print', 'preview', 'searchreplace', 'help', 'drafts'
  13.         ]]
这是所有的工具栏，不需要的直接把单词去掉即可
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  8. <body>
  9. <!-- 加载编辑器的容器 -->
  10.     <script id="container" name="content" type="text/plain">
  11.         这里写你的初始化内容
  12.     </script>
  13.     <!-- 配置文件 -->
  14.     <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
  15.     <!-- 编辑器源码文件 -->
  16.     <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
  17.     <!-- 实例化编辑器 -->
  18.     <script type="text/javascript">
  19.         var ue = UE.getEditor('container',{
  20. 			emotionLocalization:true, /*  表情本地化 */
  21. 			lang:'zh-cn',/*  指定编辑器语言 */
  22. 			initialFrameWidth:'80%',  //初始化编辑器宽度,默认1000
  23.             initialFrameHeight:320,/*编辑器的高*/
  24. 			textarea:'content',/* 是表单名称，用来接值*/
  25. 			initialContent:'欢迎留言!',    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
  26.             autoClearinitialContent:true, //是
  27. 			/*focus:true*/
  28. 			toolbars: [[
  29.             'fullscreen', 'source', '|', 'undo', 'redo', '|',
  30.             'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
  31.             'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
  32.             'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
  33.             'directionalityltr', 'directionalityrtl', 'indent', '|',
  34.             'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
  35.             'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
  36.             'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
  37.             'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
  38.             'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
  39.             'print', 'preview', 'searchreplace', 'help', 'drafts'
  40.         ]]
  41. 		});
  42.     </script>
  43. </body>
  44. </html>
  1. toolbars: [['undo', 'redo', '|','bold', 'italic',
  2. 			 'underline', '|', 'fontfamily', 'fontsize','forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','|','emotion','justifyleft', 'justifycenter', 'justifyright', '|',,'help']],
  3. 		}

【3】取消如下的标题栏
elementPathEnabled:false,

【4】
wordCount:true,//是否开启数字统计
maximumWords:100//允许开启的最大字符


4.编辑器表情的添加
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. img{
  8. 	display:block;
  9. 	margin:0;
  10. }
  11. </style>
  12. </head>
  14. <body>
  15. <div style="width:25px; height:25px;">
  16. <?php
  17. //打印输出文件夹里面的内容
  18. //$d=scandir('wangwang');
  19. //$i=0;
  20. //foreach($d as $v){
  21. //	if($v=='.'||$v=='..'){
  22. //		continue;
  23. //	}
  24. //	++$i;
  25. //	if($i<10){
  26. //		$n='0'.$i;
  27. //	}else{
  28. //		$n=$i;
  29. //	}
  30. //	copy('wangwang/'.$v,"w/ww_.$n.'.gif'");
  31. //
  32. //}
  33. $dd=scandir('qpx');
  34. foreach($dd as $v){
  35. 	if($v=='.'||$v=='..'){
  36. 		continue;
  37. 	}
  38. 	printf('<img src=qpx/%s width=25 height=25>',$v);
  39. }
  40. ?>
  41. </div>
  42. </body>
  43. </html>
打开ps 创建宽25 高为25*64个表情=1550的背景，然后把此图片拖到背景布上然后存储为web格式文件，后缀名为gif放到
ueditor\dialogs\emotion\images文件下，把qpx表情文件也放进去
【2】在emotion.html文件里面修改
添加<div id="tab7"></div>
 修改tabNum:8, //切换面板数量
 SmilmgName:修改tab7:['b', 62]b为图片前缀名 62为表情个数
 imageFolders: tab7:'qpx/'图片对应文件夹路径
imageCss:tab7:'qpx'图片的css样式名
 imageCssOffset: tab7:'25' 图片的宽度
最后一句话不用加，
其他都要有

修改emotion.css

修改
F:\php环境配置\project\hnshichang\ueditor\lang\zh-cn\zh-cn.js

\project\hnshichang\ueditor\lang\en\en.js

【3】在emotion.js里面修改

宽高可根据实际情况修改

















博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3