Adding hyperlinks to the Description field - plone

I am a user, not a programmer, whose forthcoming new website on Plone 4 requires adding hyperlinks inside the Description field of pages and folders. This is needed to point specific words to our website Dictionary as we had been doing on EZ Publish for the last 10 years.
Our developer says this can't be done in Plone. I'm looking to help them find how to do this (they don't seem to use English-language forums).
Is there an existing add-on or existing code for this? If not, is it possible to code this in? How? If not, will it become standard in Plone 5?

<a href="http://python.org>Python</a> will not work, as the description-field is ment and used as a meta-information of an item, holding plain-text only, and doesn't allow the usage of html-elements, nor embedded Javascript. That's probably why T. K. Nguyen recommends to provide an additional rich-text-field.
But you can use reStrucuredText instead. Tell your developer to exchange the description-snippet in concerned templates to:
<div tal:define="Std modules/Products.PythonScripts/standard;
restructured_text nocall: Std/restructured_text;"
tal:content="structure python: restructured_text(context.Description())">
</div>
It will transform any word starting with 'http:' or 'https:' to a link, furthermore will also recognize mail-addresses like 'someone#plone.org' and transform them to mail-links (on click opens the user's default mail-client, if available, with the address pre-populated in the 'To'-field).
If you want to have named links, use the reStrucutredText-syntax for the input, like this:
`Check out Python`_, you'll love it.
`Write a mail`_ to someone.
.. _Python: http://www.python.org
.. _Write a mail: someone#example.org
The tricky part is to figure out, which templates are affected, but it's doable of my experience (did it with preserving line-breaks in listing-views, not reStructuredText).
Alternatively use a JS-workaround, as proposed by T. K. Nguyen. Be aware though, that it may break accessibility to some users.

It is possible to customize the description fields to be rich text (HTML) instead of plain text, but it requires a developer.
You can also use JavaScript to look at a description field and replace (for example) any string that starts with "http" with a hyperlink pointing to that URL. Your developer would have to look for examples of such JavaScript code and then would have to know how to register it on your site and then invoke it.
This describes how to do something similar, for PloneFormGen field help text (which is also plain text):
https://designinterventionsystems.com/blog/how-to-make-urls-clickable-in-ploneformgen-field-help-text
It might be easier to have your developer create a new rich-text description field and have all your content types include that new field. That, however, would require that you update the view templates for those modified content types. This is much easier with Dexterity, which ships with Plone 5 and is available for use with Plone 4.x.

imho it's a really bad idea to convert the description field to any richttext (html, rst, md) field. You need to change a hole bunch of templates to avoid html code rendered everywhere.
Example:
search
collections
content
portlets
Addons
The description is also often used as title attribute on links, in those cases you need to convert it to plain/text. And there are several more issues, where you could ran into.
As #T. Kim Nguyen wrote: Consider add a new textfield and show it, where necessary, probably implemented as a Viewlet in the below title slot.

Looking at your current site, it seems like you want this to provide a teaser for each article, which may contain links. If that is the case, then you can find other ways to do this without making the description html.
For instance, if you used collective.cover for your portal/collection pages then a Rich Text Tile would allow you to cut down the the object text to an appropriate size, but still edit it with a Rich Text editor, and keep/insert hyperlinks.

Related

How to style content coming from a Headless CMS?

Last month I read about Headless CMS for the first time, and I just felt in loved with that approach.
But just right after, I wondered how could I format and/or add style to the content if some day I worked with this technology.
By styling the content, I mean words within a title, paragraph and so on; not a whole paragraph, which is quite obvious it can be done.
It seems to me that it is impossible, since you only get a JSON with no HTML whatsoever; just raw texts. So it looks like this is the major downside of consuming content through a Headless CMS from a Front End perspective.
Formatting text is just fundamental, specially when dealing with large content. And I am sure I cannot be the first one concerned about not being able to add some bold and/or italics to a text to emphasize the important parts of it.
But I can't find any website discussing this topic, just "how to model the content" and whatnot.
Does really no one care about it?
I would appreciate if anyone could shed some light about this question.
Diving into the Headless CMS #RicoHancock has pointed out, I've learnt that it is completely feasible to store rich text and strucuted content within a JSON that can be converted to HTML following some specifications I wasn't aware of.
In the particular case of DatoCMS, they use a specification called dast.
To learn more about it, visit their docs (the following link contains very illustrative code examples):
https://www.datocms.com/docs/structured-text/dast
Paraphrasing their own words:
Structured Text format adheres to the Unified collective, which offers a big ecosystem of utilities to parse, transform, manipulate, convert and serialize content of any kind.
The "Unified collective" is a collective of free and open source packages to work with content as structured data with plugins. In order to create the syntax trees, Unified uses UNIST nodes.
UNIST is a specification, and stands for "UNiversal Syntax Tree".
More info about the UNIST spec and the Unified ecosystem:
https://github.com/syntax-tree/unist
https://unifiedjs.com/learn/guide/introduction-to-unified/
https://unifiedjs.com/learn/guide/using-unified/
TLDR: Markdown.
The company I work for uses DatoCMS. We have a blog, and each blog post is created in our CMS by our copywriting team. DatoCMS allows us (the developers) to create "blocks" that make up the blog post. We have image blocks and content blocks that are rendered by a template file on our frontend. The content blocks support Markdown, so italics, bold, and links work. When our copywriting/marketing team want to make a new blog post, they go to the CMS, create a new post, add a title, slug, and blocks, and then save.
I don't have much experience with other Headless CMS', so not sure if Markdown will work there, but I don't know why it wouldn't, Markdown is all over the internet. (In fact, this answer is Markdown XD)

Embed editable MS Word document on web page

I need to present Word and PDF documents in a read-only preview, via an ASPX/HTML page to my internal users. In a related requirement, I need to present editable Word documents, via ab ASPX/HTML page, to parties outside of our network - effectively the public.
We cannot rely upon Word or Adobe-type PDF plugins being available on the destination PC.
Can anyone suggest a way to do this?
Edit - For clarity, the document/data would ideally stay on our own servers.
What about using Google Docs API? You could use either their word-like doc or a form to get the data you need, and then present that internally.
Not sure if this meets all of your requirements, or is an available option.
For our company, we have a few tools that utilize Google Docs. We upload data dynamically to them for specific needs.
Based on your requirements, maybe it's best to just write your own. I haven't created a Rich Text Editor. But it looks like there are quite a few tutorials online. Here is a basic tutorial for a rich text editor. It's using javascript, HTML, & CSS. If you prefer to not use js, then you may need to look for other tutorials.
This isn't the most glamorous solution, as it looks like the users view would be HTML. I'd think you could have it updating dynamically off to the side with an actual rich text view (similar to how Stack Overflow has theirs below an answer or question being written).
Update
Over the weekend I was exploring HTML5's contenteditable attribute, I came across an editor that builds off of that called Aloha Editor. It's a WYSIWYG type editor. But if that's something that you desire for your clients, than this would probably be a pretty simple integration. I have yet to use it, but it seems like it would be a great fit - if you decide to go the route of building your own editor.
You could use the Zoho API or, if you need to keep all data on your own servers and validated clients at all times, you could try the Aspose components.
If you're interested to provide documents in a view-only way then you can try GroupDocs as well: http://groupdocs.com/. They offer viewers for different file types which you can add to your website very easily: http://groupdocs.com/apps/viewer.
Since you need to keep data on your own server, aceoffix can be one of your alternative. It is a plugin installed on your own server and save all data on your server too.

Multilingual drupal website with views

I'm trying to make a multilingual website in Drupal. My languages that I need are german, dutch, english and french. I've added the i18n module and added the languages.
I work with views to show my content on the website. For the moment I have one page that I want to translate in the 4 languages. I've created a view for each translation. Now I want to link my view to the correct node. Therefore I use a view field in my content node.
PROBLEM:
My problem lies in the url. The first time everything is fine.
my url: localhost/?q=nl/activiteiten
Now when I select english in my language bar the language changes but not the url. my url: localhost/?q=en/activiteiten
Here "activiteiten" must be "activities". How do I solve this?
I've searched a while for this problem on the drupal forums but I can't seem to find a good solution to this problem. The only thing I've found is working with a view field in the content node or with input_views in the body of your node. These two won't work for me.
i18 module with no need to create a view for each
language, you have to translate content using the i18, then
charge between changing the language.
You can have problems from the beginning did not use the module
all languages ​​declared, you have to edit each
content and save it to associate it well.
Well, just reading your own answer I think you've taken a wrong turn somewhere (or you're trying to do something else and I didn't quite catch on).
To create multilingual views for pages (which is what I think you want to do) you would first create a page view (duh), specify what you want to be shown and define a path to it. Then you enable (if it's not enabled already) the URL-alias ("URL-aliassen") module and define aliases for each language (ie. FR : activites - I don't like accents in URLs :p - NL : activiteiten, DE : aktivitaten - if memory serves me right anyway, again with accents removed :p). These aliases will be used as the path from that moment on.
For an article describing this process refer to : Translating Views paths in Drupal.
BTW You could also use the Pathauto module to create these aliases based on the title of your nodes of course instead of defining them manually, you can even (re)create them in batch when you alter the settings.
Eventually I've solved my problem with a view field. I've made my view and in my node I've selected that view in the list. Then in the body you can type something for that language.

Using QT to build a WYSIWYG Editor for a Custom Markup Language

I'm new to QT, and am trying to figure out the best means of creating a WYSIWYG editor widget for a custom markup language that displays simple text, images, and links. I need to be able to propagate changes from the WYSIWYG editor to the custom markup representation.
As a concrete example of the problem domain, imagine that the custom markup might have a "player" tag which contains a player name and a team name. The markup could look like this:
Last week, <player id="1234"><name>Aaron Rodgers</name><team>Packers</team></player> threw a pass.
This text would display in the editor as:
Last week, Aaron Rodgers of the Packers threw a pass.
The player name and the team name would be editable directly within the editor in standard WYSIWYG fashion, so that my users do not have to learn any markup. Also, when the player name is moused-over, a details pop-up will appear about that player, and similarly for the team.
With that long introduction, I'm trying to figure out where to start with QT. It seems that the most logical option would be the Rich Text API using a QTextDocument. This approach seems less than ideal given the limitations of a QTextDocument:
I can't figure out how to capture navigation events from clicking on links.
Following links on click seems to only be enabled when the QTextEdit is readonly.
Custom objects that implement QTextObjectInterface are ignored in copy-and-paste operations
Any HTML-based markup that is passed to it as Rich Text is retranslated into a series of span tags and lots of other junk, making it extremely difficult to propagate changes from the editor back to the original custom markup.
A second option appears to be QWebKit, which allows for live editing of HTML5 markup, so I could specify a two-way translation between the custom markup and HTML5. I'm not clear on how one would propagate changes from the editor back to the original markup in real-time without re-translating the entire document on every text change. The QWebKit solutions looks like awfully bulky to me (Learning WebKit along with QT) to what should be a relatively simple problem.
I have also considered implementing the WYSIWYG with a custom class using native QT containers, labels, images, and other widgets manually. This seems like the most flexible approach, and the one most likely not to run into unresolvable problems. However, I'm pretty sure that implementing all the details of a normal text editor (selecting text, font changes, cut-and-paste support, undo/redo, dragging of objects, cursor placement, etc.) will be incredibly time consuming.
So, finally, my question: are there any QT gurus out there with some advice on where to start with this sort of project?
BTW, I am using QT because the application is a desktop application that needs platform independence.
Given that I got no advice here, I decided to go with the QTextEdit approach, although I'm actually using a QTextBrowser that is set to be editable so that I can capture link navigation events. I will be using QTextCharFormat's with the link names set to unique identifiers in order to convert from the QTextEdit back to the custom markup. The QTextEdit supports images already, so I won't have to deal with those.
I think I will hit the biggest roadblocks with the fact that I need to be able to insert/grow/shrink tables whose cells can have Excel-style functionality. I have not yet figured that whole process out.

The best approach for multilingual user interface

I am working on a multilingual web application. I'm wondering how do i design the best user interface that the user can localize data for various languages? for instance, in making a page which its title is different in every lang, do i put a textbox for every one? it's not a suitable way to do(in case of 10 lang, the user has 10 textbox!!! too silly)
what is your idea about this?
Edit: i have no problem with globalization in my system. in fact, i'm looking for a good way for my interface design which user can enter his data to my forms in various langs.
thanks in advance
What about only one textfield and a dropdown containing the languages. After selecting the language and filling out the textfield the field gets submitted and the chosen language disappears from the dropdown list.
the entered value and language then appears beneath the dropdown and textbox with a way to edit/delete it. this way it's always clear to the user which languages are already covered and which values are assigned to them. furthermore it's a nicer way if not all 10 languages have to be mandatorily filled in, if the user e.g. just knows english and french.
Hope you know what I mean, otherwise I'll have to create an example screenshot :-)
You could have 3 text boxes, and that's fine...get to 10, and it starts getting a bit crazy. Beyond that it starts looking pretty bad.
Maybe you could put up to say 5 text boxes up...but if it goes beyond 5 (because the user desires localization for more than 5 places) it places a single textbox with a dropdown next to it, and the dropdown would contain the current language.
Textbox would auto-populate with the current value for the language selected in the dropdown. Should work well in asp.net, and it can be done both client side, or server side on a post back pretty easily, so you don't need to do anything crazy for people not running javascript.
You have one text box.
On load you populate the text box depending on language.
The content will be populated from some kind of resource file. If there isn't much text it could even go in your config file.
Be aware of the following:
Different content length depending on language.
Right to Left alphabets screwing up your alignment
This is a classic project for using NUNIT or similar to promve that things work after new translations are added!
What language do you use in development? If this is something like PHP, then you definitely should use templates and load text strings into them from configuration files for every language. In Smarty, for example, I use configuration files for that.
Text strings for error messages or something like that could be put to files like .ini and loaded from there.
The Google Web Toolkit (GWT) demo shows the same page with versions available in English, French, Arabic and Chinese.
The GWT docs have a thorough discussion of internationalization. You could emulate their implementation.
Constants: Useful for localizing typed constant values
Messages: Useful for localizing messages requiring arguments
ConstantsWithLookup: Like Constants but with extra lookup flexibility for highly data-driven applications
Dictionary: Useful when adding a GWT module to existing localized web pages
Remember that dates and times are represented differently in different locales, if your forms use them.
The W3C also discusses Internationalization Best Practices in HTML content.
Normally, a user navigating a website will have a preference specifying the language of the whole site. I think it would be confusing to break this pattern.
So, in an intro page, or a user preferences page, allow the user to select a language; then, on the other pages, display a consistent set of controls to be able to edit the content on each page.
Are you making an administration page that allows users to change the text used in other pages in the application?
If so, you could use grid like in Zeta Resource Editor:
thumbnail http://img202.imageshack.us/img202/7813/zetaresourceeditor02.th.png
Or you could make a per-language list like in nopCommerce:
thumbnail http://img249.imageshack.us/img249/9079/nopcommerce.th.png
You can use javascipts as a resource file for your language like. language_arabic.js, language_english.js,etc.So when a use wants to see his preference language he/she has select the available languages from drop down list. Regarding this the user has to change the language settings from his/her computer. This is what I did while I was working a GIS project to customize a Geocortex IMF( http://demos.geocortex.net/imf-5.2.2/sites/demo_geocortex/jsp/launch.jsp ) site for an Arabic client.

Resources