Create custom templates using ckeditor, tinymce or any online editor - html

I am not sure if the title represents what exactly I need to do, But here is the details. I am building a website using PHP that allows people to create different templates, then they should select one of them and then fill the fields to fill the placeholders. For example consider the following image
The name of the recipient could be a placeholder so some part of the template can be
Dear {recipient}
{body}
and I prepare two fields for recipient and the body and it will be replaced by the value of the corresponding field. I can do this. What I can't do is how to let the user to align the placeholders in the paper. For example there is a placeholder for the date that must be at right of the page, or any other placeholder that can be place inside the paper (same as the following image). I would like to know if ckeditor or any other editor allows me to create such template?
The structure of the template must be kept in A4 or A5 print page.

I’m having trouble understanding your question. If you're looking for templates in TinyMCE editor, I think you should try using template plugin for tinymce - there is one for wordpress. You can write your own plugin too, there was question about it.

Related

How can I get our WYSIWYG editor to stop removing HTML comments, CSS classes and inline styles?

We currently use wysihtml5-rails to let our users edit emails before they are sent but this is not working out so well for a few reasons.
I need the comments to allow for Outlook specific comments like these . All comments are being removed, currently.
I also need the CSS classes to be untouched as the editor content will be a pre-generated email that includes CSS classes. Our editor will only keep classes that are whitelisted but this is annoying as we need to update that list with every change.
Same goes for inline styles. Some of the styles in the generated email are inline instead of in classes. Those need to be kept but they are being removed.
Is there any way I can get our editor to work this way?
I found a solution but it's hacky.
I realized that the raw HTML was being stored on the page in a hidden textarea tag. Interestingly, all the elements that I needed (CSS classes, comments) were still there. But when submitting the form, the value of this textarea was replaced with the parsed results from the editor which gets sent to the server. All the comments and classes are gone from this text.
The solution was then to create a second field that takes the unparsed value from the WYSIWYG editor and sends that along. Easy in rails but just making this new field part of a form. Then the controller can choose which value to take. In my case, I renamed the existing message field to parsed_message. Then added a new message field which will hold the unparsed message.
The WYSIWYG editor we are using allows this by having a method that can be called at any time: window.email_editor.getValue(). Here the email_editor is the editor instantiated by the javascript on the page.

How to add type script variable on angular HTML editor content

I want to create dynamic letter in angular using HTML editor. Also I need to add some variable from type script in HTML editor content
Like this image
when I view this letter I want to set value for this {{NAME}} variable from type script. Can some one help me ? This is my fist question in stack overflow
The image I can see, is not a html editor rather it's a content editor. Please use template interpolation in html editor where you've html tag
like
my name is {{first_name}}
where first_name is your dynamic variable..
Hope you can understand what I mean to say.

Ckeditor Fixed HTML Structure

Is it possible to have a fixed structure for the HTML using CKEditor. For example, HTML5 placeholders are shown in editor as user hints so user know where to enter what content. Further, it should be possible that user shouldn't be able to change the structure.
An example structure may look like this and placeholder text is shown till user enters the text.
Title Only
....
...
...
As mentioned above, user shouldn't be able to change the structure/order of the sections.
This is a perfect use case for a CKEditor widget.
In short, widgets are special rich content units in that they are groups of elements which are treated as a single entity inside the editor. Once developed, their structure (but not necessarily their content) is immutable and enforced by the CKEditor instance they are used in. These entities can thus be selected and deleted or moved freely as a whole around the editing area, keeping their predefined structure intact. At the same time all the individual parts of the widget (its "building blocks") can be edited or configured separately, again, without affecting the whole widget entity and its structure in the process. Read more here: http://docs.ckeditor.com/#!/guide/dev_widgets
In your case, you could have a look at the sample Simple Box widget which is demoed here and actually created step-by-step in this tutorial. It creates a simple template widget with an immutable structure and pre-defined fields for the users to fill in. What's more, thanks to ACF (CKEditor content filtering mechanism) you are even able to define the elements (and their attributes, styles, classes) that are allowed in each of the widget parts.
Widgets are a really powerful tool, you can see some other implementations of the widget API in the widget demo.

Headings created inside of a template

I have a number of templates that create headings based on a formula. I am wondering if there is anyway to create an "edit" link that will take you directly to that section? The way that it currently works, the edit link takes you to editing the template itself. Could I possibly create a customized link that would keep you on the page and take you to right part?
Here is some sample code to help clear things up...
Template:Head:
==={{{1}}}===
This is a heading titled "{{{1}}}"
Test Page:
=Section 1=
{{head|1.1}}
{{head|1.2}}
{{head|1.3}}
=Section 2=
{{head|2.1}}
{{head|2.2}}
{{head|2.3}}
At the moment, if I want to edit the information for template "2.3", I have to edit all of section 2. (Note that for this example, that isn't a big deal. For the actual templates I am working with on my site, the templates have dozens of parameters and there are sometimes 10 or more in a section.)
Bottom line, is there way to create a custom edit link inside of the {{head}} template that would take you directly to editing the templates call on the page "Test Page"? Hope that makes sense.
Edit: Is there perhaps a way to make use of "anchor" tags? Can anchors be passed in to the URL?
To restate your problem, when you transclude a section heading the header isn't treated as being part of the destination page, so the edit link takes you back to the source. So you need a separate container for the template in order to edit it individually, and a complete section is the smallest editable container.
The only way I can think of doing this is using subpages (or virtual subpages if you don't have that ennabled in this namespace, doesn't change anything). So instead of placing {{head|1.1}} on MyPage, put it on MyPage/Subpage1 and then transclude that into MyPage in the usual way ({{:MyPage/Subpage1}}).
{{head}} can then include a custom edit link to the template input by using HTML heading tags (<h2> is equal to ==, etc.) to suppress the standard edit link and then use one of these templates (probably {{ed right}}) to create a custom edit link pointing to MyPage/Subpage1.
The way to create anchors in Mediawiki, by the way, is to use a <span id="name"/> tag, but that doesn't create a container that can be edited (or at least, not that I've been able to work out through URL tinkering).
I'm pretty sure there's no way to do that. As far as MediaWiki's section editing feature is concerned, the only thing that begins a new section is a line of the form:
=== Some text here ===
with the number of = signs determining the level of the heading. There's no way to get MediaWiki to let you edit any segment of the document that doesn't begin and end with such a line (or the beginning or end of the page).
Well, OK, I'm sure you technically could do it with an extension, in the sense that you can do anything with a MediaWiki extension. All you'd need to do is provide some way (e.g. a special parameter in an edit URL) for to user to indicate "I want to edit this template", then extract the template from the wikitext, present it to the user for editing, and write the result back into the page text over the original.
The tricky part will be extracting the template from the page source. (Finding and replacing templates on a page is a fairly common task for MediaWiki bot writers, so you might want to look for ideas there.) Whatever method you end up using for that, there will probably be edge cases where you need to give up and tell the user "Sorry, but I can't figure out how that template is transcluded here."

How can I send information from one html page to another?

I want to create an html page which contains a text box. When I am given input and the Enter key is pressed, I want it to go to another html page and display the typed keyword.
How can I do this?
I think you need to use a server-side scripting language to facilitate the manipulation of the inputted data on the form, so that it gets "saved" and displayed in the other html page. I suggest you try reading about PHP, and then turn to handling information in Web Forms...just a thought!
You can use Javascript for that. Check this Tutorial : How do I pass variables between two pages? (GET method)