DouPHP如何在商品和文章页面添加多个编辑器，并解决上传图片的问题

2019-12-22 1967

官方默认的开发方式无法支持在一个页面中使用多个TinyMCE编辑器，

单独修改js文件虽然可以使用多个编辑器，但上传图片会出现问题，

下面这是我们的解决办法，

顺带解决官方外置上传图片插件：
/admin/template/product.html，表单
<dl>
<dt valign="top">{$lang.article_content}</dt>
<dd>
<!-- TinyMCE -->
<script type="text/javascript">init_editer('secontent', '{$cur}', '{$article.id}')</script>
<textarea id="secontent" name="secontent" rows="20">{$article.secontent}</textarea>
<!-- /TinyMCE -->
</dd>
</dl>


/admin/include/tinymce/init.js，添加函数：
function init_editer(selecter = 'content', module, item_id = ''){
console.log(item_id);
tinymce.init({
selector:'textarea#' + selecter,
language:'zh_CN',
width:'800px',
height:'360px',
menubar:false,
skin:'simple',
theme:'simple',
convert_urls :false,
automatic_uploads: false,
images_upload_url: 'file.php?rec=mce&module=' + module + '&item_id=' + item_id + '&type=' + selecter,
plugins: [
'autolink lists link charmap textcolor',
'code hr pagebreak map textpattern image imagetools',
'media table help wordcount fullscreen image'
],
toolbar: 'fontsizeselect bold italic strikethrough forecolor backcolor alignleft aligncenter alignright alignjustify outdent indent numlist bullist code | link unlink image media map charmap table hr removeformat undo redo help fullscreen'
});
}

/admin/file.php，添加文件上传的代码就可以了

elseif ($rec == 'mce') {
    reset($_FILES);

    // 验证并获取合法的REQUEST

    $item_id = $check->is_number($_REQUEST['item_id']) ? $_REQUEST['item_id'] : '';

    $type = $check->is_letter($_REQUEST['type']) ? $_REQUEST['type'] : '';

    $img_width = $check->is_number($_REQUEST['img_width']) ? $_REQUEST['img_width'] : $_CFG['img_width'];

 

    // 文件上传盒子

    $custom_filename = $item_id . '_' . $type . '_' . $dou->create_rand_string('number', 6, time());

    $image = $file->box($module, $item_id, 'file', $type, $custom_filename, '', '', $img_width, $_CFG['watermark']);

 

    $file_url = $dou->dou_file($image);

    $html = array('location' => $file_url);

echo json_encode($html);
}
搜索
文章分类
最热推荐
热门文章