I need to add HTML using Summernote WYSIWYG editor.
It appears that by default if you type something into it and you check the source, and even in database, you have:
<p>test</p>
I want to add some bootstrap div's using this, but it does not save. I do not trim the content as it is being added only from administrator panel, so it is safe as I am the only admin and there will be no more.
Field that is saving in database is of LONGTEXT type.
Any ideas why this is happening ?!
EDIT: Here is how the current info is stored in database:
Related
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
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'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');
So I am trying to get it so that when I press a button, it inserts umlaut characters into a text area. It's written in javascript and it totally works on any text field I give it EXCEPT the tinymce editor I've given to my body edit box. I know for a fact that the id of the text area is "edit-body-und-0-value." This works if I disable wysiwyg and just have the normal text field as is. However, when I enable tinymce editor with wysiwyg, and I press the umlaut buttons, nothing gets inserted into the tinymce editor. Do you guys know how I could solve the problem?
TinyMCE once set-up is way more than a textarea (it is built in an iframe) and therefore it cannot be accessed the same way.
To do what you're trying to do in TinyMCE, you'd need to write a plug-in (see there : http://www.tinymce.com/wiki.php/Creating_a_plugin), or fortunately for you a built-in TinyMCE button already exists to insert special characters, it is called "charmap" and is easy to add to your buttons list.
I have a WYSIWYG text area that is located inside of a jquery created tab layer that when you click submit it updates a field in my database, and posts it back to the text area through value.
However, when I try to do this I must click the submit button once then again when the page reloads to have the value update in the text area.
This problem of submitting twice only happens when I add a WYSIWYG editor to the text area, it updates fine when it is not a WYSIWYG editor.
I have tried all of the major WYSIWYG editors out there to see if it was the editor but I am starting to think that having the text area in a jquery area might be affecting the WYSIWYG editor.
So what do you guys think?
You could simply redirect the page upon submission, to refresh the content on the page. Using a simple header('Location: /page.php?msg=success'); would work well.
This method also follows the Post/Redirect/Get design pattern.
I have just seen from your example you're are posting the form with Ajax with TinyMCE. TinyMCE does not use the textarea, it creates an iframe with the editor in it and passes it to the textarea on submit. In order for these functions to work with jQuery you will need to make sure you're using the TinyMCE jQuery plugin. Additionally to insert data into the editor you will need to use a different method than just .html().
$('#content').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');
See the TinyMCE jQuery example page for more details/methods.