简单编辑器的入门使用，修改编辑工具增加表情 - 小蕊同学

lsr111
1.编辑器的入门使用
去http://ueditor.baidu.com下载

选择自己需要的字符集类型，下载本地表情
然后解压放在虚拟服务器admin目录下
ueditor1_4_3-utf8-php 名字修改为 ueditor把里面的内容粘在一级目录下
把如下代码放入需要的的body目录下，注意路径的问题不要写错
    

  1. <!-- 加载编辑器的容器 -->
    2. 

  2.     <script id="container" name="content" type="text/plain">
    3. 

  3.         这里写你的初始化内容
    4. 

  4.     </script>
    5. 

  5.     <!-- 配置文件 -->
    6. 

  6.     <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
    7. 

  7.     <!-- 编辑器源码文件 -->
    8. 

  8.     <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
    9. 

  9.     <!-- 实例化编辑器 -->
    10. 

  10.     <script type="text/javascript">
    11. 

  11.         var ue = UE.getEditor(\'container\',{
    12. 

  12. 			
    13. 

  13. 		});
    14. 

  14.     </script>
    15.
然后F12即可浏览到简单的编辑器样式
2.修改本地化表情
把此文件解压
images目录下的所有表情文件夹复制到ueditor/dialogs/emotion/images/文件夹下面
查看ueditor.config.js可以看到帮助文档
    

  1. <!-- 加载编辑器的容器 -->
    2. 

  2.     <script id="container" name="content" type="text/plain">
    3. 

  3.         这里写你的初始化内容
    4. 

  4.     </script>
    5. 

  5.     <!-- 配置文件 -->
    6. 

  6.     <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
    7. 

  7.     <!-- 编辑器源码文件 -->
    8. 

  8.     <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
    9. 

  9.     <!-- 实例化编辑器 -->
    10. 

  10.     <script type="text/javascript">
    11. 

  11.         var ue = UE.getEditor(\'container\',{
    12. 

  12. 			emotionLocalization:true, /*  表情本地化 */
    13. 

  13. 			lang:\'zh-cn\',/*  指定编辑器语言 */
    14. 

  14. 			initialFrameWidth:\'80%\',  //初始化编辑器宽度,默认1000
    15. 

  15.             initialFrameHeight:320,/*编辑器的高*/
    16. 

  16. 			textarea:\'content\',/* 是表单名称，用来接值*/
    17. 

  17. 			initialContent:\'欢迎留言!\',    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
    18. 

  18.             autoClearinitialContent:true, //是是否自动清除编辑器初始内容
    19. 

  19. 			/*focus:true*/
    20. 

  20. 		});
    21. 

  21.     </script>
    22.
3.编辑器工具按钮的修改
【1】http://ueditor.baidu.com 下载->UBuilder选择需要的功能然后下载文件包即可
【2】
进入ueditor.config.js找到如下代码复制到编辑器html文件中 
    

  1. toolbars: [[
    2. 

  2.             \'fullscreen\', \'source\', \'|\', \'undo\', \'redo\', \'|\',
    3. 

  3.             \'bold\', \'italic\', \'underline\', \'fontborder\', \'strikethrough\', \'superscript\', \'subscript\', \'removeformat\', \'formatmatch\', \'autotypeset\', \'blockquote\', \'pasteplain\', \'|\', \'forecolor\', \'backcolor\', \'insertorderedlist\', \'insertunorderedlist\', \'selectall\', \'cleardoc\', \'|\',
    4. 

  4.             \'rowspacingtop\', \'rowspacingbottom\', \'lineheight\', \'|\',
    5. 

  5.             \'customstyle\', \'paragraph\', \'fontfamily\', \'fontsize\', \'|\',
    6. 

  6.             \'directionalityltr\', \'directionalityrtl\', \'indent\', \'|\',
    7. 

  7.             \'justifyleft\', \'justifycenter\', \'justifyright\', \'justifyjustify\', \'|\', \'touppercase\', \'tolowercase\', \'|\',
    8. 

  8.             \'link\', \'unlink\', \'anchor\', \'|\', \'imagenone\', \'imageleft\', \'imageright\', \'imagecenter\', \'|\',
    9. 

  9.             \'simpleupload\', \'insertimage\', \'emotion\', \'scrawl\', \'insertvideo\', \'music\', \'attachment\', \'map\', \'gmap\', \'insertframe\', \'insertcode\', \'webapp\', \'pagebreak\', \'template\', \'background\', \'|\',
    10. 

  10.             \'horizontal\', \'date\', \'time\', \'spechars\', \'snapscreen\', \'wordimage\', \'|\',
    11. 

  11.             \'inserttable\', \'deletetable\', \'insertparagraphbeforetable\', \'insertrow\', \'deleterow\', \'insertcol\', \'deletecol\', \'mergecells\', \'mergeright\', \'mergedown\', \'splittocells\', \'splittorows\', \'splittocols\', \'charts\', \'|\',
    12. 

  12.             \'print\', \'preview\', \'searchreplace\', \'help\', \'drafts\'
    13. 

  13.         ]]
    14.
