ckeditor의 플러그인 simpleuploads > 시즌3 질문과 답변

홍인님 자세히는 모르겠지만,

extraPlugins 만 지정하는 것이 아니라 ckfinder 경로도 있어야 하는 듯 보입니다.

// Create a classic editor using inline configuration
var uploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload';

var config = {
    customConfig : '',
    // Add the required plugin
    extraPlugins : 'simpleuploads',
    // Required config to tell CKEditor what's the script that will process uploads
    filebrowserUploadUrl : uploadUrl + '&type=Files',
    filebrowserImageUploadUrl : uploadUrl + '&type=Images',
    toolbar :	// Sample toolbar
    [
        { name: 'document',    items : [ 'Source' ] },
        { name: 'clipboard',   items : [ 'Cut','Copy','Paste','-','Undo','Redo' ] },
        { name: 'basicstyles', items : [ 'Bold','Italic' ] },
        { name: 'insert',      items : [ 'Link', 'Image', 'addFile', 'addImage' ] },
        { name: 'tools',       items : [ 'Maximize' ] }
    ],

    // Define the file extensions (whitelist) that are allowed to upload.
    // This is a client side check. You must do the same validation on your server.
    // By default CKEditor doesn't implement this kind of check, so users can waste time and bandwith uploading files only to get an error message later
    // So setting this correctly can help your users greatly
    simpleuploads_acceptedExtensions : '7z|avi|csv|doc|docx|flv|gif|gz|gzip|jpeg|jpg|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|rar|rtf|tar|tgz|txt|vsd|wav|wma|wmv|xls|xml|zip'
};

CKEDITOR.replace( 'editor1', config );

위 소스는 simpleuploads의 데모 페이지에서 발췌 했습니다.
데모페이지 URL : http://www.martinezdelizarrondo.com/ckplugins/simpleuploads.demo4/

확인 검토해 보세요.
감사합니다.

답변 감사합니다.
함께 동봉된 설치메뉴얼에는 추가만 하면 되는 것으로 되었고 이전에도 그렇게 사용했었습니다.
extraplugins에 추가를 하면 ckeditor 메뉴에 아이콘이 나타나야하는데 아이콘이 보이질 않습니다.
아이콘만 보이게 하면 될 것 같기도 하는데 방법을 잘 모르겠습니다.

Installation

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this
 
ckeditor\
...
images\
lang\
plugins\
...
simpleuploads\
plugin.js
docs\
Install.html
icons\
lang\
...
skins\
themes\


2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file:
config.extraPlugins='simpleuploads';
If you are already using other additional plugins, then you must have a single extraPlugins statements with all the plugins separated by commas: config.extraPlugins='confighelper,simpleuploads';
If you have used previously the ImagePaste plugin to test if this one will work, then remember to remove it from the extraPlugins entry.

3. Configuration

Please, refer to the SimpleUploads page in my blog as well as related posts to find further info, examples and updates

You can find all the configuration options as well as events, etc... documented at the end of the plugin.js in JSDoc format

You have to configure the filebrowserImageUploadUrl and filebrowserUploadUrl entries as you might have already done to allow the user to upload files and images. You can use this basic sample if you want to use some existing code.

The goal is to send a response like this (using the proper parameters for $funcNum and $url):
<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>

Since 4.2.5 it's possible to embed the files as base64 data: URLs if the filebrowserUploadUrl is set to "base64". You must be very careful about using this option: CKEditor can choke on the content if the user tries to add big files, data processing will be slower, you should extract the embedded files when the user saves the data because otherwise the visitors to the page will have a worse experience due to the lack of caching and parallel download of resources.

If you're using Liferay, check these detailed instructions

Since 2.7 it's possible to specify the shadows (or whatever CSS effects that you prefer) to use while a file is dragged over the page and an editor.
 The plugin detects those situations and adds/removes the "SimpleUploadsOverEditor" and "SimpleUploadsOverContainer" classes.
 Here "container" refers to the whole CKEditor including toolbar and whatever is part of the UI. This is always an element in the main page, so you can override it also in the page where you're using CKEditor (keep in mind that the plugin might add the rule defined in the configuration after your styles, so check the priority of the CSS rules if you can't get it to work that way.
 This is the default value:
