如何使用Tinymce文本编辑器从计算机上传图像?

时间:2014-09-01 08:07:11

标签: php ajax tinymce codeigniter-2 tinymce-4

TinyMCE的!,

亲爱的发挥,

我目前在我的网页设计中使用了Tinymce文本编辑器,但它不适用于从计算机上传的图像。 下面是我从其他教程复制的源代码但我不知道如何在用户编辑或将一些图像插入我的数据库时修改或启用从计算机上传图像 请检查并提供帮助

<script type="text/javascript">
        tinymce.init({

            selector: "textarea",
            theme: "modern",
            width: "630",
            height: "auto",
            plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,paste,fullscreen,noneditable,contextmenu",
            theme_advanced_buttons1_add_before : "newdocument,separator",
            theme_advanced_buttons1_add : "fontselect,fontsizeselect",
            theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
            theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,",
            theme_advanced_buttons3_add_before : "tablecontrols,separator",
            theme_advanced_buttons3_add : "flash,advhr,separator,fullscreen",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            extended_valid_elements : "hr[class|width|size|noshade]",
            file_browser_callback : "image",
            paste_use_dialog : false,
            theme_advanced_resizing : true,
            theme_advanced_resize_horizontal : true,
            apply_source_formatting : true,
            force_br_newlines : true,
            force_p_newlines : false,
            relative_urls : true,
            toolbar: "insertfile | image| responsivefilemanager| undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image" || "print preview media | forecolor backcolor emoticons",
            plugins: "image",
            image_advtab:true,  
            image_list: [
                {title: 'My image 1', value: 'public_html/upload/'},
                {title: 'My image 2', value: 'public_html/upload/'}
            ]
            });
    </script>

使用文本功能可以正常工作,但它不适用于图像上传 示例:当我单击插入图像/编辑图像 - >弹出加载时,单击图像图标以选择图像但不显示任何内容

感谢您的帮助

2 个答案:

答案 0 :(得分:1)

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",

    //plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",
    editor_selector : "tiny",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,images,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,images, cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
});

答案 1 :(得分:0)

你的&#34;图像&#34;是一个回调函数

function myFileBrowser (field_name, url, type, win) {

// alert("Field_Name: " + field_name + "nURL: " + url + "nType: " + type + "nWin: " + win); // debug/testing

/* If you work with sessions in PHP and your client doesn't accept cookies you might need to carry
   the session name and session ID in the request string (can look like this: "?PHPSESSID=88p0n70s9dsknra96qhuk6etm5").
   These lines of code extract the necessary parameters and add them back to the filebrowser URL again. */

var cmsURL = window.location.toString();    // script URL - use an absolute path!
if (cmsURL.indexOf("?") < 0) {
    //add the type as the only query parameter
    cmsURL = cmsURL + "?type=" + type;
}
else {
    //add the type as an additional query parameter
    // (PHP session ID is now included if there is one at all)
    cmsURL = cmsURL + "&type=" + type;
}

tinyMCE.activeEditor.windowManager.open({
    file : cmsURL,
    title : 'My File Browser',
    width : 420,  // Your dimensions may differ - toy around with them!
    height : 400,
    resizable : "yes",
    inline : "yes",  // This parameter only has an effect if you use the inlinepopups plugin!
    close_previous : "no"
}, {
    window : win,
    input : field_name
});
return false;
}

然后再做

tinyMCE.init({
  theme : ...,
  mode: ...,

  file_browser_callback : 'myFileBrowser'
});

参考:http://www.tinymce.com/wiki.php/TinyMCE3x:How-to_implement_a_custom_file_browser