富文本编辑器 markdown_vue富文本编辑器[通俗易懂]

<link rel="stylesheet" href="${pageContext.request.contextPath}/thirdparty/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="${pageContext.request.contextPath}/thirdparty/kindeditor/kindeditor.js"></script>
        <script charset="utf-8" src="${pageContext.request.contextPath}/thirdparty/kindeditor/lang/zh_CN.js"></script>

var editor = KindEditor.create('textarea[name="publishContent"]', {
        uploadJson : '${pageContext.request.contextPath}/upload/uploadKinEditor.action', //插入图片方法
        urlType:"relative",
        allowFileManager : true,
        filterMode:true,
        allowImageUpload: true, //上传图片框本地上传的功能，false为隐藏，默认为true
        allowImageRemote : false, //上传图片框网络图片的功能，false为隐藏，默认为true
        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', '|', 'fullscreen', '/',
                 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
                 'table', 'hr', 'emoticons', 'baidumap', 'link', 'unlink'], //配置编辑工具
        afterBlur: function () {
            this.sync();
        },
        afterCreate: function () {
            this.sync();
        }

    });

@RequestMapping(value = "/uploadKinEditor")
    @ResponseBody
    public Object uploadKinEditor(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String baseUrl="";
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        if(multipartResolver.isMultipart(request)){ //判断request是否有文件上传
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;
            Iterator<String> ite = multiRequest.getFileNames();
            while(ite.hasNext()){
                MultipartFile file = multiRequest.getFile(ite.next());
                byte[] fileByte = null;
                try {
                    fileByte = file.getBytes();
                } catch (IOException e) {
                    e.getStackTrace();
                }
                baseUrl= "data:image/png;base64," + Base64Utils.encode(fileByte).trim();
            }
        }
        JSONObject obj = new JSONObject();
        obj.put("error", 0);
        obj.put("url", baseUrl);
        return obj.toJSONString();
    }

package com.kdgcsoft.power.common.util;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.nio.charset.Charset;

import org.apache.commons.codec.binary.Base64;
import org.apache.commons.io.FileUtils;

/**
 * <p>
 * BASE64编码解码工具包
 * </p>
 * <p>
 * 依赖apache commons
 * </p>
 * 
 * @author IceWee
 * @date 2012-5-19
 * @version 1.0
 */
public class Base64Utils {

    /**
     * <p>
     * BASE64字符串解码为二进制数据
     * </p>
     * 
     * @param base64
     * @return
     * @throws Exception
     */
    public static byte[] decode(String base64) {
        return Base64.decodeBase64(base64.getBytes());
    }
    
    /**
     * <p>
     * BASE64字符串按照指定字符集解码为二进制数据
     * </p>
     * 
     * @param base64
     * @return
     * @throws Exception
     */
    public static byte[] decode(String base64, Charset charset) {
        return Base64.decodeBase64(base64.getBytes(charset));
    }

    /**
     * <p>
     * 二进制数据编码为BASE64字符串
     * </p>
     * 
     * @param bytes
     * @return
     * @throws Exception
     */
    public static String encode(byte[] bytes) {
        return new String(Base64.encodeBase64(bytes));
    }
    
    /**
     * <p>
     * 二进制数据编码为BASE64字符串
     * </p>
     * 
     * @param bytes
     * @return
     * @throws Exception
     */
    public static String encode(byte[] bytes, Charset charset) {
        return new String(Base64.encodeBase64(bytes), charset);
    }


    /**
     * <p>
     * 将文件编码为BASE64字符串
     * </p>
     * <p>
     * 大文件慎用，可能会导致内存溢出
     * </p>
     * 
     * @param filePath
     *            文件绝对路径
     * @return
     * @throws Exception
     */
    public static String encodeFile(String filePath) throws IOException {
        byte[] bytes = fileToByte(filePath);
        return encode(bytes);
    }

    /**
     * <p>
     * BASE64字符串转回文件
     * </p>
     * 
     * @param filePath
     *            文件绝对路径
     * @param base64
     *            编码字符串
     * @throws Exception
     */
    public static void decodeToFile(String filePath, String base64) throws IOException {
        byte[] bytes = decode(base64);
        byteArrayToFile(bytes, filePath);
    }

    /**
     * <p>
     * 文件转换为二进制数组
     * </p>
     * 
     * @param filePath
     *            文件路径
     * @return
     * @throws FileNotFoundException 
     * @throws Exception
     */
    private static byte[] fileToByte(String filePath) throws IOException  {
        return FileUtils.readFileToByteArray(new File(filePath));
    }

    /**
     * <p>
     * 二进制数据写文件
     * </p>
     * 
     * @param bytes
     *            二进制数据
     * @param filePath
     *            文件生成目录
     * @throws IOException 
     */
    public static void byteArrayToFile(byte[] bytes, String filePath) throws IOException {
        FileUtils.writeByteArrayToFile(new File(filePath), bytes);
    }
}

'fontname.fontName' : {
        'SimSun' : '宋体',
        'NSimSun' : '新宋体',
        'FangSong_GB2312' : '仿宋_GB2312',
        'KaiTi_GB2312' : '楷体_GB2312',
        'SimHei' : '黑体',
        'Microsoft YaHei' : '微软雅黑',
        '方正仿宋_GBK' : '方正仿宋_GBK',
        '方正黑体_GBK' : '方正黑体_GBK',
        '方正舒体' : '方正舒体',
        '方正姚体_GBK' : '方正姚体_GBK',
        'Arial' : 'Arial',
        'Arial Black' : 'Arial Black',
        'Times New Roman' : 'Times New Roman',
        'Courier New' : 'Courier New',
        'Tahoma' : 'Tahoma',
        'Verdana' : 'Verdana'
    },

var html = [
            '<div class="ke-inline-block ' + cls + '">',
            (options.target ? '' : '<iframe name="' + target + '" style="display:none;"></iframe>'),
            (options.form ? '<div class="ke-upload-area">' : '<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="' + target + '" action="' + url + '">'),
            '<span class="ke-button-common">',
            hiddenElements.join(''),
            '<input type="button" class="ke-button-common ke-button" value="' + title + '" />',
            '</span>',
            '<input type="file" class="ke-upload-file" name="' + fieldName + '" tabindex="-1" accept="image/*"/>',
            (options.form ? '</div>' : '</form>'),
            '</div>'].join('');