Allow editing of HTML or CSS?

Question

Allow editing of HTML or CSS?

chfahy opened this issue 7 years ago · comments

Hi there,

First off thanks for opening the system to everyone.

I have been playing around with it and was wondering if there is a way to make the "export" window editable and then have a button that "re imports" it?

It would be nice to be able to edit the html or css directly.

ArtDesign Creative Studio · Answer 1 · Tue Sep 19 2017 23:11:07 GMT+0800 (China Standard Time)

Yes, try this code

var pfx = editor.getConfig().stylePrefix;
var modal = editor.Modal;
var cmdm = editor.Commands;
var codeViewer = editor.CodeManager.getViewer('CodeMirror').clone();
var pnm = editor.Panels;
var container = document.createElement('div');
var btnEdit = document.createElement('button');

codeViewer.set({
    codeName: 'htmlmixed',
    readOnly: 0,
    theme: 'hopscotch',
    autoBeautify: true,
    autoCloseTags: true,
    autoCloseBrackets: true,
    lineWrapping: true,
    styleActiveLine: true,
    smartIndent: true,
    indentWithTabs: true
});

btnEdit.innerHTML = 'Edit';
btnEdit.className = pfx + 'btn-prim ' + pfx + 'btn-import';
btnEdit.onclick = function() {
    var code = codeViewer.editor.getValue();
    editor.DomComponents.getWrapper().set('content', '');
    editor.setComponents(code.trim());
    modal.close();
};

cmdm.add('html-edit', {
    run: function(editor, sender) {
        sender && sender.set('active', 0);
        var viewer = codeViewer.editor;
        modal.setTitle('Edit code');
        if (!viewer) {
            var txtarea = document.createElement('textarea');
            container.appendChild(txtarea);
            container.appendChild(btnEdit);
            codeViewer.init(txtarea);
            viewer = codeViewer.editor;
        }
        var InnerHtml = editor.getHtml();
        var Css = editor.getCss();
        modal.setContent('');
        modal.setContent(container);
        codeViewer.setContent(InnerHtml + "<style>" + Css + '</style>');
        modal.open();
        viewer.refresh();
    }
});

pnm.addButton('options',
    [
        {
            id: 'edit',
            className: 'fa fa-edit',
            command: 'html-edit',
            attributes: {
                title: 'Edit'
            }
        }
    ]
);

Artur Arseniev · Answer 2 · Wed Sep 20 2017 03:52:08 GMT+0800 (China Standard Time)

Thanks @ArtDesignCreativeStudio this should work

Chris · Answer 3 · Wed Sep 20 2017 14:58:02 GMT+0800 (China Standard Time)

Thanks alot!!!

Milan Košir · Answer 4 · Fri Sep 22 2017 18:37:21 GMT+0800 (China Standard Time)

Thanks, perfect!

smaqeelkazmi · Answer 5 · Fri Jun 29 2018 13:46:03 GMT+0800 (China Standard Time)

This is what I was looking for. Thanks @ArtDesignCreativeStudio

Sibbir7350 · Answer 6 · Wed Nov 14 2018 22:48:41 GMT+0800 (China Standard Time)

Hello @artf @ArtDesignCreativeStudio

Can we display the HTML and CSS Part in two different text box like by default export code viewer having?

Deleted user · Answer 7 · Sun Mar 17 2019 20:00:21 GMT+0800 (China Standard Time)

how can I lock down part of the HTML so it is not editable after importing it?

Thomas Chartron · Answer 8 · Thu Aug 01 2019 18:16:00 GMT+0800 (China Standard Time)

Thanks a lot for this code snippet

Ben Matheson · Answer 9 · Fri Aug 30 2019 01:44:32 GMT+0800 (China Standard Time)

Can we display the HTML and CSS Part in two different text box like by default export code viewer having?

@Sibbir7350 This seems to work for me:

    var pfx = editor.getConfig().stylePrefix
    var modal = editor.Modal
    var cmdm = editor.Commands
    var htmlCodeViewer = editor.CodeManager.getViewer('CodeMirror').clone()
    var cssCodeViewer = editor.CodeManager.getViewer('CodeMirror').clone()
    var pnm = editor.Panels
    var container = document.createElement('div')
    var btnEdit = document.createElement('button')

    htmlCodeViewer.set({
      codeName: 'htmlmixed',
      readOnly: 0,
      theme: 'hopscotch',
      autoBeautify: true,
      autoCloseTags: true,
      autoCloseBrackets: true,
      lineWrapping: true,
      styleActiveLine: true,
      smartIndent: true,
      indentWithTabs: true
    })

    cssCodeViewer.set({
      codeName: 'css',
      readOnly: 0,
      theme: 'hopscotch',
      autoBeautify: true,
      autoCloseTags: true,
      autoCloseBrackets: true,
      lineWrapping: true,
      styleActiveLine: true,
      smartIndent: true,
      indentWithTabs: true
    })

    btnEdit.innerHTML = 'Save'
    btnEdit.className = pfx + 'btn-prim ' + pfx + 'btn-import'
    btnEdit.onclick = function () {
      var html = htmlCodeViewer.editor.getValue()
      var css = cssCodeViewer.editor.getValue()
      editor.DomComponents.getWrapper().set('content', '')
      editor.setComponents(html.trim())
      editor.setStyle(css)
      modal.close()
    }

    cmdm.add('edit-code', {
      run: function (editor, sender) {
        sender && sender.set('active', 0)
        var htmlViewer = htmlCodeViewer.editor
        var cssViewer = cssCodeViewer.editor
        modal.setTitle('Edit code')
        if (!htmlViewer && !cssViewer) {
          var txtarea = document.createElement('textarea')
          var cssarea = document.createElement('textarea')
          container.appendChild(txtarea)
          container.appendChild(cssarea)
          container.appendChild(btnEdit)
          htmlCodeViewer.init(txtarea)
          cssCodeViewer.init(cssarea)
          htmlViewer = htmlCodeViewer.editor
          cssViewer = cssCodeViewer.editor
        }
        var InnerHtml = editor.getHtml()
        var Css = editor.getCss()
        modal.setContent('')
        modal.setContent(container)
        htmlCodeViewer.setContent(InnerHtml)
        cssCodeViewer.setContent(Css)
        modal.open()
        htmlViewer.refresh()
        cssViewer.refresh()
      }
    })

    pnm.addButton('options',
      [
        {
          id: 'edit',
          className: 'fa fa-edit',
          command: 'edit-code',
          attributes: {
            title: 'Edit Code'
          }
        }
      ]
    )

