首页  编辑  

SharePoint中允许直接粘贴图片

Tags: /计算机文档/软件应用技巧/   Date Created:
office integration - Is there a way to paste pictures inside the rich text editor, for my enterprise wiki site? - SharePoint Stack Exchange
Sharepoint中,要嵌入图片,是十分痛苦的事情,不能直接粘贴图片,只能保存文件、上传文件,插入方式嵌入图片,十分痛苦。
网络上也有许多呼声,但最终都被傻逼微软打败了。把SharePoint开发人员拉出去枪毙1万次都不为过!
SharePoint sucks! SharePoint sucks! SharePoint sucks! SharePoint sucks!

下面的方法,是在模板页面开头添加一段JS代码,需要修改母版页(Master Page),下面是Sharepoint.com online的网站修改方法,仅供参考。
修改模板页面方法:
  • 打开站点设置 Site Settings(需要相应的权限)
  • 点击 【网站集管理】,【网站集功能】,激活【SharePoint Server发布基础架构】
    Active "SharePoint Server Publishing Infrastructure" in Site collection Features
    a. Click on "Site collection features" under "Site Collection Administration"
    b. Activate "SharePoint Server Publishing Infrastructure" feature


  • 然后激活 【SharePoint Server发布】功能:
    Activate "SharePoint Server Publishing" feature
  • 激活后,回到站点设置,在外观下面,可以看到Master page了,

自定义SharePoint,需要安装SharePoint Desinger 2013
用SharePoint Desinger 2013打开网站,然后找到母版页,settle.master,修改其中内容即可。
修改Master Page(母版页),添加下面的代码。下面是核心代码,原理是把粘贴后的base64的图片,通过JS代码转成span.imgrefs属性,从而避免保存的时候,被SharePoint去掉粘贴的图片:
<script type='text/javascript'>

    //set your editable content (editor) client id here:
    var editorClientId = "ctl00_PlaceHolderMain_PageContent_RichHtmlField_displayContent"

    _spBodyOnLoadFunctionNames.push("renderImages()");

    function getImagesByAlt(alt) {
        var allImages = document.getElementsByTagName("img");
        var images = [];
        for (var i = 0, max = allImages.length; i < max; ++i)
            if (allImages[i].alt == alt)
                images.push(allImages[i]);
        return images;
    }
    //if page is in edit mode, delay for other scripts to finish first
    function renderImages() {
        if (window.location.href.indexOf("ControlMode=Edit") > -1)
            setTimeout(function () { renderImagesStart(); }, 1500);
        else
            renderImagesStart();
    }
    //apply data-imgrefs attribute to stripped image contents
    function renderImagesStart() {
        var allSpans = document.getElementsByClassName("imgrefs");
        for (var i = 0, max = allSpans.length; i < max; i++) {
            var img = getImagesByAlt(allSpans[i].title)[0];
            if (img != null)
                img.src = "data:image/gif;base64," + allSpans[i].getAttribute("data-imgref");
        }
    }
    //chrome paste handler
    var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;
    var loadImage = function (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var img = document.createElement('img');
            img.src = e.target.result;

            var range = window.getSelection().getRangeAt(0);
            range.deleteContents();
            range.insertNode(img);
        };
        reader.readAsDataURL(file);
    };
    document.onpaste = function (e) {
        var items = e.clipboardData.items;
        for (var i = 0; i < items.length; i++) {
            if (IMAGE_MIME_REGEX.test(items[i].type)) {
                loadImage(items[i].getAsFile());
                return;
            }
        }
    }
    //if page is in edit mode apply onblur (leave editor) event to hide images base64 content to spans
    //class name, data- and alt attributes are used because sharepoint doesn't strip them
    if (window.location.href.indexOf("ControlMode=Edit") > -1)
        document.getElementById(editorClientId).onblur = function () {
            var editor = document.getElementById(editorClientId);
            var childNodes = editor.childNodes;
            //remove spans
            for (var i = childNodes.length - 1; i >= 0; i--) {
                var childNode = childNodes[i];
                if (childNode.className == 'imgrefs')
                    childNode.parentNode.removeChild(childNode);
            }
            var imgs = editor.getElementsByTagName("img");
            var id = 0;
            //for each base64 image: hide its content to span data-imgref attribute and append span to editor
            for (var i = 0, max = imgs.length; i < max; i++) {
                var img = imgs[i];
                if (img.src.indexOf("data:image") > -1) {
                    id += 1;
                    img.alt = id & 0xffff;
                    img.alt = 'img' + img.alt;
                    var src = img.src.replace('data:image/gif;base64,', '').replace('data:image/png;base64,', '').replace('data:image/jpg;base64,', '');
                    var span = document.createElement("span");
                    span.className = "imgrefs";
                    span.title = img.alt;
                    span.setAttribute("data-imgref", src);
                    span.innerText = '';
                    editor.appendChild(span);
                }
            }
        }

</script>
修改母版页的方法,参考: 
Apply custom master page for Modern SharePoint Site in SharePoint online - Sudheer SharePoint Solutions (sharepointsolutions-sudheer.blogspot.com)
Customizing "modern" team sites | Microsoft Learn
Create A Custom Master Page In HTML For SharePoint Online (c-sharpcorner.com)
sharepoint online - 自定义新式/通信网站上的母版页 - SharePoint Stack Exchange