Existe uma maneira de colar imagens dentro do editor de rich text para o meu site wiki corporativo?

Question

Tenho um conjunto de sites de publicação usando o modelo wiki corporativo.Atualmente, se eu tiver um documento do Word que contenha texto e imagens e copiar todo o conteúdo do documento do Word, depois colar o conteúdo dentro do editor de rich text, apenas o texto será copiado (sem as imagens).

Então, minha pergunta é se existe uma maneira de permitir a colagem das imagens dentro do editor de rich text?

Obrigado

Answer 1

Você não pode colar as imagens para as páginas do SharePoint diretamente, as imagens não podem ser processadas como HTML, então não pode ser colada.

Você tem que enviar as imagens no SharePoint, em seguida, insira-o nas páginas / lugares desejados.

ou você pode tentar a 3ª ferramenta festa para isso.

http://www.kwizcom.com/sharepoint-Add-Ons / SharePoint-Clipboard-Manager / Visão Geral /

ou

http://www.telerik.com/products/aspnet-ajax/editor.aspx

Answer 2

Você pode aproveitar a capacidade do navegador de colar imagens codificadas em base64 em conteúdo editável.Mas como o editor do SharePoint remove imagens base64, você pode usar um truque sujo para armazenar o conteúdo da imagem em espaços reservados ocultos que não são removidos e, em seguida, renderizar imagens desses espaços reservados no carregamento da página.

Existem prós (faz o trabalho, é fácil de usar - basta adicionar o script ao seu site) e contras (imagens grandes embutidas, colagem de imagens uma por uma, eventos js adicionais, etc.) desta solução.

Portanto, tente com este javascript (insira-o como código incorporado, na página mestra, etc.) e ele deve funcionar (testado no wiki corporativo do sharepoint 2013, mas deve funcionar com qualquer formulário de edição de conteúdo do sharepoint com alguns ajustes de código).Observe que você deve primeiro definir o ID do seu editor div.

    <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>

Além disso, ele pode ser atualizado para armazenar imagens base64 coladas como arquivos no servidor usando o serviço web do sharepoint Copiar para itens diretamente em javascript (ao colar ou algum evento de pré-salvamento) e depois substituindo base64 pelo nome do arquivo de imagem no servidor.

Answer 3

Eu descobri que poderia usar o editor de lista de discussão para pelo menos inserir-> do computador e usar as ferramentas do editor para manipular as imagens incorporadas no texto.Então você pode cortar e colar de lá para os campos de texto ricos normais da lista do SharePoint.Você nem precisa salvar a postagem da lista de discussão que usou para editar, apenas cancele o post depois de cortar e colar a partir dele.Se você precisar de manipulação de imagem mais sofisticada (como rotação de uma imagem), se você puder enviar e-mail para sua lista de discussão, poderá simplesmente usar seu editor de e-mail do Outlook para compor o texto e as imagens e enviá-lo para essa lista de discussão.