vinayp · Answer 10 · Thu Dec 12 2019 15:42:20 GMT+0800 (China Standard Time)

Can we display the HTML and CSS Part in two different text box like by default export code viewer having?

@Sibbir7350 This seems to work for me:

    var pfx = editor.getConfig().stylePrefix
    var modal = editor.Modal
    var cmdm = editor.Commands
    var htmlCodeViewer = editor.CodeManager.getViewer('CodeMirror').clone()
    var cssCodeViewer = editor.CodeManager.getViewer('CodeMirror').clone()
    var pnm = editor.Panels
    var container = document.createElement('div')
    var btnEdit = document.createElement('button')

    htmlCodeViewer.set({
      codeName: 'htmlmixed',
      readOnly: 0,
      theme: 'hopscotch',
      autoBeautify: true,
      autoCloseTags: true,
      autoCloseBrackets: true,
      lineWrapping: true,
      styleActiveLine: true,
      smartIndent: true,
      indentWithTabs: true
    })

    cssCodeViewer.set({
      codeName: 'css',
      readOnly: 0,
      theme: 'hopscotch',
      autoBeautify: true,
      autoCloseTags: true,
      autoCloseBrackets: true,
      lineWrapping: true,
      styleActiveLine: true,
      smartIndent: true,
      indentWithTabs: true
    })

    btnEdit.innerHTML = 'Save'
    btnEdit.className = pfx + 'btn-prim ' + pfx + 'btn-import'
    btnEdit.onclick = function () {
      var html = htmlCodeViewer.editor.getValue()
      var css = cssCodeViewer.editor.getValue()
      editor.DomComponents.getWrapper().set('content', '')
      editor.setComponents(html.trim())
      editor.setStyle(css)
      modal.close()
    }

    cmdm.add('edit-code', {
      run: function (editor, sender) {
        sender && sender.set('active', 0)
        var htmlViewer = htmlCodeViewer.editor
        var cssViewer = cssCodeViewer.editor
        modal.setTitle('Edit code')
        if (!htmlViewer && !cssViewer) {
          var txtarea = document.createElement('textarea')
          var cssarea = document.createElement('textarea')
          container.appendChild(txtarea)
          container.appendChild(cssarea)
          container.appendChild(btnEdit)
          htmlCodeViewer.init(txtarea)
          cssCodeViewer.init(cssarea)
          htmlViewer = htmlCodeViewer.editor
          cssViewer = cssCodeViewer.editor
        }
        var InnerHtml = editor.getHtml()
        var Css = editor.getCss()
        modal.setContent('')
        modal.setContent(container)
        htmlCodeViewer.setContent(InnerHtml)
        cssCodeViewer.setContent(Css)
        modal.open()
        htmlViewer.refresh()
        cssViewer.refresh()
      }
    })

    pnm.addButton('options',
      [
        {
          id: 'edit',
          className: 'fa fa-edit',
          command: 'edit-code',
          attributes: {
            title: 'Edit Code'
          }
        }
      ]
    )

@benvmatheson, could you please help me, how to add the search and replace option in the text box

ikenderham · Answer 11 · Fri Apr 16 2021 19:19:10 GMT+0800 (China Standard Time)

Hey everybody..

I have a issue with the code editor. When i use it to change something eksample, adding text, a class or another thing and save the code, it just change all my gjs-type to default?? How can i fix that?

Tuong Nguyen · Answer 12 · Fri Apr 30 2021 18:30:00 GMT+0800 (China Standard Time)

@ArtDesignCreativeStudio , @artf.
I have the same problem with @ikenderham. Do you have a solution @ikenderham?

Ben Grady · Answer 13 · Fri Aug 19 2022 05:29:48 GMT+0800 (China Standard Time)

Hi @ArtDesignCreativeStudio, @ikenderham, @artf I have a code change to address the html editing issue.

#4518

benjgrad/grapesjs@9e00994

Abdelrahman Hamdy Metwaly · Answer 14 · Thu Sep 01 2022 22:53:55 GMT+0800 (China Standard Time)

I've workaround to this, instead of editor.getHtml()

editor.getWrapper().toHTML({ withProps: true})

will also work

Rakul Agn · Answer 15 · Sat Feb 25 2023 12:47:40 GMT+0800 (China Standard Time)

There is Issue on this While Implementing Code Viewer its not overriding the asset manager if i run the commands it is opening the asset manager
if tried like This

 onClick={() => {
            props.editor.Commands.add("open-assets", () => {});
            props.editor.runCommand("edit");
          }}

The Code Viewer is Working fine but the assets Manager get Cleared Completely