I have a form with some text fields, I want to know if it is possible to display HTML formatted text in an editable text field.
This is the field:
echo $this->Form->control('instructions');
How I can display it HTML formatted? Do I need a WYSIWYG Plugin or there is another way?
Yes, you will need to add something like CKEditor or TinyMCE to your project. Some potentially useful resources for you:
https://github.com/CakeCoded/CkEditor
http://thecoderain.blogspot.com/2017/07/cakephp-3x-add-text-editor-tinyMCE.html
https://www.froala.com/wysiwyg-editor/docs/framework-plugins/cakephp
https://plugins.cakephp.org/packages?category=wysiwyg-editors
Look at the html code generated with the browser inspector, and look at the id of the textarea you want to convert, then just write the necessary JS
Related
Is there a input type in html which is similar to the tag input file in stackoverflow or youtube
I want, that the user can add like 5 strings (or tags).
I hope you can help me...
Use the following library for multiple tags. It's Awesome.
https://select2.org/tagging
You need to add jquery CDN in your HTML.
For a while, I have been trying to figure how to make html form with style atributes where users can style their posts for example (Bold,Center,Font-Size,Link,Image and more).
I'm not very good at english and maybe I am writing my question wrong, but checked out and didn't found any example how to do this, and how this styled information is stored in db.
Image for example, what I want to do: Image
You should use textarea as a field and convert that textarea into editor using jquery.
You can refer Responsive WYSIWYG Text Editor for making textarea to editor.
I am working on a php project which involves jquery and ajax. The data gets processed through ajax call and the message gets displayed in an email dialog box.
I want the email to be html enabled but the thing is that html tags should be invisible for display before hitting send button. Looking for some help. Thanks in advance.
You can display the content using javascripts innerHTML. It will show the content as marked up by the html, not the html tags and plain text.
Have you tried any code yet? It is not clear what you are trying to do, perhaps you wish for the user to be able to edit the email, if so you would need to use a script that supported your needs.
You say the you are displaying the response which you get from the php server. This approach is not so tidy but if you want this might be a simple solution. Use php strip_tags() and create a different response and add it to your response string with an identifiable key. The you have two response values which one can be used to show to the user and the other can be emailed which contains the original html included response.
you can display the response without the html tags to the user.
Your question is unclear. Are you displaying the response of the ajax call in a textarea? If so, then you can't get rid of the html tags because you will lose all the formatting.
If the content needs to be editable then perhaps try an embedded WYSIWYG editor such as TinyMCE.
If the content doesn't need to be editable then simply insert the html into a div instead of a textarea. See https://api.jquery.com/html/
If you simply want to strip tags then the strip_tags() PHP function will do that for you.
I've been trying for a while now to find a decent way to insert and modify text in a tinyMCE textarea using jQuery with little success. Most of the answers that people provide are generally only being used for a single tinyMCE textarea, or by calling a tinyMCE field based off of an ID. This is all well and good but my project has me creating repeated fields dynamically on the page, which makes it difficult to get a specific tinyMCE element.
Before I implemented tinyMCE I was calling the repeated fields by their class in association with a parent div.
Ex:
$(this).parents(".main-category").find(".js-description").val(product_data['description_' + $('#language').val()]);
The above code is run when I change the product via dropbox. "$(this)" being the dropbox, it then calls for the parent div and finds the description textarea where it would then input the correct default data (passed through from a controller) into the field.
the problem here is that when you initialize tinyMCE, the original text area is all but buried and become inaccessible with this method.
the tinyMCE site provides documentation for how to insert text into a tinyMCE field, but these only work when there's a single tinyMCE element on the page or when you are manually inserting the fields yourself.
// Sets the HTML contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html');
// Sets the raw contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html', {format : 'raw'});
// Sets the content of a specific editor (my_editor in this example)
tinyMCE.get('my_editor').setContent(data);
// Sets the bbcode contents of the activeEditor editor if the bbcode plugin was added
tinyMCE.activeEditor.setContent('[b]some[/b] html', {format : 'bbcode'});
Is there any way to convert any of these into something that I could use? Or is there some other method that I can use to insert information into the text areas?
Thanks in advance!
Yes, the tinymce source element becomes inaccessible when the editor gets initialized. This is necessary because tinymce creates a new contenteditable iframe which is then used to edit text. The editor text gets writen back to the former textarea on several events.
You asked for a jQuery way to acces the tinymce editor content. This is possible.
The following example shows howto acces the editor body element, looks for a html element with class .js-description and resets its value.
var editor = tinymce.activeEditor || tinymce.get('my_editor_id') || tinymce.editors[0];
$(editor.getBody()).find(".js-description").val('new_val');
I am trying out NicEdit witch is super light weight and easy to install. The problem is when I use NicEdit its working fine changing content in the textarea - but when I save my content there is no HTML tags in the post? Its all in clear text... Any ideas?
How are you saving with NicEdit?
You can not get the value using "var variable = $("#id").val();" because that will just get the text in the textarea.
NicEdit has a built in ajax save function that you can use. Check out http://wiki.nicedit.com/w/page/519/FrontPage and click on Saving via Ajax.