CKEDITOR.config.simpleuploads_containerover = 'box-shadow: 0 0 10px 1px #99DD99 !important;'
Important: the config is picked from CKEDITOR.config, this is a setting shared by all the editor instances. If you want to specify different settings for each editor container you must do it in your page.
 ex: #cke_editor1.SimpleUploadsOverContainer {
box-shadow: 0 0 10px 1px #99FF99;
}
#cke_editor2.SimpleUploadsOverContainer {
border:2px solid black; // be careful, styling the container can be tricky to get a good efect
}

The second class is used when the user drags over an editor, in this case the behavior is different between CKEditor 3 and 4. In CKEditor 3 we're always using an iframe so this setting can be specified for each instance, but in CKEditor 4 due to the introduction of inline editing they've changed the way that addCss works so in a similar way to the previous setting this value is the same for all the instances, but you can easily override it in the styles of your page.
 Default value: CKEDITOR.config.simpleuploads_editorover = 'box-shadow: 0 0 10px 1px #999999 inset !important;'
You can add different configuration in the config.contentsCss file, or in v4 inline mode in the page itself: // for v4 inline
#cke_editor1.SimpleUploadsOverEditor {
box-shadow: 0 0 10px 1px #99FF99;
}
#cke_editor2.SimpleUploadsOverEditor {
background-color: green;
}



Since 3.0 there are two buttons that can be used to provide a single click to launch the file picker and add a file or image to the document.
 The name of such buttons are "addFile" and "addImage" if you want to add them to your toolbar.
 If you use CKEditor 4 they will be added automatically to the "insert" toolbar, if you don't want one or either of them, you can specify those names in a "removeButtons" entry in your config file:
config.removeButtons = "addFile"; // Removes the "add files" button and leaves the one to add images.



These buttons are available for all the browsers, including IE8 and IE9 but in this case it's using a trick to allow the single click browse and upload so it might fail in some environments (I guess so, but I have no such data). I might try to fix such problems if you report back to me, but you must realize that I'm already forzing IE to work in an unexpected way.
 Anyway, as usual with my plugins, IE6 and IE7 are not supported, nor pages in Quirks mode. It might work, but if it fails I can't try to fix things when the solution is to upgrade to a current browser or make your pages compliant with the standards.

Since 4.1 you can opt to always use the plain text upload instead of the image preview with the grayscale by setting the global option simpleuploads_hideImageProgress to true
CKEDITOR.config.simpleuploads_hideImageProgress = true

In 4.2 there are two new properties:

CKEDITOR.config.simpleuploads_convertBmp = true
Turns selected bmp images to png before they are uploaded to the server (you must add the "bmp" to the list of allowed extensions)
 The simpleuploads_maximumDimensions option allows to define an object that specifies the maximum dimensions in pixels for uploaded images CKEDITOR.config.simpleuploads_maximumDimensions = {width:500, height:400}

홍인님..
config.js파일을 열어서 아래와 같이 CODESNIPPET  소스를 주석처리 해 보시겠어요?

	// CKEDITOR PLUGINS LOADING
	config.extraPlugins = 'pbckcode, simpleuploads'; // add other plugins here (comma separated)

	// CODESNIPPET SETTING
	//config.extraPlugins = 'codesnippet';
	//config.codeSnippet_theme = 'tomorrow-night-bright';

해당 유료 플러그인을 사용해 본 것이 아니기에 유추해 본 것이오니 감안하셔서 적용해 보시고 피드백 부탁드립니다.
감사합니다.

codesnippet을 주석처리하니 아이콘이 나타나고 사진도 잘 올라갑니다.
그런데 두군데 모두 simpleuploads 를 기입해줘도 마찬가지로 됩니다.
어떤 차이가 나는건가요?

동일한 변수를 설정해서 그런 것으로 유추했는데요.
이미 위쪽에서 정의한 config.extraPlugins 변수를 바로 아래에서 재정의를 해서 위쪽에서 정의된 simpleuploads 플러그인이 적용이 안된 것으로 파악했습니다.
두군데 다 적용하게 되면 최종 아래쪽에서 정의한 config.extraPlugins 가 적용이 될테니 정상적으로 적용이 될 거구요.
홍인님 사이트를 고려해 볼때, codesnippet은 사용하지 않아도 될 것으로 간주하여 아래쪽을 주석처리한 거예요.
해결 되었으니 다행입니다.
감사합니다. ^^