zoukankan      html  css  js  c++  java
  • easyui 后台系统引入富文本编辑器的使用

    1.首先,想在项目中引入相关的jar包

     2.html页面中加入相关的引用

    <!-- kindeditor -->
    <script type="text/javascript"
        th:src="@{/lib/kindeditor/kindeditor.js}"></script>
    <script type="text/javascript"
        th:src="@{/lib/kindeditor/lang/zh_CN.js}"></script>
    <th>公告内容:</th>
         <td>
             <textarea id="detail" name="detail" style="100%;height:200px;">
             </textarea>
         </td>

    3.js文件中的方法的处理

    //介绍富文本编辑器
        KindEditor.ready(function(K) {
            introEditor = K.create("#detail", {
                width : 100,
                minHeight : '300px',
                uploadJson : parent.baseUrl + "file/kindeditorUploadImg",
                items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print',
                        'template', 'code', 'cut', 'copy', 'paste', 'plainpaste',
                        'wordpaste', '|', 'justifyleft', 'justifycenter',
                        'justifyright', 'justifyfull', 'insertorderedlist',
                        'insertunorderedlist', 'indent', 'outdent', 'subscript',
                        'superscript', 'clearhtml', 'quickformat', 'selectall',
                        '|', 'formatblock', 'fontname', 'fontsize', '|',
                        'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                        'strikethrough', 'lineheight', 'removeformat', '|',
                        'image', 'flash', 'media', 'insertfile', 'table', 'hr',
                        'pagebreak', 'anchor', 'link', 'unlink', '|', 'about',
                        'fullscreen' ],
            });
        });

    4.富文本编辑器的赋值

       

    introEditor.html(),
    detail : introEditor.html(redner.detail)

    5.富文本编辑器上传图片方法的控制器的具体实现

    @RequestMapping(value = "/kindeditorUploadImg")
        @ResponseBody
        public editorDto imageUeditorStorage(@ModelAttribute("kindUpload") @Valid KindUpload kindUpload)
                throws IOException {
            editorDto dto = new editorDto();
            MultipartFile file = kindUpload.getImgFile();
            if (!file.isEmpty()) {
           //将上传文件的后缀名进行小写处理 String ext
    = StorageUtility.getFileExt(file.getOriginalFilename());

           //创建新的文件的名称 String newFileName
    = System.currentTimeMillis() + ext;

           // File storageFile
    = storageUtility.getNewStorageFile(newFileName, ""); String OriginalFilename = file.getOriginalFilename(); FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(storageFile)); long fileId = AttachmentFileService.createFile(newFileName, OriginalFilename, storageFile.getPath(), "test", 1); dto.setUrl(storageUtility.getFileViewPath(String.valueOf(fileId))); } dto.setError(0); return dto; }
  • 相关阅读:
    整合ssm
    卸载,安装JDK
    基本的Dos命令
    基本的Dos命令
    Typora软件操作教程(简单的编写文档,方便,美观,有效的 HTML 文档)
    Vuex 第6节 module模块组
    Vuex 第5节 actions异步修改状态
    Vuex 第4节 getters计算过滤操作
    Vuex 第3节 Mutations修改状态
    Vuex 第2节 state访问状态对象
  • 原文地址:https://www.cnblogs.com/mr-wuxiansheng/p/6504989.html
Copyright © 2011-2022 走看看