Web file manager + CKeditor + Spring MVC project

Question

I am working on spring mvc project, I need to add a web text editor (support image upload)

I started with CKeditor and now I want to work on upload image part.

<script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

  <textarea name="editor1"></textarea>

  <script>
    CKEDITOR.replace( 'editor1', {
      filebrowserBrowseUrl: '/???',
      filebrowserImageBrowseUrl: '???',
      filebrowserUploadUrl: '???',
      filebrowserImageUploadUrl: '???'
    } );
  </script>

I need some free, open source tools like CKfinder to add this feature, and if there is no tools can you give me any idea to get this done even with another editor.

Your help is very appreciated.

score 0 · Answer 1 · answered May 23 '17 at 17:34

There is open source project called TinyMCE it supporting many options .I used it in my Spring MVC project it's working well.

This code for modifying the text editor :

tinymce.init({
/* replace textarea having class .tinymce with tinymce editor */
selector: "#mytextarea",

/* theme of the editor */
theme: "modern",
skin: "lightgray",

/* width and height of the editor */
width: "auto",
height: 200,

/* display statusbar */
statubar: true,

/* hide menubar */
menubar: false,

/* plugin */
plugins: [
    "advlist autolink link image lists charmap preview hr anchor pagebreak",
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
    "save table contextmenu directionality emoticons template paste textcolor codesample spellchecker"
],

/* toolbar */
toolbar: "insertfile undo redo | styleselect | bold italic | link image | codesample | preview media fullpage | backcolor emoticons spellchecker",

/*set spell_checker language*/
spellchecker_language: 'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr_FR,' + 'German=de,Italian=it,Polish=pl,Portuguese=pt_BR,Spanish=es,Swedish=sv',

code_dialog_width: 700,

/* style */
style_formats: [
    {title: "Headers", items: [
        {title: "Header 1", format: "h1"},
        {title: "Header 2", format: "h2"},
        {title: "Header 3", format: "h3"},
        {title: "Header 4", format: "h4"},
        {title: "Header 5", format: "h5"},
        {title: "Header 6", format: "h6"}
    ]},
    {title: "Inline", items: [
        {title: "Bold", icon: "bold", format: "bold"},
        {title: "Italic", icon: "italic", format: "italic"},
        {title: "Underline", icon: "underline", format: "underline"},
        {title: "Strikethrough", icon: "strikethrough", format: "strikethrough"},
        {title: "Superscript", icon: "superscript", format: "superscript"},
        {title: "Subscript", icon: "subscript", format: "subscript"},
        {title: "Code", icon: "code", format: "code"}
    ]},
    {title: "Blocks", items: [
        {title: "Paragraph", format: "p"},
        {title: "Blockquote", format: "blockquote"},
        {title: "Div", format: "div"},
        {title: "Pre", format: "pre"}
    ]},
    {title: "Alignment", items: [
        {title: "Left", icon: "alignleft", format: "alignleft"},
        {title: "Center", icon: "aligncenter", format: "aligncenter"},
        {title: "Right", icon: "alignright", format: "alignright"},
        {title: "Justify", icon: "alignjustify", format: "alignjustify"}
    ]}
]

});

In your view page use cdn link like :

<script type="text/javascript" src='//cloud.tinymce.com/stable/tinymce.min.js?apiKey=l03xfookfa0t5658pstpggnkx50dqe'></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/init-tinymce.js"></script>

<textarea id="mytextarea" name="ANSWER">Write your answer here!</textarea>

For more options and informations visit TinyMCE I hope this help you.

Web file manager + CKeditor + Spring MVC project

1 Answers1