[BUG|/QUESTION] Strange characters (Â) within CSS/HTML preview; Elements are not deleted completely

Question

BUG

Are you using the latest release (older versions are NOT supported)?

0.14.50

Are you facing the bug with your local copy of GrapesJS or with the current demo?

It's a local copy. The used verions (including plugins) are:

"dependencies": {
    "ckeditor": "^4.11.1",
    "grapesjs": "^0.14.50",
    "grapesjs-blocks-basic": "^0.1.8",
    "grapesjs-blocks-bootstrap4": "^0.1.3",
    "grapesjs-plugin-ckeditor": "0.0.9",
    "grapesjs-preset-webpage": "^0.1.10"
}

I'm working on MacOS and tested with latest Chrome: 70.0.3538.110 (Offizieller Build) (64-Bit)

What is the expected behavior?

When deleting an element I expect all the related HTML being removed from the source preview as well
There shouldn't be those strange (invisible) characters. Â This looks ugly and is not helpful
The default viewport should be adjusted to "mobile" (mobile first) But the corresponding setting is not recognized

What happens instead? All elements were deleted but there is still an empty div-container in the viewport. There are strange charaters within CSS (and also the HTML preview). The default viewport width is 100% instead of the mobile one.

If you're able to reproduce the bug indicate all the necessary steps Have a look to my full implementation here:

https://gist.github.com/renepardon/91db8b10a1dea1f8d0d855af945c89a8

I've installed all the packages with npm and copied the required files to the /vendor/grapejs folder

Answers (3)

artf• January 4, 20190 reactions

All elements were deleted but there is still an empty div-container in the viewport

You don't explain steps to reproduce this issue, but please check in Layers first. I'm pretty much sure you don't delete some kind of wrapper, which has no style so you just can't see it on the canvas

There are strange charaters within CSS (and also the HTML preview)

I can't reproduce it, also in the demo it's all ok. Try to update your files

The default viewport width is 100% instead of the mobile one

For the mobile-first approach check this https://github.com/artf/grapesjs/issues/900#issuecomment-369560034

renepardon• January 4, 20190 reactions

Hi @artf even with the provided link https://gist.github.com/renepardon/91db8b10a1dea1f8d0d855af945c89a8 you were not able to reproduce it?

artf• January 5, 20190 reactions

I can't reproduce it due to missing resources (and as I said, it's probably a problem with your files...)

    <link href="/vendor/grapejs/css/grapes.min.css" rel="stylesheet"/>
    <link href="/vendor/grapejs/grapesjs-preset-webpage.min.css" rel="stylesheet"/>

    <script src="/vendor/ckeditor/ckeditor.js"></script>

    <script src="/vendor/grapejs/grapes.min.js"></script>
    <script src="/vendor/grapejs/grapesjs-preset-webpage.min.js"></script>
    <script src="/vendor/grapejs/grapesjs-plugin-ckeditor.min.js"></script>
    <script src="/vendor/grapejs/grapesjs-blocks-bootstrap4.min.js"></script>

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[BUG|/QUESTION] Strange characters (Â) within CSS/HTML preview; Elements are not deleted completely

Question

BUG

Answers (3)

Related Questions and Answers

Unable to load in CSS string with characters such as '#' with setStyle()

Manual triggering of the asset manager rendering is required after opening the AM pop-up

[BUG]: When dragging a block over the canvas, JS in script, is appended in canvas before dropping the block.

[Question]The canvas turns dark and unmodifiable on adding a large piece of custom html.

Paid Plugins That Match This Issue

Browse Plugin Categories