Есть ли способ вставить картинки внутри богатого текстового редактора, для моего предприятия Wiki Site?

Question

У меня есть коллекция сайта публикации с использованием шаблона предприятия Wiki.В настоящее время, если у меня есть документ Word, который содержит текст и изображения, и я копирую все содержимое документа Word, после этого я вставляю содержимое внутри богатого текстового редактора, то только текст будет скопирован (без изображений).

Итак, мой вопрос, если есть способ разрешить вставка фотографии внутри богатого текстового редактора?

Спасибо

Answer 1

Вы не можете напрямую вставить изображения на страницы SharePoint напрямую, изображения не могут быть отображены в виде HTML, поэтому не может быть вставлена.

Вы должны загружать изображения в SharePoint, затем вставьте его на страницы / места, которые вы хотите.

Или вы можете попробовать 3-й инструмент для вечеринок для этого.

http://www.kwizcom.com/sharepoint-Add-ons / SharePoint - Clipboard-Manager / Обзор /

или

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

Answer 2

Вы можете воспользоваться преимуществами возможностей браузеров для вставки базовых изображений кодированных изображений в редактируемый контент. Но поскольку редактор SharePoint понижает Base64 изображения, вы можете использовать грязный трюк для хранения содержимого изображения в скрытые заполнители, которые не раздеваются, а затем рендеры обратно из этих заполнителей на странице нагрузки.

Есть плюсы (это делает работу, ее простой в использовании - просто добавьте скрипт на ваш сайт) и минусы (большие встроенные изображения, вставка изображений один за другим, дополнительные события JS и т. Д.) этого решения. .

Так что попробуйте с этим JavaScript (вставьте его в качестве встроенного кода, на главную страницу и т. Д.), И он должен просто работать (проверено в SharePoint 2013 Enterprise Wiki, но он должен работать с любой формой редактирования контента 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>

.

Дополнительно его можно обновить для хранения изображений Base 64 в качестве файлов на сервере, используя веб-сервис SharePoint COPILIINTOITEMS непосредственно в JavaScript (на пасте или некоторое событие предварительного сохранения), а затем замена Base64 с именем изображения на сервере.

Answer 3

Я обнаружил, что могу использовать редактор списка дискуссионного платы, по крайней мере, вставлять-> с компьютера и использовать инструменты редактора для манипулирования изображениями, встроенными в текст.Затем вы можете вырезать и вставлять оттуда в обычный список элементов SharePoint, насыщенные текстовые поля.Вам даже не нужно сохранить список дискуссий, который вы использовали для редактирования, просто отмените сообщение после вырезания и вставки от него.Если вам нужна более сложная манипуляция изображений (например, вращение изображения), то если вы можете по электронной почте в свой список досок обсуждения, вы можете просто использовать редактор электронной почты Outlook, чтобы составить текст и изображения и отправить его в эту дискуссию в списке платы.