An editor with live preview for Toyhouse themes. View changes as you type, in various site skins/themes and page layouts.
To preview a local copy of the code, you will need to Install XAMPP from Apache Friends. Once you add XAMPP's programme directory to your PATH variable, navigate to the theditor root directory in the command line and start a local server:
php -S localhost:8000
Once you've started up the server, you can view a local preview of the code editor by navigating to the url localhost:8000
in your web browser.
frame
object; you can get the frame's window object (and access all its functions etc.) with frame.contentWindow
. Conversely, frame.js can interact with the UI window through the parent
object.switchTo()
and any new layouts should also be added to the layout menu in index.php.This editor uses jQuery, Ace Editor, ace-colorpicker, Bootstrap, Font Awesome, Foundation Icons, and of course the Toyhouse source files. The source files are included in the codebase. I do not own any of these libraries or resources.
#main
ID and copy only the that element..user-content
class name), changing all href
properties to the value #
, and deidentifying dates (I use 1 Jan 1900 00:00) and users (I use the username user)..user-content
element should also have the additional class name .ace-code-container
, and the blurb section should have the class name .ace-code-container-2
. This tells the editor where to put the code.switchTo( <HTML filename without extension> )
Since Version 1.10.3, the code editor's importer now authenticates itself with Toyhouse so that it can retrieve guest-blocked profiles. The live production version uses Circlejourney's bot account fuchsiamoonrise, but these are not committed to the repo for security purposes.
To make the feature work in full, you can set up your local version to log in with your own Toyhouse credentials. To do so, create a file called settings.conf
one directory above the editor's root directory. For example, if the editor is in C:/theditor
, settings.conf
should be in C:/
.
settings.conf
is formatted as a PHP ini file containing two settings: a username and a password. The structure of this file is demonstrated in settings.conf.example
. This file should not be committed to the repository.
Huge thank you Min for very kindly shared their Font Awesome Pro courtesy of subscription with us 💙 This gives us access to premium FA icons.
And thank you venfaaniik for collaborating with me on the colour picker extension for Ace—your time and help are much appreciated!