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.
Related
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.
I am using Orchard v.1.9.2.0. I made a custom Content Definition called Event Page. Here is a screen shot of the Fields and Parts I created for it:
My question is... I want to be able to control the "Event Detail Page" layout, so that I can place each of these fields exactly where I want to place them.
Right now, by default, Content.cshtml has #Display(Model.Content) and writes out all of these fields out to the page on its own.
I thought I can achieve this with the Layouts feature, but I don't see these newly defined fields in the layout editor. I am now thinking, can I just display each of these fields directly into content.cshtml?
For example, in my custom Content Type, I have a field called Event Logo, I tried using #Display(Model.Content.EventPage.EventLogo), however all it renders is Orchard.MediaLibrary.Fields.MediaLibraryPickerField in plain text to the browser.
It's strange, fields should be in a toolbox when you create/edit Event Page (if you create layout that fields don't be shown in the toolbox).
Using fields in layout make sence if you are using field values (or planning use it) in different places (summary view, projection). Otherwise it will be simpler to use layout elements (like html, image, paragraph, etc.)
If you have certain page structure which only that fields are used in. It probably be simpler to configurate positions through placement.info (that you will have opportunity to modify structure for all Event Page in one place and content managers will be spared of building the correct page structure).
You can include fields to any local zone through placement.info
<Match ContentType="EventPage">
<Match DisplayType="Detail">
<Place Fields_Common_Text-LatestNew="LatestNewsAndRaceResultLocalZoneName:1"
Fields_Common_Text-RaceResults="LatestNewsAndRaceResultLocalZoneName:2"
Fields_MediaLibraryPicker-EventLogo="OtherLocalZoneName:1"
/>
</Match>
</Match>
and then create alternate Content-EventPage.Detail.cshtml (by copying and renaming Content.cshtml).
Finally inside Content-EventPage.Detail.cshtml you can use
#Display(Model.LatestNewsAndRaceResultLocalZoneName)
#Display(Model.OtherLocalZoneName)
I'd like to achieve the following and I'm looking for ideas. I have a document and I want to represent/transform this content in/to a nice SAPUI5 framework. My idea is the following: a split app with having the paragraph titles in the master view (plus a search function on top) and the respective content in the detail view.
I'd like to know from you if
a) you might want to share your ideas and hints on alternatives.
b) this can be achieved within one single file (i.e. all the code for the split app and document content in one html) and maybe using pure html code (xml also feasible) - against the background of easily handing a large amount of text available in html.
c) if you happen to have/know a reusable template.
Thanks in advance!
An interesting question. I went through a similar exercise once, re-presenting my site with UI5.
To your questions:
(a) I would think that the approach you suggest is a good one
(b) You can indeed include all the app in a single file, I do that often by using script templates, even with XML Views. You can see some examples in my sapui5bin repository, in particular in the SinglePageExamples folder. Have a look at this html file for example: https://github.com/qmacro/sapui5bin/blob/master/SinglePageExamples/SAP-Inside-Track-Sheffield-2014/end.html
What I would suggest is, rather than intermingle the document content and the app & view definitions, maintain the content of your document separately, for example, in XML or JSON, and use a client side model to load it in and bind the parts to the right places.
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."
As a part of my current pet project, I have to write an program that takes as input the specification of a form and generates as output the necessary HTML and CSS code to display the form as a Web page. The exact input format is irrelevant to this question, but the information it contains is similar to the information in a Visual Basic 6 form file, minus the Visual Basic code. In particular, the sizes and positions of the form's controls are represented as XY pairs in an absolute coordinate system.
The main problem I am facing is that I do not know how to map the information contained in the input format (control sizes and positions, tab order, etc.) to the information contained in the HTML and CSS files (when to use placeholder divs, when to use CSS floats, etc.).
I emphasize on the word information because I do of course know how to generate HTML- and CSS-formatted files given the information they should contain.
In particular, the sizes and positions of the form's controls are
represented as XY pairs in an absolute coordinate system.
In that case, the easiest method is to use absolute positioning.
Something like this: http://jsfiddle.net/R8K6u/
You should be able to directly map width/height/left/top from the VB6 equivalent.