富文本编辑框之不可编辑

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lp15203883326/article/details/83007102

样式：(用于过滤图文中的图片替换url)

前端代码： 

                            <!-- 加载编辑器的容器 -->
                            <div class="form-group">
                                <label for="container"  for="container">文 章 内 容</label>
                                <div>
                                    <div id="container"
                                         style="min-height: 100px; border: 2px solid #d6dbdc;">
                                    </div>
                                </div>
                            </div>
                            <!-- 文章 start -->
                            <div class="form-group hidden">
                                <div class="col-sm-offset-4 col-sm-6">
                                    <input type="text" id="content" name="content" v-model="content"/>
                                </div>
                            </div>

JS代码：（初始化这个编辑框）

    $(document).ready(function () {
        initEditableDiv("container");
    });

前端用了vue.js

所以在js想要获取content中的内容可以这样：

$(document).ready(function () {
    initEditableDiv("container");
});

核心JS部分：

因为在粘贴的时候可以触发这个事件的发生，主要作用是对文章内的图片进行上传替换链接

onInnerContent方法是我用在手动触发事件的时候发生（我是在后台填充前端的content的时候进行触发的）

var _editor_paste_content_div_id;
var _editor_paste_block_page_div_obj;
function blockPage(isBlock) {
    if (!_editor_paste_block_page_div_obj || _editor_paste_block_page_div_obj.length==0) {
        _editor_paste_block_page_div_obj=$('<div style="display:none;text-align:center;position:fixed;left:0px;top:0px;height:100%;width:100%;background-color:rgba(0,0,0,0.5);"></div>');
        $('<div style="font-size:20px;color:#ffffff;margin-top:200px;">正在处理中...</div>').appendTo(_editor_paste_block_page_div_obj);
        _editor_paste_block_page_div_obj.appendTo(window.top.document.body);
    }
    if (isBlock) {
        $(_editor_paste_block_page_div_obj).css('display','block');
    } else {
        $(_editor_paste_block_page_div_obj).css('display','none');
    }
}
function onContentPaste() {
    blockPage(true);
    window.setTimeout(processDivContent, 3000);
}
function processDivContent() {
    $("#"+_editor_paste_content_div_id+" section").each(function(){
        // 一些样式修改
        $(this).removeAttr("class","");
        $(this).css("position","");
        $(this).css("box-sizing","border-box");
    });
    var cdnMatch = /^(http:|https:)?\/\/(images|images0)\.zaijiawan\.com\/.*$/;

    $("img").each(function (i, e) {
        // 处理图片链接
        var id = e.id;
        var imgUrl = e.src;
        if (!id) {
            id = "_editor_pasted_img_" + i;
            e.id = id;
        }
        if (imgUrl && !cdnMatch.test(imgUrl)) {
            $.getJSON("../../WeChatMaterial/uploadUrl", {
                "imgUrl": imgUrl,
                "useFor":"material"
            }, function (data) {
                if (data && data.result === "ok") {
                    var ee = $("#" + id);
                    ee.attr("src", data.url);

                }
            });
        }
    });
    blockPage(false);
}
function initEditableDiv(divid) {
    _editor_paste_content_div_id = divid;
    var d = $("#" + _editor_paste_content_div_id);
    if (d && d.length > 0) {
        d.attr("contenteditable", "true");
        d.attr("onpaste", "onContentPaste()");

    }

}

function onInnerContent(divid) {
    _editor_inner_content_div_id = divid;
    blockPage(true);
    window.setTimeout(processInnerDivContent, 3000);
}
function processInnerDivContent() {

    $("#"+_editor_inner_content_div_id+" section").each(function(){
        // 一些样式修改
        $(this).removeAttr("class","");
        $(this).css("position","");
        $(this).css("box-sizing","border-box");
    });
    var cdnMatch = /^(http:|https:)?\/\/(images|images0)\.zaijiawan\.com\/.*$/;

    $("#"+_editor_inner_content_div_id+" img").each(function (i, e) {
        // 处理图片链接
        var id = e.id;
        var imgUrl;
        if(typeof(e.getAttribute("data-src"))!="undefined"){
             imgUrl = e.getAttribute("data-src");
             e.removeAttribute("data-src");
        }else {
            imgUrl = e.src;
        }
        if (!id) {
            id = "_editor_inner_img_" + i;
            e.id = id;
        }
        if (imgUrl && !cdnMatch.test(imgUrl)) {
            $.getJSON("../../WeChatMaterial/uploadUrl", {
                "imgUrl": imgUrl,
                "useFor":"material"
            }, function (data) {
                if (data && data.result === "ok") {
                    var ee = $("#" + id);
                        ee.attr("src", data.url);

                }
            });
        }
    });
    blockPage(false);
}

后台代码不贴了，因为我是将其上传到了OSS