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

时间：2015-06-03 00:40:28 阅读：303 评论：0 收藏：0 [点我收藏+]

1.编辑器的入门使用

去http://ueditor.baidu.com下载

选择自己需要的字符集类型，下载本地表情

然后解压放在虚拟服务器admin目录下

ueditor1_4_3-utf8-php 名字修改为 ueditor把里面的内容粘在一级目录下

把如下代码放入需要的的body目录下，注意路径的问题不要写错

<!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor(‘container‘,{
			
		});
    </script>

然后F12即可浏览到简单的编辑器样式

2.修改本地化表情

把此文件解压

images目录下的所有表情文件夹复制到ueditor/dialogs/emotion/images/文件夹下面

查看ueditor.config.js可以看到帮助文档

<!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor(‘container‘,{
			emotionLocalization:true, /*  表情本地化 */
			lang:‘zh-cn‘,/*  指定编辑器语言 */
			initialFrameWidth:‘80%‘,  //初始化编辑器宽度,默认1000
            initialFrameHeight:320,/*编辑器的高*/
			textarea:‘content‘,/* 是表单名称，用来接值*/
			initialContent:‘欢迎留言!‘,    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
            autoClearinitialContent:true, //是是否自动清除编辑器初始内容
			/*focus:true*/
		});
    </script>

3.编辑器工具按钮的修改

【1】http://ueditor.baidu.com 下载->UBuilder选择需要的功能然后下载文件包即可

【2】

进入ueditor.config.js找到如下代码复制到编辑器html文件中

