Giter Club home page Giter Club logo

Comments (6)

givanz avatar givanz commented on August 20, 2024

Hi

Thank you, from the error it seems that the iframe element is not found, if you made changes to editor.html make sure that the iframe can be found with selector "#iframe-wrapper > iframe" you can run $("#iframe-wrapper > iframe") in browser console (F12) to see if the the element is found.

Another cause might be different subdomain of the iframe url, make sure that the url that is edited is on the same subdomain or set document.domain to avoid Same-origin policy issues https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

from vvvebjs.

Masegi avatar Masegi commented on August 20, 2024

oh wait, I have to include the editor.html myself? I though it's a template getting used in background.

thanks for your fast response.

from vvvebjs.

Masegi avatar Masegi commented on August 20, 2024

ok I think it's working now, but am I right that there is no option to add an background image to a section/div?

from vvvebjs.

givanz avatar givanz commented on August 20, 2024

Thanks for the suggestion, I added background image property for html elements in the last commit 2eba2ff

from vvvebjs.

sagar-kumar-gh avatar sagar-kumar-gh commented on August 20, 2024

hi, @givanz I am trying to implement VvvebJs with react+next js and its stuck in the same error. I have already tried the above solution but still not working for me, please help me with the issues.

here is the code

import React from "react";
import _JSXStyle from "styled-jsx/style";
import Head from "next/head";
import HtmlEditor from "../public/editor-html/index.html"

export default class TypeWriter extends React.Component {
  componentDidMount() {
    setTimeout(() => {
      Vvveb.Builder.init(HtmlEditor, function () {
        //load code after page is loaded here
        Vvveb.Gui.init();
      });
    }, 1000);
  }
  render() {
    return (
      <div id="mainEditor">
        <Head>
          <script src="/editor-js/jquery.min.js"></script>
          <script src="/editor-js/jquery.hotkeys.js"></script>
          <script src="/editor-js/popper.min.js"></script>
          <script src="/editor-js/bootstrap.min.js"></script>
          <script src="/editor-libs/builder/builder.js"></script>
          <script src="/editor-libs/builder/undo.js"></script>
          <script src="/editor-libs/builder/inputs.js"></script>
          <script src="/editor-libs/builder/components-bootstrap5.js"></script>
          <script src="/editor-libs/builder/components-widgets.js"></script>
          <script src="libs/builder/plugin-codemirror.js"></script>
        </Head>
      </div>
    );
  }
}

VvvebJs

from vvvebjs.

givanz avatar givanz commented on August 20, 2024

I guess that src is the attribute of the <iframe> where the page is loaded, make sure that the html from editor.html that includes the <iframe> code is loaded in the page, probably the element is not present and the iframe selector returns undefined.

from vvvebjs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.