如何调用百度编辑器?

axiuno 3月前 1276

Xiuno BBS 的百度编辑器做了很多定制和优化,比如 QQ、微信快捷键截图(CTRL+A、CTRL+ALT+A),直接粘贴(CTRL+V)到编辑器中,并且统一了各种渠道的文件上传。如何重用它呢?


1. 调用编辑器,设置上传的 URL

2. URL 对应的服务端程序


1. 调用编辑器:

<?php include _include(ADMIN_PATH.'view/htm/footer.inc.htm');?>
<link href="../plugin/xn_umeditor/umeditor/themes/default/css/umeditor.css<?php echo $static_version;?>" type="text/css" rel="stylesheet" />
<link href="../plugin/xn_umeditor/umeditor/umeditor-bbs.css<?php echo $static_version;?>" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../plugin/xn_umeditor/umeditor/umeditor.config.js<?php echo $static_version;?>"></script>
<script>window.UMEDITOR_CONFIG.upload_url = xn.url('test-upload_image');</script>
<script type="text/javascript" src="../plugin/xn_umeditor/umeditor/umeditor.js<?php echo $static_version;?>"></script>
<script type="text/javascript" src="../plugin/xn_umeditor/umeditor/umeditor-insertcode.js<?php echo $static_version;?>"></script>
<script type="text/javascript" src="../plugin/xn_umeditor/umeditor/umeditor-bbs.js<?php echo $static_version;?>"></script>
<script type="text/javascript" src="../plugin/xn_umeditor/umeditor/lang/zh-cn/zh-cn.js<?php echo $static_version;?>"></script>

注意,

<script>window.UMEDITOR_CONFIG.upload_url = xn.url('test-upload_image');</script>

这里配置了上传的URL,截图,和上传的图片,都会传到这个 URL


2. 服务端代码:

} elseif($action == 'upload_image') {
	

	
	$width = param('width', 0);
	$height = param('height', 0);
	$is_image = param('is_image', 0);
	$name = param('name');
	$data = param_base64('data');

	$conf['upload_url'] = substr(http_url_path(), 0, -6).$conf['upload_url']; // 后台干掉 admin/
	
	$image_path = $conf['upload_path'].'font_image/'.date('Ym').'/';
	$image_url = $conf['upload_url'].'font_image/'.date('Ym').'/';
	xn_mkdir($image_path, 0777, TRUE);
	
	empty($group['allowattach']) AND $gid != 1 AND message(-1, '您无权上传');
	
	empty($data) AND message(-1, lang('data_is_empty'));
	$filesize = strlen($data);
	//$size > 20480000 AND message(-1, lang('filesize_too_large', array('maxsize'=>'20M', 'size'=>$size)));
	
	// 111.php.shtmll 
	$ext = file_ext($name, 7);
	$filetypes = include APP_PATH.'conf/attach.conf.php';
	!in_array($ext, $filetypes['all']) AND $ext = '_'.$ext;
	$filetype = attach_type($name, $filetypes);
	
	$tmpanme = $uid.'_'.xn_rand(15).'.'.$ext;
	$tmpfile = $image_path.$tmpanme;
	$tmpurl = $image_url.$tmpanme;
	
	file_put_contents($tmpfile, $data) OR message(-1, lang('write_to_file_failed'));
	
	$attach = array(
		'url'=>$tmpurl, 
		'path'=>$tmpfile, 
		'orgfilename'=>$name, 
		'filetype'=>$filetype, 
		'filesize'=>$filesize, 
		'width'=>$width, 
		'height'=>$height, 
		'isimage'=>$is_image, 
	);
	
	message(0, $attach);


3. 完毕。


如果要定制百度编辑器的工具栏,修改 154行:

plugin/xn_umeditor/umeditor/umeditor.config.js

        //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
        ,toolbar:[
            'source | undo redo | removeformat bold italic underline | forecolor paragraph',
            ' | justifyleft justifycenter justifyright justifyjustify | link unlink | insertcode video xnimg',
            'fullscreen', 
        ]


最后于 3月前 被axiuno编辑 ,原因:
最新回复 (14)
  • 参观者 3月前
    引用 2
    谢谢讲解,有用
  • 等你吃夜宵 3月前
    引用 3
    站位
  • sunjix5852 3月前
    引用 4
    好东西
  • sunjix5852 3月前
    引用 5
    附件URL,在哪里设置?
  • 涟网导航 3月前
    引用 6
    感谢黄大大,我已经把我自己网站的编辑器上完美的加上了表情!!!
  • luckly 3月前
    引用 7
        $filesize = strlen($data);
        //$size > 20480000 AND message(-1, lang('filesize_too_large', array('maxsize'=>'20M', 'size'=>$size)));

    这段代码是否有问题,这里不限制,可是前端会对图片一刀切的搞了剪裁。


  • vue 3月前
    引用 8
    嗯嗯..
  • 参观者 3月前
    引用 9
    luckly &nbsp;&nbsp;&nbsp;&nbsp;$filesize&nbsp;=&nbsp;strlen($data); &nbsp;& ...
    这里即使限制,跟你前端剪裁有什么关系
  • luckly 3月前
    引用 10
    参观者 这里即使限制,跟你前端剪裁有什么关系
    当然有关系,前端剪裁,图片模糊了。即使放开图片上传。
  • 参观者 3月前
    引用 11
    不知道你在说啥,不知道你要干吗
    可能我语文功底弱。。。。
  • ゞ涛。 3月前
    引用 12
    要是能配置上传图片  附件结合到阿里云  腾讯云    七牛云  又拍云  CDN就好了.
  • 引用 13
    ゞ涛。 要是能配置上传图片 附件结合到阿里云 腾讯云 七牛云 又拍云 CDN就好了.
    同意你的看法
  • 1234_1527472995 25天前
    引用 14
    弄完就这样了   http://www.7zz.com/T/RBrBfA
返回
发新帖