질문과 답변

최근본상품
TOP
DOWN

질문과 답변

ckeditor의 플러그인 simpleuploads

0
0
총 채택 포인트 100 포인트
채택된 회원에게 주는 후원 포인트 80 포인트
채택 후 작성자(홍인) 회수 포인트 20 포인트

본문

ckeditor의 플러그인 simpleuploads 를 사용 중입니다.

게시판에 글을 적을 때 편리하게 사진을 올리는 플러그인이며 유료입니다.

이윰빌더 2를 사용할 때는 잘 되었었는데 빌더3으로 옮긴 후 작동이 되질 않습니다.

ckeditor는 이윰사이트자료실에서 다운 받아 사용하고 있고요.

이 플러그인을 사용하기 위해서는 플러그인을 ckeditor plugins 디렉토리에 카피한 후

ckeditor의 config.js 내에 아래와 같이 추가만하면 작동되는데 되질 않습니다.

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

혹시 이 플러그인을 사용하시는 분이 계시면 도움 부탁드립니다.

- 홍인 - 회원등급 : 지상계 / Level 15
포인트 1,354
경험치 22,651
[레벨 15] - 진행률 56%
- 가입일 : 2015-03-01 13:47:50
- 서명 : 미입력
- 자기소개 : 미입력

댓글목록 5

이윰IN님의 댓글

이윰IN 2017.11.02 15:22

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

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/

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

축하합니다. 첫댓글 포인트 26포인트를 획득하였습니다.

홍인님의 댓글

홍인 2017.11.02 16:58

답변 감사합니다.
함께 동봉된 설치메뉴얼에는 추가만 하면 되는 것으로 되었고 이전에도 그렇게 사용했었습니다.
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}

이윰IN님의 댓글

채택
이윰IN 2017.11.02 17:10

홍인님..
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';


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

홍인님의 댓글

홍인 2017.11.02 17:32

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

이윰IN님의 댓글

이윰IN 2017.11.02 17:36

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

질문과 답변 (채택기능) 게시판이 신설되었습니다.
질문과 답변 (구) 게시판은 글쓰기가 제한되오니 착오 없으시길 바랍니다. (댓글 및 조회는 여전히 가능합니다.)
채택포인트 : 최소 10 포인트 ~ 최대 1,000 포인트 설정하실 수 있습니다.
빠른 답변을 원하신다면 채택포인트를 높게 설정해 보세요. ^^

전체 651 건 - 1 페이지
제목
미해결
0
0p
포운한 2019.03.11
미해결
0
10p
진호 2024.04.25
미해결
0
0p
포운한 2019.03.09
미해결
0
0p
포운한 2019.03.08
미해결
0
500p
장유나 2018.10.05
미해결
0
10p
인졀미 2018.08.13
미해결
2
0p
cosmos 2018.08.10
미해결
0
10p
ha 2018.08.09
미해결
1
10p
히스토리 2018.08.08
미해결
0
10p
비사소 2018.08.07
미해결
3
10p
비사소 2018.08.05
미해결
0
100p
슈프림롤업 2018.08.05
미해결
1
10p
우주선생 2018.08.03
해결
1
10p
ha 2018.08.03
미해결
2
10p
이윰초보임당 2018.08.01