0

We more and more store data as .json files in a Document Library.
Instead of (re)writing our configuration front-end, I would like users to edit the bare .json files.
(and while we're at it, all related .js, .css and .html files in the DocLib)

Question: Is there an App or Client-Side code for editing/creating files in a Document Library?

I am thinking a REST interface on top of a Document Library with the TinyMCE library or similar.

Oldskool solutions involve installing software or opening a DocLib with Explorer and using a locally installed editor:

Update #1

I am not after a DEV experience,
I am looking for a 100% Client Side solution for (end)users to edit HTML5 files in the Browser

0

I usually use a gulp task for this, called gulp-spsync, and then I can edit the assets in any editor I want and it will sync to any SharePoint destination.

  • Built or sync is no problem. I am looking for a 100% front-end experience – Danny '365CSI' Engelman Sep 2 '16 at 11:18
  • Got it. AFAIK there's very few tools that do that, of course you can always use the classic approach with opening with WebDAV/Explorer. Then you can also build your own editor: msdn.microsoft.com/en-us/office/office365/howto/… – Wictor Wilen MCA MCM MVP Sep 2 '16 at 12:09
  • I have mapped networkshares, fine for one tenant connections, a pain for multiple tenants (although they are persistant for some time becauyse Windows stores the credentials) The FileHandler still requires back-end dev. It should just be a as simple as TinyMCE using the CRUD REST API on documents in a DocLib. Cisar does it with js files in the Style Library.. but the UI only picks up JSLinks – Danny '365CSI' Engelman Sep 2 '16 at 15:57
0

Question was answered:

Use the Built in (SPOinline) Monaco Editor:

Answer: https://sharepoint.stackexchange.com/questions/206907/how-can-use-the-microsoft-monaco-editor-which-in-offie365-they-say

Update: referenced post was deleted

Right now its only available in the "Modern lists and libraries experience"

This is not correct,

The editor IS available in Office365 for ANY document

All you have to do is get the URL right

  • Open a .txt file from a Modern Library Experience

  • Investigate the URL

It takes 3 parameters

    https://[SITE]/[LIBARY]/Forms/AllItems.aspx
    ?id=[SITE]%2F[LIBARY]%2F[FILENAME]
    &parent=%2F[RELATIVEPATH+LIBRARY]
    &p=5

disclaimer: there could be some typos above

With some trial and error you will be able to open any .HTML or .JS from a Classic Library

You then write a CSR script to rewrite the URLs in a Classic Library,
and it is one click, just like in the Modern Experiences

Update

Gautam reports it doesn't work for him.

I have used this at least since october 2016 on multiple Tenants, do not know what could be wrong... as I said.. it takes some trial and error to get the URL 100% right

Update (because Mr. Allrood asked so kindly in the comments)

The CSR script

"MonacoEdit": {
    View: function (ctx, fieldSchema, item) {
        eval(atob("dmFyIGZpbGVyZWYgPSBpdGVtLkZpbGVSZWY7dmFyIGZpbGVwYXRoID0gZmlsZXJlZi5zcGxpdCgnLycpOw=="));
        eval(atob("dmFyIGZpbGVuYW1lID0gZmlsZXBhdGgucG9wKCk7dmFyIHBhcmVudCA9IGZpbGVwYXRoLmpvaW4oJy8nKTs="));
        var uri = location.origin + parent + '/Forms/AllItems.aspx' + '?';
        uri += '&id=' + fileref + '&parent=' + parent + '&p=5';
        return '<a href="' + encodeURI(uri) + '" target=_blank><b>Edit</b></a>';
    }
}

Will display an Edit link for an existing 'MonacoEdit' (doesn't matter what type) column

Sorry for the encrypted JavaScript code, was just in the news them Russians hackers have been at it again (not that I think the Americans are clean)
Since I presume Mr Allrood is russian I couldn't resist some Friday programmers humor.

If you don't trust this eval code just paste this in your F12 console:

atob("dmFyIGZpbGVyZWYgPSBpdGVtLkZpbGVSZWY7dmFyIGZpbGVwYXRoID0gZmlsZXJlZi5zcGxpdCgnLycpOw==")

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.