Does anyone know of a ready-made plugin that allows adding input, textarea, select etc. on tinymce?
The tinymce.dom.Selection API (https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#select) allows you to select elements or set content in the TinyMCE editor. You can assign the API class to an action or an interaction element like a button or form, and any selected content will be replaced with the contents the API action passes in.
If that's not a good fit for what you need, is there an example of the type of adding input, a textarea, or a select you're looking for?
There are no official plugins that allow such interactive elements to be added. TinyMCE is a text editor that is built to create blog posts, articles, etc. By design, it is not a page builder. However, there may be some unofficial plugins on GitHub that may implement such features.
If you are going to insert forms and text areas that should not be edited or reconfigured afterward, you can use templates. They may come as any valid HTML. Thus, some fixed forms can be just saved as templates.
Another way is, of course, inserting HTML directly into the code.
Related
Currently, I am building a feature in which author can decide which text to highlight throughout every single page of the site. In addition, when you hover over the highlighted text, the tooltip of the highlighted text will show the text's definition.
My idea is that the author will be given a component on a page. When the user open the component dialog, it will be given a multi-field to enter "text" and "definition" as a key-value pair. Since this data is not private, so I will render the data on a page, and use JavaScript to read data from the page and store in a dictionary. Each time you load a page, JavaScript will check for the text in dictionary and do the trick.
I am not sure if my idea is a good idea. I am concerned that the site will be very slow on mobile if I do it in JavaScript. Is there a better approach to do the trick in Java model or anywhere on server side?
I have tinymce inserting posts into a database where they'll be subsequently pulled and put into a webpage. The problem is that some of the elements are interfering with page elements.
eg. Maybe the HTML that's being copy / pasted will have a table HTML tag with an id that conflicts with another id already on the page. Or maybe in the style attribute there'll be a z-index so the post cover up certain elements of the page.
I don't really want to blacklist attributes because (XSS considerations aside) I'm thinking all should be considered fair game (well maybe not event handlers) and if it interferes with the layout I can disable those specific tags / attributes on a case by case basis.
Any ideas?
There are several ways to filter your content:
use the tinymce paste_preprocess parameter to filter pasted content before insertion
you may use the valid_elements, valid_children and extended_valid_elements setting to allow which elements and attributes tinymce accepts as valid html tags (this is something you don't want?)
you can filter your code before writing it to your database
You could filter it when putting the content from database into another web page
I am building a website on django-cms. In some pages I want to add javascript to django-cms pages(not templates).
How can I escape the script tag in django-cms wysiwyg editor, whenever I tried to add alert in page, it get executed as soon as write the word "alert".
Any pointers or suggestions would be great
Thanks
script tags (and any other insecure tag) is not allowed in the django-cms default text editor. See http://wiki.whatwg.org/wiki/Sanitization_rules for a list of sanitization rules that get applied.
You cannot override or disable these rules.
If you need users to add script tags, write a custom CMS Plugin (see http://docs.django-cms.org/en/2.4.0/extending_cms/custom_plugins.html) that allows your users to do this. I recommend you don't actually let them write the script tag, but rather provide them with a form that will sanitize/validate the input and generate the script tag.
I have a requirement where I HAVE TO use bootstrap autocomplete dropdown, BUT user can have free form text in that dropdown if they wish. Before you think about TypeAhead, I could use Bootstrap TypeAhead textbox, but I need to have the dropdown becasue we want to give some default values as headstart options in case users dont know what to search for.
I am using this with MVC DropDownListFor as that creates a select control for us.
I found this article which does that for me.
https://github.com/danielfarrell/bootstrap-combobox/pull/20
All I had to do was take off the name from the select control and the control was letting me enter free form text. All good so far.
Now, I am using this in conjunction with Knockoutjs. I bind my options and selected value to the select control and then on row rendered of my template, I called (selector).combobox() which makes the select control a bootstrap comobobox and adds an input control and hides the select control in the scenes behind.
The problem now is when I try to get he values to post to server, since the value I put in input box is not a valid options from the options I gave to select control, it is always setting it to the first option by default. This is becasue, I set the binding of the selected value on select control and not on the input box which was created by bootstrap-combobox.js.
My question is how do I get the input box to data-bind to the same porperty as the the select control was bound to.
Any other options??
Let me know if you need more clarification or have questions.
Please suggest.
Thanks.
Have a look at Select2 for Bootstrap. It should be able to do everything you need.
Another good option is Selectize.js. It feels a bit more native to Bootstrap.
Does the basic HTML5 datalist work? It's clean and you don't have to play around with the messy third party code. W3SCHOOL tutorial
The MDN Documentation is very eloquent and features examples.
Select2 for Bootstrap 3 native plugin
https://fk.github.io/select2-bootstrap-css/index.html
this plugin uses select2 jquery plugin
nuget
PM> Install-Package Select2-Bootstrap
Fuel UX combobox has all the features you would expect.
Can i suggest http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html, works more like the twitter post suggestion where it gives you a list of users or topics based on # or # tags,
view demo here: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/
in this one you can easily change the # and # to anything you want
Bootstrap Tokenfield seems good too: http://sliptree.github.io/bootstrap-tokenfield/
i am building a webapp that will have notes fields all over the place, but i dont know what kind of markup i should use.
these are my requirements
User must be able to change the text style (bold, italic, underlined)
User must be able to create bullet lists
User must be able to create numbered lists
User must be able to change the font-size or use pre-definded headings
User must be able to add links
User must have a WYSIWYG - Editor that hides the actual markup
the last one is the most important requirement, my target users struggle even with word, so using markup style input like here on stackoverflow is not an option.
so what kind`s of markup do you know that fits ans has some fancy WYSIWYG - Editor?
if you think that i missed a important requirement please feel free to suggest it.
tia
You'll need to check out tinyMCE.
It's the best javascript-based WYSIWYG editor I've found.