office integration - Is there a way to paste pictures inside the rich text editor, for my enterprise wiki site? - SharePoint Stack ExchangeSharepoint中,要嵌入图片,是十分痛苦的事情,不能直接粘贴图片,只能保存文件、上传文件,插入方式嵌入图片,十分痛苦。
网络上也有许多呼声,但最终都被傻逼微软打败了。把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 Desinger 2013打开网站,然后找到母版页,settle.master,修改其中内容即可。
修改Master Page(母版页),添加下面的代码。下面是核心代码,原理是把粘贴后的base64的图片,通过JS代码转成span.imgrefs属性,从而避免保存的时候,被SharePoint去掉粘贴的图片:
<script type='text/javascript'>
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;
}
function renderImages() {
if (window.location.href.indexOf("ControlMode=Edit") > -1)
setTimeout(function () { renderImagesStart(); }, 1500);
else
renderImagesStart();
}
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");
}
}
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 (window.location.href.indexOf("ControlMode=Edit") > -1)
document.getElementById(editorClientId).onblur = function () {
var editor = document.getElementById(editorClientId);
var childNodes = editor.childNodes;
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 (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>
修改母版页的方法,参考: