Question

我正在开发spring mvc项目，我需要添加一个web文本编辑器（支持图片上传）

我从CKeditor开始，现在我想处理上传图片部分。

<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>

我需要一些像CKfinder这样的免费开源工具来添加这个功能，如果没有工具，你可以给我任何想法，即使用另一个编辑器也可以完成。

非常感谢您的帮助。

Answer 1

有一个名为TinyMCE的开源项目它支持许多选项。我在我的Spring MVC项目中使用它，它运行良好。

此代码用于修改文本编辑器：

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"}
    ]}
]

}）;

在您的视图页面中使用cdn link，如：

<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>

有关更多选项和信息，请访问TinyMCE 我希望这对你有帮助。

Web文件管理器+ CKeditor + Spring MVC项目

1 个答案: