jordandelozier / wysibb

WYSIWYG BBcode editor
http://www.wysibb.com
246 stars 86 forks source link

how to use Image upload?? #64

Closed caglarozcan closed 9 years ago

caglarozcan commented 10 years ago

how to use image upload?? do not work upload. not add to bbc code editor.

zenn1989 commented 10 years ago

It's easy, i using wysibb in my cms and can explain you how to add it:

  1. found section:
                img : {
                    title: CURLANG.img,
                                .....
                                        }

Change this section img { } to:

                img : {
                    title: CURLANG.img,
                    buttonHTML: '<span class="fonticon ve-tlb-img1">\uE006</span>',
                    hotkey: 'ctrl+shift+1',
                    addWrap: true,
                    modal: {
                        title: CURLANG.modal_img_title,
                        width: "600px",
                        tabs: [
                            {
                                title: CURLANG.modal_img_tab1,
                                input: [
                                    {param: "SRC",title:CURLANG.modal_imgsrc_text,validation: '^http(s)?://.*?\.(jpg|png|gif|jpeg)$'}
                                ]
                            },
                            { //The second tab
                                title: CURLANG.modal_img_tab2,
                                html: '<div id="imguploader"> <form id="fupform" class="upload" action="{img_uploadurl}" method="post" enctype="multipart/form-data" target="fupload"><input type="hidden" name="iframe" value="1"/><input type="hidden" name="idarea" value="' + id + '" /><div class="fileupload"><input id="fileupl" class="file" type="file" name="img" /><button id="nicebtn" class="wbb-button">' + CURLANG.modal_img_btn + '</button> </div> </form> </div><iframe id="fupload" name="fupload" src="about:blank" frameborder="0" style="width:0px;height:0px;display:none"></iframe></div>'
                            }
                        ],
                        onLoad: this.imgLoadModal,
                        onSubmit: function() {}
                    },
                    transform : {
                        '<img src="{SRC}" />':"[img]{SRC}[/img]",
                        '<img src="{SRC}" width="{WIDTH}" height="{HEIGHT}"/>':"[img width={WIDTH},height={HEIGHT}]{SRC}[/img]"
                    }
                },

Then enable the upload cfg:

imgupload:          true

And use jquery init like:

$(".wysibb-editor").wysibb({img_uploadurl: "{{ system.script_url }}/api.php?iface=front&object=wysibbimage&dir=comment");

Good luck, it work :+1:

AlexeyKosov commented 9 years ago

It doesn't work for "Choose File" button.