Git Product home page Git Product logo

ezoe's Introduction

eZ Online Editor 5.x extension README

What is eZ Online Editor 5.x?

eZ Online Editor 5.x (ezoe) is a eZ Publish extension that customizes eZ XML datatype (the "Rich text" datatype) with a wysiwyg editor (TinyMCE based).

ezoe provides a user friendly interface for editing eZ XML, it does not change the fact that eZ XML is a xml format (XHTML 2.0 inspired) that by default enforces* strict separation between content and design. Thus all features of TinyMCE not supported by eZ XML is disabled and not supported (supported plugins/buttons are listed in ezoe.ini).

* This enables enterprise features like pr tag template view, multi channel publishing, clean content export and places design control in the hands of designers and not editors.

Install

See: ./INSTALL (the file named INSTALL in the same directory you found this file)

Debug

ezoe consists of three parts: TinyMCE, ezoe TinyMCE customizations and a eZXML input handler.

TinyMCE

TinyMCE in ezoe is a out of the box setup of the official version, no hacks/changes applied at all. eZ Systems currently has an support agreement with Ephox, so if your a eZ Systems customer and find an issue we'll report the issue for you to Ephox. If you however run the community version you will have to report the issue to Moxiecode yourself.

ezoe TinyMCE customizations

These consist of a custom theme (ez), plugins (eztable & ezemotions) and ezoe settings for TinyMCE in design/standard/templates/datatype/edit/ezxmltext_ezoe.tpl (partly based on ezoe.ini settings) All customizations exists to add eZXML features and hide TinyMCE features not supported by eZXML.

eZXML input handler

Consist of input handler that takes over handling of edit interface of eZXML and translates eZXML to and from a xhtml format TinyMCE (with ezoe TinyMCE customizations) understands. Input is handled by eZOEInputParser and output to TinyMCE is handled directly on input handler.

Example of debugging ezoe #1

Example issue: #017838: Anchors disappears after publishing ( example shows how issue was identified, checkout ezoe before fix in f06d39f600800d2d0ebf9f7d331cd865bd4dabf9 if you want to try it yourself) In this case there are four possible places to look: parser, TinyMCE ez theme, ezoe settings for TinyMCE and TinyMCE itself, run-down:

  1. Enable ezoe parser debug so we can identify when anchor disappears, debug.ini:

    [GeneralCondition] kernel-datatype-ezxmltext-ezoe=enabled

  2. Edit some content object with ezoe(ezxml attribute) and add a anchor.

  3. Right click on anchor and click 'Inspect this', you'll see that it has the following source: <a style="" id="Anchor" class="mceItemAnchor"></a>

  4. Click Store draft, it will now disappear from the document, and in your debug output you'll see that it was received by parser as: <a id="Anchor"></a>

    This (todo: add doc on internal format) is not how the parser expects it to be. From eZOEInputParser->tagNameLink we can see that it expects either 'name' to be set or class to be 'mceItemAnchor' as it had in the source when added to TinyMCE.

  1. Double checking in ezxmltext_ezoe.tpl it looks like <a> does allow class attribute, ref: a[href|name|target|view|title|class|id|customattributes]

    We have now identified that issue is in TinyMCE / ezoe TinyMCE customizations. And when verifying on a stock TinyMCE it became clear that TinyMCE uses 'name' attribute now that it is allowed in html5 but was deprecated in xhtml so solution was to change ezoe to use 'name' internally.

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.