这是所有的工具栏，不需要的直接把单词去掉即可
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8">
    5. 

  5. <title>无标题文档</title>
    6. 

  6. </head>
    7. 

    8. 

  8. <body>
    9. 

  9. <!-- 加载编辑器的容器 -->
    10. 

  10.     <script id="container" name="content" type="text/plain">
    11. 

  11.         这里写你的初始化内容
    12. 

  12.     </script>
    13. 

  13.     <!-- 配置文件 -->
    14. 

  14.     <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
    15. 

  15.     <!-- 编辑器源码文件 -->
    16. 

  16.     <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
    17. 

  17.     <!-- 实例化编辑器 -->
    18. 

  18.     <script type="text/javascript">
    19. 

  19.         var ue = UE.getEditor(\'container\',{
    20. 

  20. 			emotionLocalization:true, /*  表情本地化 */
    21. 

  21. 			lang:\'zh-cn\',/*  指定编辑器语言 */
    22. 

  22. 			initialFrameWidth:\'80%\',  //初始化编辑器宽度,默认1000
    23. 

  23.             initialFrameHeight:320,/*编辑器的高*/
    24. 

  24. 			textarea:\'content\',/* 是表单名称，用来接值*/
    25. 

  25. 			initialContent:\'欢迎留言!\',    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
    26. 

  26.             autoClearinitialContent:true, //是
    27. 

  27. 			/*focus:true*/
    28. 

  28. 			toolbars: [[
    29. 

  29.             \'fullscreen\', \'source\', \'|\', \'undo\', \'redo\', \'|\',
    30. 

  30.             \'bold\', \'italic\', \'underline\', \'fontborder\', \'strikethrough\', \'superscript\', \'subscript\', \'removeformat\', \'formatmatch\', \'autotypeset\', \'blockquote\', \'pasteplain\', \'|\', \'forecolor\', \'backcolor\', \'insertorderedlist\', \'insertunorderedlist\', \'selectall\', \'cleardoc\', \'|\',
    31. 

  31.             \'rowspacingtop\', \'rowspacingbottom\', \'lineheight\', \'|\',
    32. 

  32.             \'customstyle\', \'paragraph\', \'fontfamily\', \'fontsize\', \'|\',
    33. 

  33.             \'directionalityltr\', \'directionalityrtl\', \'indent\', \'|\',
    34. 

  34.             \'justifyleft\', \'justifycenter\', \'justifyright\', \'justifyjustify\', \'|\', \'touppercase\', \'tolowercase\', \'|\',
    35. 

  35.             \'link\', \'unlink\', \'anchor\', \'|\', \'imagenone\', \'imageleft\', \'imageright\', \'imagecenter\', \'|\',
    36. 

  36.             \'simpleupload\', \'insertimage\', \'emotion\', \'scrawl\', \'insertvideo\', \'music\', \'attachment\', \'map\', \'gmap\', \'insertframe\', \'insertcode\', \'webapp\', \'pagebreak\', \'template\', \'background\', \'|\',
    37. 

  37.             \'horizontal\', \'date\', \'time\', \'spechars\', \'snapscreen\', \'wordimage\', \'|\',
    38. 

  38.             \'inserttable\', \'deletetable\', \'insertparagraphbeforetable\', \'insertrow\', \'deleterow\', \'insertcol\', \'deletecol\', \'mergecells\', \'mergeright\', \'mergedown\', \'splittocells\', \'splittorows\', \'splittocols\', \'charts\', \'|\',
    39. 

  39.             \'print\', \'preview\', \'searchreplace\', \'help\', \'drafts\'
    40. 

  40.         ]]
    41. 

  41. 		});
    42. 

  42.     </script>
    43. 

  43. </body>
    44. 

  44. </html>
    45. 

    

  1. toolbars: [[\'undo\', \'redo\', \'|\',\'bold\', \'italic\',
    2. 

  2. 			 \'underline\', \'|\', \'fontfamily\', \'fontsize\',\'forecolor\', \'backcolor\', \'insertorderedlist\', \'insertunorderedlist\',\'|\',\'emotion\',\'justifyleft\', \'justifycenter\', \'justifyright\', \'|\',,\'help\']],
    3. 

  3. 		}
    4.

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

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


4.编辑器表情的添加
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8">
    5. 

  5. <title>无标题文档</title>
    6. 

  6. <style>
    7. 

  7. img{
    8. 

  8. 	display:block;
    9. 

  9. 	margin:0;
    10. 

  10. }
    11. 

  11. </style>
    12. 

  12. </head>
    13. 

    14. 

  14. <body>
    15. 

  15. <div style="width:25px; height:25px;">
    16. 

  16. <?php
    17. 

  17. //打印输出文件夹里面的内容
    18. 

  18. //$d=scandir(\'wangwang\');
    19. 

  19. //$i=0;
    20. 

  20. //foreach($d as $v){
    21. 

  21. //	if($v==\'.\'||$v==\'..\'){
    22. 

  22. //		continue;
    23. 

  23. //	}
    24. 

  24. //	++$i;
    25. 

  25. //	if($i<10){
    26. 

  26. //		$n=\'0\'.$i;
    27. 

  27. //	}else{
    28. 

  28. //		$n=$i;
    29. 

  29. //	}
    30. 

  30. //	copy(\'wangwang/\'.$v,"w/ww_.$n.\'.gif\'");
    31. 

  31. //
    32. 

  32. //}
    33. 

  33. $dd=scandir(\'qpx\');
    34. 

  34. foreach($dd as $v){
    35. 

  35. 	if($v==\'.\'||$v==\'..\'){
    36. 

  36. 		continue;
    37. 

  37. 	}
    38. 

  38. 	printf(\'<img src=qpx/%s width=25 height=25>\',$v);
    39. 

  39. }
    40. 

  40. ?>
    41. 

  41. </div>
    42. 

  42. </body>
    43. 

  43. </html>
    44.
打开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里面修改

宽高可根据实际情况修改

















分类：

技术点：

相关文章：

  • 2021-08-09
  • 2021-07-17
  • 2021-08-17
  • 2021-12-04
  • 2021-10-24
  • 2021-08-07
  • 2021-12-05
  • 2021-04-27
猜你喜欢
  • 2021-11-09
  • 2021-11-23
  • 2021-12-12
  • 2021-12-03
  • 2021-08-05
  • 2021-11-01
  • 2021-09-09
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode