zoukankan      html  css  js  c++  java

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

    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放到
    ueditordialogsemotionimages文件下，把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环境配置projecthnshichangueditorlangzh-cnzh-cn.js

    projecthnshichangueditorlangenen.js

    【3】在emotion.js里面修改

    宽高可根据实际情况修改
  • 相关阅读:
    【C++类与对象】实验四（二）
    【微信小程序——开发步骤1】
    【C++/实验三】类和对象
    【C++/类与对象总结】
    【C++/函数】实验2
    食堂APP-项目开发 语音输入（1）
    食堂APP-项目开发及踩坑记录（7）
    食堂APP-项目开发及踩坑记录（6）
    食堂APP-项目开发及踩坑记录（5）
    食堂APP-项目开发及踩坑记录（4）
  • 原文地址：https://www.cnblogs.com/lsr111/p/4548088.html
Copyright © 2011-2022 走看看