toolbars: [[
            ‘fullscreen‘, ‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘,
            ‘bold‘, ‘italic‘, ‘underline‘, ‘fontborder‘, ‘strikethrough‘, ‘superscript‘, ‘subscript‘, ‘removeformat‘, ‘formatmatch‘, ‘autotypeset‘, ‘blockquote‘, ‘pasteplain‘, ‘|‘, ‘forecolor‘, ‘backcolor‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘selectall‘, ‘cleardoc‘, ‘|‘,
            ‘rowspacingtop‘, ‘rowspacingbottom‘, ‘lineheight‘, ‘|‘,
            ‘customstyle‘, ‘paragraph‘, ‘fontfamily‘, ‘fontsize‘, ‘|‘,
            ‘directionalityltr‘, ‘directionalityrtl‘, ‘indent‘, ‘|‘,
            ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘justifyjustify‘, ‘|‘, ‘touppercase‘, ‘tolowercase‘, ‘|‘,
            ‘link‘, ‘unlink‘, ‘anchor‘, ‘|‘, ‘imagenone‘, ‘imageleft‘, ‘imageright‘, ‘imagecenter‘, ‘|‘,
            ‘simpleupload‘, ‘insertimage‘, ‘emotion‘, ‘scrawl‘, ‘insertvideo‘, ‘music‘, ‘attachment‘, ‘map‘, ‘gmap‘, ‘insertframe‘, ‘insertcode‘, ‘webapp‘, ‘pagebreak‘, ‘template‘, ‘background‘, ‘|‘,
            ‘horizontal‘, ‘date‘, ‘time‘, ‘spechars‘, ‘snapscreen‘, ‘wordimage‘, ‘|‘,
            ‘inserttable‘, ‘deletetable‘, ‘insertparagraphbeforetable‘, ‘insertrow‘, ‘deleterow‘, ‘insertcol‘, ‘deletecol‘, ‘mergecells‘, ‘mergeright‘, ‘mergedown‘, ‘splittocells‘, ‘splittorows‘, ‘splittocols‘, ‘charts‘, ‘|‘,
            ‘print‘, ‘preview‘, ‘searchreplace‘, ‘help‘, ‘drafts‘
        ]]

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor(‘container‘,{
			emotionLocalization:true, /*  表情本地化 */
			lang:‘zh-cn‘,/*  指定编辑器语言 */
			initialFrameWidth:‘80%‘,  //初始化编辑器宽度,默认1000
            initialFrameHeight:320,/*编辑器的高*/
			textarea:‘content‘,/* 是表单名称，用来接值*/
			initialContent:‘欢迎留言!‘,    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
            autoClearinitialContent:true, //是
			/*focus:true*/
			toolbars: [[
            ‘fullscreen‘, ‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘,
            ‘bold‘, ‘italic‘, ‘underline‘, ‘fontborder‘, ‘strikethrough‘, ‘superscript‘, ‘subscript‘, ‘removeformat‘, ‘formatmatch‘, ‘autotypeset‘, ‘blockquote‘, ‘pasteplain‘, ‘|‘, ‘forecolor‘, ‘backcolor‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘selectall‘, ‘cleardoc‘, ‘|‘,
            ‘rowspacingtop‘, ‘rowspacingbottom‘, ‘lineheight‘, ‘|‘,
            ‘customstyle‘, ‘paragraph‘, ‘fontfamily‘, ‘fontsize‘, ‘|‘,
            ‘directionalityltr‘, ‘directionalityrtl‘, ‘indent‘, ‘|‘,
            ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘justifyjustify‘, ‘|‘, ‘touppercase‘, ‘tolowercase‘, ‘|‘,
            ‘link‘, ‘unlink‘, ‘anchor‘, ‘|‘, ‘imagenone‘, ‘imageleft‘, ‘imageright‘, ‘imagecenter‘, ‘|‘,
            ‘simpleupload‘, ‘insertimage‘, ‘emotion‘, ‘scrawl‘, ‘insertvideo‘, ‘music‘, ‘attachment‘, ‘map‘, ‘gmap‘, ‘insertframe‘, ‘insertcode‘, ‘webapp‘, ‘pagebreak‘, ‘template‘, ‘background‘, ‘|‘,
            ‘horizontal‘, ‘date‘, ‘time‘, ‘spechars‘, ‘snapscreen‘, ‘wordimage‘, ‘|‘,
            ‘inserttable‘, ‘deletetable‘, ‘insertparagraphbeforetable‘, ‘insertrow‘, ‘deleterow‘, ‘insertcol‘, ‘deletecol‘, ‘mergecells‘, ‘mergeright‘, ‘mergedown‘, ‘splittocells‘, ‘splittorows‘, ‘splittocols‘, ‘charts‘, ‘|‘,
            ‘print‘, ‘preview‘, ‘searchreplace‘, ‘help‘, ‘drafts‘
        ]]
		});
    </script>
</body>
</html>

toolbars: [[‘undo‘, ‘redo‘, ‘|‘,‘bold‘, ‘italic‘,
			 ‘underline‘, ‘|‘, ‘fontfamily‘, ‘fontsize‘,‘forecolor‘, ‘backcolor‘, ‘insertorderedlist‘, ‘insertunorderedlist‘,‘|‘,‘emotion‘,‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘|‘,,‘help‘]],
		}

【3】取消如下的标题栏

elementPathEnabled:false,

【4】

wordCount:true,//是否开启数字统计

maximumWords:100//允许开启的最大字符

4.编辑器表情的添加

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
	display:block;
	margin:0;
}
</style>
</head>
<body>
<div style="width:25px; height:25px;">
<?php
//打印输出文件夹里面的内容
//$d=scandir(‘wangwang‘);
//$i=0;
//foreach($d as $v){
//	if($v==‘.‘||$v==‘..‘){
//		continue;
//	}
//	++$i;
//	if($i<10){
//		$n=‘0‘.$i;
//	}else{
//		$n=$i;
//	}
//	copy(‘wangwang/‘.$v,"w/ww_.$n.‘.gif‘");
//
//}
$dd=scandir(‘qpx‘);
foreach($dd as $v){
	if($v==‘.‘||$v==‘..‘){
		continue;
	}
	printf(‘<img src=qpx/%s width=25 height=25>‘,$v);
}
?>
</div>
</body>
</html>