'프로그램 사용/ckeditor(웹에디터)' 카테고리의 글 목록

'프로그램 사용/ckeditor(웹에디터)'에 해당되는 글 6건

2019.04.03 ckeditor full과 standard 그리고 옵션 설정
2019.03.08 ckeditor 모드별 모양
2019.03.07 ckeditor file upload with node.js
2014.07.16 ckeditor / fckeditor?
2013.02.22 ckeditor 사용하기
2011.06.14 fckeditor plugin for squirrelMail

ckeditor full과 standard 그리고 옵션 설정

기존에는 standard로 썼는데, standard는 문단 정렬 기능이 먹지 않아서 full로 설정해주어야 적용이 된다.

The following distributions (see comparison table) are available:

basic - the Basic preset
standard - the Standard preset
standard-all - the Standard preset together with all other plugins created by CKSource*
full - the Full preset
full-all - the Full preset together with all other plugins created by CKSource*

[링크 : https://cdn.ckeditor.com/]

옵션을 만들어주는 사이트

기본은 아래와 같이 생성해주는데

CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'about', items: [ 'About' ] }
];
};

코드에서 쓰려면 config. 이후를 붙이고 수정하면된다.

CKEDITOR.replace('ckeditor4', {

uploadUrl: '/uploader',

toolbar : [
{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'about', items: [ 'About' ] }
]

});

</script>

[링크 : https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic]

저작자표시

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor 모드별 모양 (0)	2019.03.08
ckeditor file upload with node.js (0)	2019.03.07
ckeditor / fckeditor? (0)	2014.07.16
ckeditor 사용하기 (0)	2013.02.22
fckeditor plugin for squirrelMail (0)	2011.06.14

Posted by 구차니

ckeditor 모드별 모양

클래식

상단에 툴바 항상 나오고 그 바로 아래에 수정할 영역이 나옴

인라인

그냥 일반 문장 같은데

클릭하면 편집 가능하도록 변경됨

벌룬

인라인과 유사한데 드래그로 선택해야 툴바가 풍선으로 뜸

벌룬블록

선택영역에 따라 문단과 블록에 따라 서로 다른 툴바가 뜸

디커플러

툴바와 편집창을 분리해서 쓸 수 있다.

(문단별로 편집창을 띄우되 가장 위에 고정하는 식으로 운영 가능, 스크롤 할때 상단에 툴바 고정용으로 쓸 듯)

[링크 : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html]

저작자표시

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor full과 standard 그리고 옵션 설정 (0)	2019.04.03
ckeditor file upload with node.js (0)	2019.03.07
ckeditor / fckeditor? (0)	2014.07.16
ckeditor 사용하기 (0)	2013.02.22
fckeditor plugin for squirrelMail (0)	2011.06.14

Posted by 구차니

ckeditor file upload with node.js

-

