Ok im struggling to find anything on this as im probably searching the wrong keywords.
I have a backed form thats use to display content on a page. When entering the details i want to be able to use a basic text editor to style the text, like bold, bullets, underline.
On top of that i would also like to allow them to wrap section in paragraph tabs, apply a certain style i.e style id="x".
Its more for backend so it doesnt have to be really user friendly but if there was an uncomplicated way of showing the styles in the form as i apply them, basically a WYSIWYG view. If not i will settle for applying the styles without having to see all the hmtl and css tags in the editor but when the information is passed via the INSERT query it will show pass all the relevant code like My Style and so on.
Now im quite happy to spend the time learning how to do this if you point me in the right direction but i have no idea what keywords to search. Ideally if there is a script out there i can just edit to my needs would be great too rather than starting from scratch.
Finally since im learning php and mysql still keeping it dumbed down will help and also since my values im passing is going to be full of characters the code wont like what functions should i look up to pass the code and content into the database to avoid breaking the code
I'm not entirely sure what you mean, but it seems you can achieve what you want using an editor like for example TinyMCE in combination with JQuery?
With JQuery you can show/hide items and ander your css like
$("p").mouseover(function () {
$(this).css("color","red");
});
Related
I am planning to create a rich text editor in Flutter for a personal application. I know there are already some options like zefyr. However, it is still in dev preview and I want to build something a bit different.
The features of the text editor will be that users can add images, bolden text, add lists, italicize text, etc. Just basic text editor things.
Where I am having issues is in the text input side of things. The flutter default text input only allows one style of text per text field. So that would pose a great challenge when it comes to inline styling. Also, a text field cannot have an image inside it, so that is another problem.
If anyone has any ideas on how to go about this, it will be great for a start.
So, I am really asking for the approach to create the editor because it is not as simple as creating one in html
Are there plugins that achieve the following:
You can add text blocks into a section of a page (left, right, normal,bottom). the text isnt shown ommediately but after clicking the title/header of the text block which slides open the text. I'm in need of such an extension as I want to place much content on a site without throwing the whole text on a viewer. There seem not to ve any available.
By default TYPO3 doesn't force any particular frontend library so probably you won't find such ext (maybe somebody created extension like this but for 99% it will be required to fit it tou your needs)
Instead there are generic extensions like Grid Elements or Dynamic Content Elements (DCE) - you can use it to predefine your custom HTML structures and then reuse them easily (no need for advanced PHP programming of your own plugins).
So finally you can combine them with dedicated JS libs for frontend i.e. Bootstrap and its Accordion Collapse
If you use TYPO3 6.2 or higher have a look at df_contentslide. After install you'll find another section under appearance in CEs. Now you can slide every content element. It is easy to use and with little knowledge also easy to style.
I'm building an extended editor around TinyMCE and I have to implement a Math formula module. I've choosen Mathjax for formula rendering, using plain html/css. So far, I've managed to create a plugin that popup a panel with a textarea, you can enter your latex in, there's a preview in the panel.
Once you validate the formula, it's injected into tinymce content. This new content is A LOT of spans with inlined styles, and OF COURSE, I don't want tinymce to be able to edit that directly. (sidenote: we only store latex, not the rendered html output from mathjax)
Basically, I want that a piece of html inside Tinymce to be ignored totally, but displayed in place. I want my carret to be able to move before that piece of html, and after, but not inside.
The "non editable content" plugin seems to be close of what I'm looking for, but it has some limitation (you can't ADD no editable content on the fly, having nested html content inside an element flagged as "non editable" broke some things, etc.)
Is someone could help with that ? I started to tweak the non editable plugin, but it's really really hard to understand existing code. Has someone already did something like that, or is there another third party plugin ?
thanks
I am new to GWT and am having a hard time finding any good tutorials focused especially on teaching styling with GWT. The few examples I've found provided by Google are rather paltry, and don't really explain much.
Some things I'm trying to do would be:
Change the global font style
Change existing widgets' styling, such as the background color of a
selected item in a CellTree
Replace a button's text with an image instead
Remove borders of text fields
the list goes on
I've been searching and searching, and am not finding anything particularly helpful with styling, so any advice/direction would be greatly appreciated! Thank you!
Styling in GWT is done almost entirely with CSS. You can link an ordinary CSS file to your host html, as you would with a normal website, and its rules will apply just as normal CSS does with normal HTML. GWT provides a couple of ways to optimize your CSS, and that gets pretty complicated, but at a basic level you can just use Firebug to look at the HTML of your app, figure out what CSS you need from that, and throw it in your css file. GWT applies many special styles to the widgets that come built-in, and you can learn all of those style names from the generated HTML and the documentation.
Does anyone know of a GWT widget that works like a spelling suggestor?
Ideally it would be similar to this: http://www.polishmywriting.com/
I need a click-triggered popup on user generated text so that I can suggest replacements (I am not building a spell-checker, but something similar). I also really like the way the polishmywriting menu is set up (when you click on an underlined word).
Is there a widget that would allow me to make something similar?
Basically I'm trying to clone the little popups used by spellchecking in Gmail and polishmywriting.
If not, what would be my first step to make it?
Thanks for your time and answers,
DTrejo
Have you had any luck yet? I know it's been quite a lot of time, but found this just now.
It is a very specific widget, so maybe you won't be able to find exactly what you are looking for. In that case, making one from scratch might prove as a challenge.
The first thing you will notice is that a regular gwt TextArea won't do the job of holding the text. You will need something more flexible to dynamically put clickable labels in the text itself.
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control, released as Open Source.
http://en.wikipedia.org/wiki/TinyMCE
There is also a gwt wrapper available, so you might find that useful:
http://code.google.com/p/tinymce-gwt/
If you check the polishmywriting editor after the spell checking markup is displayed, you will notice it is not a TextArea. The text is a series of paragraphs and the labeled parts are span elements. This are the elements you can easily access with gwt and put some click handlers there to open the popup.
And for the popups, it shouldn't be difficult. Use a standard gwt PopupPanel. The popup panel can be displayed in a relative position to other elements displayed on the page:
popup.showRelativeTo(otherElement);
If you did find something useful in the mean time, feel free to share.