I need to do a similar email template editor as Campaign Monitor have (http://www.campaignmonitor.com/templates/). I tried a lot of wysiwyg editors, but it doesn't work as i want.
Do you know which technologies are used? I don't know how to do a panel which will edit the content on a right side.
If you have some tips, good resources, articles, I'll be really glad!
Thank you in advance!
I've been looking into this myself, as our CMS is being rebuilt and needs better WYSIWYG editors. They use a heavily modified version of CKEditor http://www.ckeditor.com
CKEditor has a version 4 in beta which will support in-line editing (something we need) so I'll be watching this one closely. Demo's at http://nightly-v4.ckeditor.com/3466/samples/
Their technology is proprietary. In the last few years every ESP created its own editor of this kind.
Mosaico Editor is the first open source email template builder in this class.
You can find a free to use deployment (working also as live demo) at http://mosaico.io and you can get sources at https://github.com/voidlabs/mosaico
You can choose blocks from a set defined by the "master template", then you fill you contents and change their styles in a WYSIWYG style. If you're on a large window you can also have live preview for the mobile version.
The master template defines what are the blocks, what you can edit and what you can style and it contains any html trick to make it compatible with most clients: this means you can change the editor behaviour a lot by simply writing a new master template.
It is 99% javascript (IE10+, and any other modern browser) and depends on server-side functions only to do "final inlining" and "image upload/resizing"
Related
On the CodeLite website it has the following statement:
...over 13 thousand lines!
Seeing its individual functions is hard. One solution (yes, there are
others) is to fold the code.
What others do they mean when they say "yes there are others"? How else can you visually manage large bodies of code aside from code folding?
(For PHP and C++ in particular)
There are 2 tools in CodeLite that are useful to navigate huge source files.
Zoom Navigator
Outline View
Zoom Navigator should work with any source (or other text) file. What it does is simply to show the source file in a separate window but with a much small font size. You can then scroll through the tiny lines quickly and click on an area of interest to bring that part into the main editor window.
Zoom Navigator is a plugin that come with the default installation, but may need to be enabled from the Plugins menu (Manage Plugins...).
Outline View is a tab in the Workspace view area. For this to work, the file needs to be part of the current Workspace and I think that either CTags or Clang (i.e. code completion) need to be working correctly. Therefore, AFAIK this will only work with C / C++ but it may also work with PHP and other files if there is a suitable parser.
Outline view lists all the classes in a file, and all the function and data members of each class. A slight drawback is that it doesn't sort the lists into alphabetical order, instead they follow the order in the source file.
At the moment I am managing my user guide using Microsoft Word 2003 and am converting it to a PDF file that can be downloaded from website plus is included by product installer.
I would like to move to a mechanism that achieves the following:
Generates PDF file with clickable TOC and front page
Generates HTML5 compliant output per chapter/section but without HTML skeleton
Generates JSON TOC for user guide (chapter/section outline)
I would like to package the PDF file with the distributed product.
I would like to create some simple PHP scripts that generate HTML pages with a context sensitive TOC (showing sections of current chapter) plus showing the relevant documentation.
I have no issues with developing the PHP scripts to achieve this, but I would like to know how I can generate the above outputs. I would preferably like to type documentation using an off-the-shelf GUI. I am happy to write XSLT2 stylesheets to perform any necessary conversions.
To give people an idea of what I am after:
Current PDF manual: http://rotorz.com/tilesystem/user-guide.pdf
API documentation which is generated using custom XSLT2 stylesheets into a bunch of "incomplete" HTML files, with a JSON TOC which is then brought together by PHP: http://rotorz.com/tilesystem/api
As you navigate through my API documentation you will notice that the TOC on the left is context sensitive. I would like my user guide to work in a similar way.
Is there a free alternative to Prince: http://www.princexml.com/ for paged media CSS?
After spending quite some time reading into lots of variations I have come across a potential solution...
Create a very simple "static" CMS using PHP and http://aloha-editor.org for my WYSIWYG editor. Possibly using https://github.com/chillitom/CefSharp to embed the editor straight into a more relevant GUI.
Convert the HTML5 pages into PDF using "wkhtmltoxdoc" with custom cover, header and footer .html files. Plus generates a TOC page automatically.
"wkhtmltoxdoc" also generates an XML TOC which can easily be converted to JSON.
I am still experimenting with "wkhtmltoxdoc" but it seems pretty good! Unless of course there is an even easier solution...
ADDED:
It seems that my TOC file will need to be a mixture of manually written and automatically generated. Something along the lines of the Eclipse TOC schema will suffice where a simple XSLT stylesheet can automatically fill in the blanks by grabbing H1-6 tags plus adding unique identifiers for hash links.
This TOC can thus be consumed by XSLT2 stylesheets and then finally converted to JSON for consumption by PHP scripts.
Mock-up extract for my existing documentation:
<?xml version="1.0" encoding="UTF-8"?>
<toc>
<topic label="Introduction" href="introduction.html"/>
<topic label="Getting Started">
<topic label="Installation" href="getting-started/installation.html"/>
<topic label="User Interface" href="getting-started/ui/index.html">
<topic label="Menu Commands" href="getting-started/ui/menu-commands.html"/>
<topic label="Tile System Panel" href="getting-started/ui/tile-system-panel.html"/>
<topic label="Brush Designer" href="getting-started/ui/brush-designer.html"/>
</topic>
<topic label="User Preferences" href="getting-started/user-preferences.html"/>
</topic>
<topic label="Creating a Tile System" href="creating-a-tile-system">
<!-- ... -->
</topic>
</toc>
Reference to Eclipse documentation:
http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fextension-points%2Forg_eclipse_help_toc.html
After a lot of research and experimentation I have decided to use DITA (Darwin Information Typing Architecture). For me the nicest thing about DITA is that it is topic based which makes the documentation modular and reusable.
The DITA schema is relatively simple and good XML editors provide useful insight into the available elements and attributes.
DITA documents can be combined for purpose using DITAMAP's. For example one might choose to distribute a "Quick Start Guide" which encompasses a minimal amount of information whilst a full blown "User Guide" will contain far more detail. The beauty is that the same information can be reused for both documents; plus the documents can be outputted to a number of delivery formats:
XHTML (single file or chunked)
PDF
Docbook
The process of transforming the output into the delivery format is easily handled using the DITA Open Toolkit (aka DITA-OT). This toolkit is available from: http://dita-ot.sourceforge.net which is installed simply by extracting the provided archive. The toolkit can be accessed easily by running startcmd.bat (on Windows) or startcmd.sh (Unix-like systems).
Customising and branding PDF output is not an easy task. Customizing XHTML output is significantly easier but still requires knowledge of XSL transforms. Customisations can be made by creating a plugin and placing it within the plugins folder of DITA-OT. One thing that I would like to emphasise is that once customisations have been made you must invoke ant -f integrator.xml before changes will become apparent. Lack of this knowledge caused me a lot of confusion!
The generated XHTML files are very simple (which is great!) because this makes them easy to customize. Adding the HTML5 DOCTYPE is not so easy though; but for my purposes this really doesn't matter seen as though my PHP scripts only care about what's inside <body>.
I haven't been able to find any good WYSIWYG editors XML Mind seems to be a really good WYSIWYG editor that is also really easy to use. I suspect that it wouldn't be too hard to create a basic web-based solution using something like the Aloha Editor (http://aloha-editor.org).
Whilst it seems rather difficult to customise the PDF output, it seems quite easy to generate all documentation into a single XHTML page which can then be formatted using CSS, and then finally converted using wkhtmltopdf. I haven't decided on my solution yet, but at least this is a viable option for those who are unable (or don't have the time to) customise the XSL:FO stylesheets of DITA-OT.
ADDED: After some searching I found that there is an another open source alternative to DITA-OT called "Ditac" which seems a lot easier to use and produces a far nicer output. The tool is created by the creators of "XML Mind". Whilst the tool is command line based, those who use "XML Mind" can benefit from a feature rich GUI:
http://www.xmlmind.com/ditac/
Note: I left my previous answer because it may be of use to others.
I have a website and I have created the CMS for it using PHP and mySQL.
When I edit the content with the CMS I am actually editing the content stored inside mySQL then, using PHP, the content is displayed back to the site by reading the updated content from mySQL.
Now I am looking for a text editor to use inside my CMS to format the text and display the "formated" text on my site.
Any suggestions?
Thanks!
One of the most popular and easiest editor to use is TinyMCE available at:
http://www.tinymce.com/
Another few editors i know of but don't use anymore are:
FCKEditor (Maybe the same as CKEditor that Shyiu proposed)
Xinha Open Source Editor
I recommend TinyMCE for it's flexibility, speed and ease of use compbined with JQuery support.
Good luck
I have used CKEditor in one of the projects i worked and i worked fine for me
http://ckeditor.com/
You can take a look at WMD editor
I'm familiar with HTML, CSS, and some PHP and Javascript. I've made several fairly complicated websites for which I've acted as webmaster, manually adding all content in HTML.
I'm about to put in a proposal for my first outside client at a larger business. They have an IT person that would be responsible for updating the website that I create for them.
My question is what to do about content management. I've looked into things like Drupal, but they seem overly complex for this kind of situation, with a single person adding updates of things like text, images, and PDFs.
What would you recommend as the next step above the simple way of manually uploading files and editing HTML like I'm used to? Something like a MySQL database and PHP calls? Would I then store all the images in the database as well?
I guess I'm just trying to figure out what's most common at a medium-sized business. I appreciate any guidance you can offer!
Nathaniel
My company has built large scale projects and medium scale as well. What we like to do is setup a outer page with navigation and an inside page that the client has control of by a control panel with FCK Editor or TinyMCE.
So essentially we have a wrapper page (in our case a MasterPage but in PHP you would use an include or a index.php with a query string to pull the content) and then we drop in HTML content from the database.
That database is populated by the client in their control panel. FCK Editor allows them to upload images and manage links, etc.
For our bigger clients we get very specific in our control panel allowing them to add videos, PDF attachments, blog entries, FAQ content, etc.
Some examples we have are http://pspwllc.com and http://needsontime.com and http://nwacasa.org
Drupal can be bit complex at first but if you stick with the basic modules - it is great for website content management.You can write your own mini content management system - store text and images(MySQL blob format) in MySQL.It will be couple of PHP admin pages and a good render() function responsible for page rendering.
Also have a look at wordpress, it is much easier than drupal. It is less powerful but it may serve your needs. You will NOT need to configure modules like FCKeditor, with it bcoz they come inbuilt. Anybody will be able to edit the content easily. Do note that wordpress is not just for blogs, you can create different kinds of websites with it. Another choice is Joomla, it is also simpler than drupal. But, wordpress is the simplest.
Maybe it is to much to ask...
I want to make a online WYSIWYG HTML / CSS builder where the graphic designer can build a website template without knowing CSS /HTML. For that purpose there should be a GUI to build a website template.
That means HTML and CSS are created out of the choices selected in the GUI.
http://www.constructyourcss.com kinda does what I want. But I can't set width/height etc + I need to integrate it into my system (I use PHP, MySQL,jQuery)
Question:
Do you know any html/css builder tools like ala jquery sortables?
I don't know of any online tools, but I really like the way this standalone program called Stylizer enables users who don't know CSS very well to modify web site layouts. But honestly, there's no way I'd pay $89 for it. I recommended it to some friends to use it for the trial period, but learn how to use Firebug as well.
That being said, I tend to agree with the comments above. A designer is more likely to learn CSS/HTML and do it themselves or pay a service to convert their pdf into a page.