微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

TinyMCE 图像上传不会在一个页面中使用多个编辑器设置“src”属性

如何解决TinyMCE 图像上传不会在一个页面中使用多个编辑器设置“src”属性

我正在处理一个 Codeigniter 项目,我需要使用多个 TinyMCE 编辑器。 由于我必须使用外部 API 来存储文件和图像,因此我创建了一个自定义服务器端上传处理程序,为上传的图像提供结果 URL。
如果我在一个页面上只使用一个编辑器,这完全没问题,但如果我使用 2 个或更多编辑器,图像标签会变成
<img alt="" width="724" height="33"><img k=" alt=" width="1520" height="820">,即它们的 src 属性保持未设置.
仅当我在一页上使用多个编辑器时才会发生这种情况。

此外,如果automatic_uploads: true,那么在发布表单后,内容也被完美地保存并且图像是可见的。但是我想禁用automatic_uploads,以便在发布表单时失败/取消的尝试不会在上传服务器上填写无用的数据。

我的服务器端上传处理程序:

<?PHP
defined('BASEPATH') or exit('No direct script access allowed');

class Upload extends CI_Controller
{

    function __construct()
    {
        parent::__construct();
        $this->load->library('session');
    }

    public function index()
    {
        // Allowed the origins to upload
        $accepted_origins = array("http://localhost");
        $id = $_GET['id'];
        reset($_FILES);
        $tmp = current($_FILES);
        if (is_uploaded_file($tmp['tmp_name'])) {
            if (isset($_SERVER['HTTP_ORIGIN'])) {
                if (in_array($_SERVER['HTTP_ORIGIN'],$accepted_origins)) {
                    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
                } else {
                    header("HTTP/1.1 403 Origin Denied");
                    return;
                }
            }
            // check valid file name
            if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/",$tmp['name'])) {
                header("HTTP/1.1 400 Invalid file name.");
                return;
            }
            // check and Verify extension
            if (!in_array(strtolower(pathinfo($tmp['name'],PATHINFO_EXTENSION)),array("gif","jpg","png"))) {
                header("HTTP/1.1 400 Invalid extension.");
                return;
            }

            // Accept upload if there was no origin,or if it is an accepted origin
            $output = function_to_upload_image_to_API($id,array($tmp));
            $fileId = $output[0]['fileId'];

            $response = array("location" => $fileId);
            echo json_encode($response);

        } else {
            header("HTTP/1.1 500 Server Error");
        }
    }
}

TinyMCE 脚本:
(使用 tinymce.EditorManager.execCommand("mceAddEditor",false,id); 动态添加编辑器)

tinymce.init({
            mode: "none",plugins: 'image,code,link,lists',browser_spellcheck : true,branding: false,convert_urls : true,mobile: {
                menubar: true
            },toolbar: 'undo redo | styleselect | bold italic | link image code | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent',images_upload_base_path: 'base_url_of_upload_server',automatic_uploads: false,// upload image functionality
            <?PHP
            $id = "some_id";
            ?>
            images_upload_url: '<?=base_url()?>index.PHP/Upload?id=' + '<?=$id?>',});

因此,应该为特定图像设置为 src 的 url 将是 base_url_of_upload_server/fileId,其中 fileId 由函数“function_to_upload_image_to_API”返回。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。