Closed ErickUmanchuk closed 7 years ago
artf
commented
7 years ago @ErickUmanchuk the error is generating from here https://github.com/artf/grapesjs/blob/dev/src/parser/model/ParserHtml.js#L20-L31
Seems like there is something wrong with some of your style attributes.
Can you provide your HTML?
ErickUmanchuk
commented
7 years ago @artf here is my HTML:
i apply the plugin on: . It's important to say that i'm using another plugin called Bootstrap Wizard, that's why in my JS i use the jQuery.noConflict line so that way the two plugins can work together.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asoquim | {% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<!-- Base Css Files -->
<link href="{{ asset('assets/libs/prettify/prettify.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/fontello/css/fontello.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/animate-css/animate.min.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/nifty-modal/css/component.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/magnific-popup/magnific-popup.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/ios7-switch/ios7-switch.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/pace/pace.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/sortable/sortable-theme-bootstrap.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/jquery-icheck/skins/all.css') }}" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<!-- Code Highlighter for Demo -->
<link href="{{ asset('assets/libs/prettify/github.css') }}" rel="stylesheet"/>
<!-- Extra CSS Libraries Start -->
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet" type="text/css"/>
<!-- Extra CSS Libraries End -->
<link href="{{ asset('assets/css/style-responsive.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/libs/jquery-notifyjs/styles/metro/notify-metro.css') }}" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.bootstrap.min.css" rel="stylesheet"
type="text/css"/>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/libs/bootstrap-validator/css/bootstrapValidator.min.css') }}"
rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/libs/jquery-jvectormap/css/jquery-jvectormap-1.2.2.css') }}"
rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/libs/sortable/sortable-theme-bootstrap.css') }}" rel="stylesheet"
type="text/css"/>
<link href="{{ asset('assets/libs/bootstrap-xeditable/css/bootstrap-editable.css') }}" rel="stylesheet"
type="text/css"/>
<link href="{{ asset('assets/libs/grapesjs/dist/css/grapes.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/libs/grapesjs/dist/css/grapesjs-preset-newsletter.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/css/bootstrap-select.css') }}" rel="stylesheet" type="text/css"/>
{#<link href="{{asset('assets/libs/bootstrap-select/bootstrap-select.min.css')}}" rel="stylesheet" type="text/css" />#}
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="{{ asset('assets/img/favicon.ico') }}">
<link rel="apple-touch-icon" href="{{ asset('assets/img/apple-touch-icon.png') }}"/>
<link rel="apple-touch-icon" sizes="57x57" href="{{ asset('assets/img/apple-touch-icon-57x57.png') }}"/>
<link rel="apple-touch-icon" sizes="72x72" href="{{ asset('assets/img/apple-touch-icon-72x72.png') }}"/>
<link rel="apple-touch-icon" sizes="76x76" href="{{ asset('assets/img/apple-touch-icon-76x76.png') }}"/>
<link rel="apple-touch-icon" sizes="114x114" href="{{ asset('assets/img/apple-touch-icon-114x114.png') }}"/>
<link rel="apple-touch-icon" sizes="120x120" href="{{ asset('assets/img/apple-touch-icon-120x120.png') }}"/>
<link rel="apple-touch-icon" sizes="144x144" href="{{ asset('assets/img/apple-touch-icon-144x144.png') }}"/>
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('assets/img/apple-touch-icon-152x152.png') }}"/>
{% block stylesheets %}
{% endblock %}
</head>
{% block content %}
{% block body %}
{% include 'nuevaListaCorreo.html.twig' %}
<div class="content-page">
<!-- ============================================================== -->
<!-- Start Content here -->
<!-- ============================================================== -->
<div class="content">
<!-- Page Heading Start -->
<div class="page-heading">
<h1 class="text-left">
<i class="glyphicon glyphicon-bullhorn"></i> Crear comunicado
</h1>
<h3>Lista de pagos de afiliados</h3>
</div>
<!-- Page Heading End-->
<!-- Your awesome content goes here -->
<div class="row">
<div class="col-md-12">
<div class="widget">
<div class="widget-content padding">
<div id="myWizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">Selección de plantilla</a>
</li>
<li><a href="#tab2" data-toggle="tab">Edición de plantilla</a></li>
<li><a href="#tab3" data-toggle="tab">Envío de comunicado</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress">
<div class="progress-bar progress-bar-striped progress-bar-success active"
role="progressbar"
aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Categorías:</label>
<select id="filter" class="form-control" title="">
<option value="">-Seleccione-</option>
{% for c in categorias %}
<option data-filter="{{ c.descripcion }}">{{ c.descripcion }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="filtr-container">
{% for t in templates %}
<div class="col-md-3">
<img src="{{ asset('assets/templates/') ~ t.thumbnail }}"
class="img-responsive template"
data-content="{{ t.content }}"
id="template{{ t.idTemplate }}"
data-id="{{ t.idTemplate }}"
data-category="{{ t.idCategoria }}"
alt="Comunicado de Asoquim"/>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<span id="newsletter"></span>
</div>
<div class="tab-pane" id="tab3">
<div class="container">
<div id="foo"></div>
<div class="row">
<div class="col-md-4 col-md-push-8">
<div class="form-group">
<a href="" class="btn btn-success btn-xs pull-right"
data-toggle="modal" data-target="#nuevaListaCorreo">Nueva
lista de correos</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<hr/>
<div class="row" style="margin: auto">
<div class="col-md-4">
<div class="form-group">
<label>Asunto:</label>
<input type="text" class="form-control" id="subject"
title=""/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Elija los destinatarios:</label>
<div class="radio">
<label>
<input type="radio"
id="toggleListaCorreos"/>
Agregar correos
</label>
<label>
<input type="radio" id="toggleListaContactos">
Listas
de contactos
</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Destinatario:</label>
<select class="form-control selectpicker"
id="listaCorreos"
multiple
data-live-search-placeholder="Buscar"
data-actions-box="true" title="-Seleccione-">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>¿Cuándo se realizará el envío?</label>
<div class="checkbox">
<label>
<input type="checkbox" class="sendNow"> Enviar ahora
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="scheduleMsg">
Programar envío
</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group sendDateContainer">
<label>Fecha de envío:</label>
<input type="text" class="form-control fechaEnvio"
placeholder="" disabled>
</div>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Volver</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next next-btn"><a href="#">Continuar</a></li>
<li class="finish" style="display: none;"><a
href="" id="enviar"
data-loading-text="Enviando, por favor espere...">Enviar <i
class="fa fa-send"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End content here -->
<!-- ============================================================== -->
</div>
{% endblock %}
{% endblock %}
{% block javascript %}
<script>var resizefunc = [];</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins)-->
{#<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>#}
<script src="{{ asset('assets/libs/jquery/jquery-1.11.1.min.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!--para el datepicker -->
<script src="{{ asset('assets/libs/jqueryui/jquery-ui-1.10.4.custom.min.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-ui-touch/jquery.ui.touch-punch.min.js') }}"></script>
<script src="{{ asset('assets/libs/bootstrap/js/bootstrap.min.js') }}"></script>
{#<script src="{{ asset('assets/js/jquery-2.1.3.min.js') }}"></script>#}
{# <script src="{{ asset('assets/js/bootstrap-3.3.2.min.js') }}"></script>#}
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" rel="stylesheet"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" rel="stylesheet"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js" rel="stylesheet"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/responsive.bootstrap.min.js" rel="stylesheet"></script>
<script src="{{ asset('assets/libs/jquery-detectmobile/detect.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-animate-numbers/jquery.animateNumbers.js') }}"></script>
<script src="{{ asset('assets/libs/ios7-switch/ios7.switch.js') }}"></script>
<script src="{{ asset('assets/libs/fastclick/fastclick.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-blockui/jquery.blockUI.js') }}"></script>
<script src="{{ asset('assets/libs/bootstrap-bootbox/bootbox.min.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-slimscroll/jquery.slimscroll.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-sparkline/jquery-sparkline.js') }}"></script>
<script src="{{ asset('assets/libs/nifty-modal/js/classie.js') }}"></script>
<script src="{{ asset('assets/libs/nifty-modal/js/modalEffects.js') }}"></script>
<script src="{{ asset('assets/libs/sortable/sortable.min.js') }}"></script>
{#<script src="{{ asset('assets/libs/bootstrap-fileinput/bootstrap.file-input.js') }}"></script>#}
<script src="{{ asset('assets/libs/magnific-popup/jquery.magnific-popup.min.js') }}"></script>
<script src="{{ asset('assets/libs/pace/pace.min.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-icheck/icheck.min.js') }}"></script>
<script src="{{ asset('assets/libs/dropzone/dropzone.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.js') }}"></script>
{# <script src="{{asset('assets/libs/bootstrap-select/bootstrap-select.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap-select2/select2.min.js')}}"></script>#}
<script src="{{ asset('assets/js/bootstrap-select.js') }}"></script>
<script src="{{ asset('assets/libs/bootstrap-xeditable/js/bootstrap-editable.min.js') }}"></script>
<script src="{{ asset('assets/libs/bootstrap-validator/js/bootstrapValidator.min.js') }}"></script>
<script src="{{ asset('assets/libs/spinjs/spin.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-wizard.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-wizard/jquery.easyWizard.js') }}"></script>
<script src="{{ asset('assets/libs/bootstrap-wizard/jquery.bootstrap.wizard.min.js') }}"></script>
<script src="{{ asset('assets/libs/grapesjs/dist/grapes.min.js') }}"></script>
<script src="{{ asset('assets/libs/grapesjs/dist/grapesjs-preset-newsletter.min.js') }}"></script>
<!-- Demo Specific JS Libraries -->
<script src="{{ asset('assets/libs/prettify/prettify.js') }}"></script>
{#<script src="{{ asset('assets/libs/filterizr/jquery.filterizr.min.js') }}"></script>#}
<script src="{{ asset('assets/libs/filterizr/jquery.filterizr.js') }}"></script>
<script src="{{ asset('assets/js/pages/notifications.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-notifyjs/notify.min.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-notifyjs/styles/metro/notify-metro.js') }}"></script>
<script src="{{ asset('assets/js/init.js') }}"></script>
<script src="{{ asset('assets/js/app.js') }}"></script>
{% endblock %}
</html>And this is my JS:
var $ = jQuery.noConflict(),
$inputDate = $(".sendDateContainer"),
$schdl = $(".scheduleMsg"),
$send = $(".sendNow"),
wizard = $("#myWizard"),
template = $(".template"),
date = new Date(),
dd = date.getDate(),
mm = date.getMonth() + 1,
yyyy = date.getFullYear(),
today = dd + '-' + '0' + mm + '-' + yyyy,
html,
css,
editor;
$(document).ready(function () {
$schdl.on("ifChecked", function () {
$send.iCheck("uncheck");
if ($inputDate.find("input").hasAttr("disabled")) {
$inputDate.find("input").removeAttr("disabled");
}
});
$send.on("ifChecked", function () {
$inputDate.find("input").val("");
$schdl.iCheck("uncheck");
if (!$inputDate.find("input").hasAttr("disabled")) {
$inputDate.find("input").attr("disabled", true);
}
});
template.on("click", function () {
var id = $(this).data("id");
$(".next-btn").data("template", id);
if (!$(this).hasClass('activeHover')) {
template.removeClass('activeHover').addClass('unactiveHover');
$(this).removeClass('unactiveHover').addClass('activeHover');
} else {
template.removeClass('activeHover unactiveHover');
}
});
wizard.bootstrapWizard({
tabClass: 'nav nav-tabs nav-justified',
onTabShow: function (tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current / $total) * 100;
wizard.find(".progress-bar").css({width: $percent + '%'});
},
onNext: function (tab, navigation, index) {
if (index === 1) {
var templateId = $(".next-btn").data("template");
var content = $("#template" + templateId).data("content");
$("#newsletter").append("<div id='gjs'></div>");
editor = grapesjs.init({
container: '#gjs',
plugins: ['gjs-preset-newsletter'],
pluginsOpts: {
'gjs-preset-newsletter': {
modalTitleImport: 'Import template'
}
},
storeHtml: true
});
editor.setComponents(content);
}
if (index === 2) {
css = editor.getCss();
html = editor.getHtml();
$(".finish").css("display", "block");
}
}
});
});@ErickUmanchuk I've tried to paste your HTML content (using the demo, which uses the last version) but didn't encounter any issue with it. Are you sure posting the right HTML?
ErickUmanchuk
commented
7 years ago @artf Yes Mr. it's my HTML file, I tried cloning the full project on another directory where I have been working and it worked, when I saw the error the first time was after my computer restarted accidentally, I suppouse that phpStorm had an error while auto-saving the project and the computer restarted. Maybe that was the problem.
I solved it that way, thanks for the help and revision, greetings.
artf
commented
7 years ago @ErickUmanchuk 👍 thanks for letting me know
lock[bot]
commented
5 years ago This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Hello, i was wondering i can solve the problem here. I was working editing a view that does not have anything related to the view that i'm implementing the plugin on, and one day in some moment i get this error, and i really don't know why it's happening, because i have not changed the plugin.
grapes.min.js:2 Uncaught TypeError: Cannot read property 'trim' of undefined at Object.parseStyle (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) at Object.parseNode (grapes.min.js:2) parseStyle @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parseNode @ grapes.min.js:2 parse @ grapes.min.js:2 parseHtml @ grapes.min.js:2 add @ grapes.min.js:2 load @ grapes.min.js:2 (anonymous) @ grapes.min.js:2 load @ grapes.min.js:2 loadOnStart @ grapes.min.js:2 initialize @ grapes.min.js:2 e.Model @ grapes.min.js:2 n @ grapes.min.js:2 t.exports @ grapes.min.js:2 init @ grapes.min.js:2 onNext @ comunicados.js:26 next @ jquery.bootstrap.wizard.min.js:13 dispatch @ jquery.min.js:5 v.handle @ jquery.min.js:5 i%3Ca%20class=:1 GET http://grapesjs.com/i%3Ca%20class= 404 (Not Found)
it seems like something is not being generated.