Allow editing of HTML or CSS?

[chfahy]

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.

[ArtDesignCreativeStudio]

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'
            }
        }
    ]
);

[artf]

Thanks @ArtDesignCreativeStudio this should work

[chfahy]

Thanks alot!!!

[kosirm]

Thanks, perfect!

[smaqeelkazmi]

This is what I was looking for. Thanks @ArtDesignCreativeStudio

[Sibbir7350]

Hello @artf @ArtDesignCreativeStudio

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

[ghost]

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

[tchartron]

Thanks a lot for this code snippet

[benvmatheson]

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'
          }
        }
      ]
    )

[vinayp95]

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]

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?

[tuongnguyendev]

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

[benjgrad]

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

#4518

benjgrad/grapesjs@9e00994

[DevMetwaly]

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

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

will also work

[RakulAgn]

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