[링크 : https://gist.github.com/RedactedProfile/ac48c270d2bbe739f9f3]

[링크 : https://ckeditor.com/docs/ckeditor4/latest/examples/fileupload.html]

[링크 : https://hashcode.co.kr/questions/3187/nodejs-ckeditor로-이미지를-올리기]

[링크 : https://www.npmjs.com/package/ckeditor]

+

2019.03.08

cke4_node.zip

ckeditor 4.11 을 기준으로 만든거고, 5.x 대에도 가능한지는 아직 테스트 하지 못함

express -e

를 이용하여 ejs로 express-generator로 생성후 아래의 파일을 수정함

index.js

var express = require('express');
var path = require('path');
var uuid = require('uuidv4');
var router = express.Router();

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/uploader', multipartMiddleware, function (req, res) {
  var fs = require('fs');

  var orifilepath = req.files.upload.path;
  var orifilename = req.files.upload.name;
  var srvfilename = uuid() + path.extname(orifilename);
  fs.readFile(orifilepath, function (err, data) {
    var newPath = __dirname + '/../public/uploads/' + srvfilename;
    fs.writeFile(newPath, data, function (err) {
      if (err) console.log({ err: err });
      else {
        html = "{\"filename\" : \"" + orifilename + "\", \"uploaded\" : 1, \"url\": \"/uploads/" + srvfilename + "\"}"
        console.log(html)
        res.send(html);
      }
    });
  });
});

module.exports = router;

index.ejs

4.11과 4.9 둘 다 작동되는 것 확인

<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <!-- <script src="https://cdn.ckeditor.com/4.11.3/standard/ckeditor.js"></script> -->
  <script src="https://cdn.ckeditor.com/4.9.0/standard/ckeditor.js"></script>
</head>

<body>
  <h1><%= title %></h1>
  <p>Welcome to <%= title %></p>

  <form>
    <textarea id="ckeditor" name="content"></textarea>
  </form>

  <script>
    CKEDITOR.replace('ckeditor', {
      uploadUrl: '/uploader'
    });
  </script>
</body>

</html>

+

ckeditor 5 기준. 4랑 비교해서 에디터 생성하는 방법을 제외하면 동일하게 작동한다.

index.ejs

<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js"></script>
</head>

<body>
  <h1><%= title %></h1>
  <p>Welcome to <%= title %></p>

  <form>
    <textarea id="ckeditor" name="content"></textarea>
  </form>

  <script>
    ClassicEditor
      .create(document.querySelector('#ckeditor'), {
        language: 'ko',
        ckfinder: {
          uploadUrl: '/uploader'
        }
      })
      .catch(error => {
        console.error(error);
      });
  </script>
</body>

</html>

[링크 : https://okky.kr/article/461219]

[링크 : https://www.cikorea.net/bbs/view/qna?idx=19725&view_category=&lists_style=]

[링크 : https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html]

[링크 : https://stackoverflow.com/questions/17699763/ckeditor-using-and-integration-in-node-js-web-page]

[링크 : https://stackoverflow.com/questions/21378630/node-js-sails-js-wysiwyg-editor-images]

[링크 : https://github.com/sca-/sails-ckeditor-sample]

저작자표시

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor full과 standard 그리고 옵션 설정 (0)	2019.04.03
ckeditor 모드별 모양 (0)	2019.03.08
ckeditor / fckeditor? (0)	2014.07.16
ckeditor 사용하기 (0)	2013.02.22
fckeditor plugin for squirrelMail (0)	2011.06.14

Posted by 구차니

ckeditor / fckeditor?

ckeditor와 fckeditor의 차이점은 모르겠지만..
결론은 FCKeidotr는 이전의 CKEditor 였던 2 버전 이후로 단종되었고 버전 3부터 시작되었다.. 인가?

What is FCKeditor and how does it compare to CKEditor?

FCKeditor, discontinued after version 2, is the previous version of CKEditor, which started with version 3. The new CKEditor was redesigned from the ground up, offering more features, enhanced security and better integration.

Should I upgrade from FCKeditor?

Yes. FCKeditor was discontinued in 2010. Not only does our new version offer more features, it is also more stable and secure. The CKEditor core team has stopped supporting FCKeditor so each new browser update increases the risk of problems with it. It is strongly advised you switch to the latest version of CKEditor.

[링크 : http://ckeditor.com/support/faq/fckeditor]

2008년 글인데.. 그 동안 많이 나아졌겠지만..
ckeditor는 ckfinder를 같이 써줘야 할 듯..
[링크 : http://www.yunsobi.com/blog/392]

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor full과 standard 그리고 옵션 설정 (0)	2019.04.03
ckeditor 모드별 모양 (0)	2019.03.08
ckeditor file upload with node.js (0)	2019.03.07
ckeditor 사용하기 (0)	2013.02.22
fckeditor plugin for squirrelMail (0)	2011.06.14

Posted by 구차니

ckeditor 사용하기

form과 textarea를 이용하는 ckeditor 사용예제이다.

$ cat test.php

<html>

<head>

</head>

<body>

<?php

include "./test.html"

?>

</textarea>

</form>

</body>

</html>

$ cat save.php

<html>

<head>

</head>

<?php

$fp = fopen('./test.html','w');

echo $fp;

$ret = fwrite($fp, $_POST['text1']);

echo $ret;

fclose($fp);

?>

</html>

[링크 : http://stackoverflow.com/questions/6545521/ckeditor-how-do-i-save-to-the-web-page-i-am-editing]

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor full과 standard 그리고 옵션 설정 (0)	2019.04.03
ckeditor 모드별 모양 (0)	2019.03.08
ckeditor file upload with node.js (0)	2019.03.07
ckeditor / fckeditor? (0)	2014.07.16
fckeditor plugin for squirrelMail (0)	2011.06.14

Posted by 구차니

fckeditor plugin for squirrelMail

회사에서 사용중인 웹 메일 호스팅 가격을 연장하려고 가격을 뽑아보니 대략 좌절 -_-
그런 이유로 공개되어 있는 웹 메일이 생각이 나서 fckeditor를 지원안하나? 검색을 해보니
당연히(!) plugin 형태로 지원을 하고 있다.

[링크 : http://squirrelmail.org/plugin_view.php?id=209]
[링크 : http://squirrelmail.org]

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor full과 standard 그리고 옵션 설정 (0)	2019.04.03
ckeditor 모드별 모양 (0)	2019.03.08
ckeditor file upload with node.js (0)	2019.03.07
ckeditor / fckeditor? (0)	2014.07.16
ckeditor 사용하기 (0)	2013.02.22

Posted by 구차니

구차니의 잡동사니 모음

'프로그램 사용/ckeditor(웹에디터)'에 해당되는 글 6건

ckeditor full과 standard 그리고 옵션 설정

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor 모드별 모양

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor file upload with node.js

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor / fckeditor?

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor 사용하기

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

fckeditor plugin for squirrelMail

'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

티스토리툴바