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.
Related
I'm looking to find a way to show an image in some various 2sxc drop-down controls. The image would help visualize some style guides. The most obvious example would be where we have a drop-down that gives the user the ability to select a few different heading styles. Variances in heading styles are often much more complex than h1,h2,h3,h4 (also some projects could have upwards of 15 heading styles) and if we could give the end-user a visual representation of how each drop-down might alter the view, I think this would go a long ways to help end users managing content.
This gets a little complex because while something like content types and views already have an image thumbnail, in a more dynamic content type with more flexible data entities, the end result could vary significantly.
I think drop-downs are the most common use case for a image representation because drop-downs or bools often have the largest change in final view code.
I don't think there is currently a way to do something like that unless you want to build your own custom input controls (which I do think is possible). A useful alternative is the Notes field for your Content-Type field. This is WYSIWYG and as of v10+, is also visible in the content editor's UI. So you can include a separate reference page link right there. We do this all the time lately. For example, we often use Bootstrap Buttons and Alerts and most sites have these in customized colors, so we include a link to a page (opens in new window/tab) that shows them what the various choices will look like.
Note that in 2sxc 9 and 10 you can create custom input types. It's fairly difficult in V9 and V10 will have a different API (because it's using WebComponents now). It's still not final and not documented, but that would be an option. If it's really urgent you can contact us through 2sxc.org
I need to implement a specific text object in QEdit PyQt. I need rich objects that will content special information, capture the keyboard arrow keys only when cursor text is on these objects. They need support selection and copy / paste operations also. Outside of them, the cursor must act as normal behavior. At this time, the object does not need to show images or svg etc. Is only for capture text cursor purposes and to store specific information related with the object.
I read that I can implement a customized text object with this example:
textobject.py
but the example does not contain information about implement new html tags, how to capture focus, etc.
My questions are:
How can I add a new html tag related with my custom object for loading and saving documents?
How can I detect when text cursor is on the custom object to modify keyboard cursor behavior?
PyQt documentation says:
"Copy and Paste operations ignore custom text objects."
So is no way to implement copy / paste functionality?
How can I access to my custom object content?
I want to have specifics methods to navigate within the information contained in the object. I could save this information in another object, but I need to synchronize the information with the cursor because a document can contain many of these objects.
Context for my application: I'm developping a very specific application for blind users. I am blind myself. I need to make very specifics customizations to the Richttext area for accessibility. The goal is to develop an accessible math equation editor. For this, I need to add support for mathMl tag. I will process mathMl content inside these tags in my custom object, this part is already implemented at basic level without using any GUI framework. At this time I don't need to show the equation in the screen, I let to screen readers interact with my editor via a COM object. At this time, the equation box is functional, but I need to integrate this functionality in a rich text area. the idea is, a document can contain N math expressions that can be read, modified and saved in a document.
I plan to implement accessibility for sighted people also in the equation editor, but it is beyond my skills and is not a priority right now.
Also I need to accessibilize tables in rich text area, currently tables are not accesible in QT. Then I think to extend qt table functionality. Style elements like headings etc, does not exist in pyQt. OK, you can write a paragraph with heading style, but screen readers can't detect it. So I need to develop this functionality. I could solve it with customized objects I think.
Currently it need to work in windows only. Maybe later I'll consider other platforms.
I started to program in pyQt yesterday, but I already read a lot of documentation. I wrote a basic rich text editor to test my requirements.
I already tried to implement this application with wxPython phoenix because I've been using WX for a long time. But I couldn't implement custom text objects and I didn't find documentation about it.
If pyQt is limited for my requirements, could you recoment another gui framework?
Y could consider another languages, I chose Python because Python has many math tools like sympy or numpy, and implement user scripting functionality in the app is very easy.
Sorry for my bad english.
I am new to Umbraco, and just discovered that the Image editor (the one that is included in selectable editors for content rows) does not provide a way to enter a CSS class. This is surprising, considering that it is pretty standard these days to use Bootstrap classes to style images (img-responsive, for example). NOTE: I had planned to add screen shots of this; however, I've been given a message that I cannot do this until I earn 10 something-or-other-points. THIS NOT HELPFUL TO NEW MEMBERS!
While I understand that I can set a class within the Umbraco UI on the containing column div, this is not ideal. I also understand that I could use the Rich Text Editor, but this seems to be overkill for a column that is intended to contain images only.
What I would like to do is modify the existing editor to allow users to enter CSS classes, but I cannot find it.
Has anyone made this modification to your own implementation of Umbraco, and if so, could you guide me to how I could do this?
The image picker just stores the id of the image, it's up to you how you render it, if the classes are the same for all of the images in the column, you can just assign the class in the view/partial that renders the images.
If you want to have different classes for each image, rather than modifying the built in image picker, best practice is to create a new property editor. There is a tutorial on this here: https://our.umbraco.org/documentation/tutorials/Creating-a-Property-Editor/. Modifying the built in one will cause you problems if you ever upgrade Umbraco (your changes will be overwritten). But a custom property editor will be unaffected, and you can also use it on other Umbraco sites that you build!
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.
I thought the web page designer screen in 2005 was mediocre until I used the one in 2008 which I think is bad. There is an interesting white paper here:
http://www.west-wind.com/weblog/posts/484172.aspx
I've gotten very used to these WYSIWYG designers over the years, but I am looking now for a new way.
I make business web apps which call for data entry forms. I don't need anything particularly artistic, but I do need to be able to line up text boxes etc on input forms so that they lkook orderly and are convenient for the user. I use Telerik controls, and my skills with CSS are approaching passable.
People often mention that they don't use the designer, but they rarely state what approach they DO use.
What are some of the alternatives to using the VS designer?
I don't use any WYSIWYG editor for WebForms. I've found that there are no good WYSIWYG editors for HTML, let alone ASP.net.
My suggestion is to learn enough HTML/CSS/ASP.net that you care code entirely without the WYSIWYG editor. If you can't or don't want to do this, then you'll just have to put up with a marginal editor.
I think a lot of the time when people say they don't use the designer they just use the source view the majority of the time. The reason for this is the designer often generates extra HTML code you don't need or it can even be a hindrance such as adding extra css styles directly to your page, I have also had it create technically invalid html by putting bold tags in the wrong places inside a table (Although it displayed ok in most browsers).
If you are not comfortable with just the source yet, I suggest split view then at least when you are using the designer you can see what it is creating and edit to get it perfect.
Don't trust the designer over seeing your website in a few different browsers.