TinyMCE integration - Plugins won't show - javascript

I apologize in advance if this is not the right forum for this question, but since I am in desperate need of help I hope you may want to help me out.
I am using TastyIgniter Online Ordering System for a project. The system has a description textbox where you can add information about the product. However, it is only a plain textbox without additional functionality like strong tags and it won't keep the formatting.
I downloaded tinymce, put the script files in the js folder, and added these lines of code into the PHP file:
<script src="http://localhost/assets/js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
Hooray, it works partly. The textbox now has some of the functionality. It keeps the formatting and I am able to add bold, italic style to the text. Although, plugins like the image, table, hyperlink 'plugins' won't show at all. Is it possible that the textbox itself is restricted and then keeps the TinyMCE from showing these buttons or is something else wrong?
Thank you in advance.

You need to expand your TinyMCE init to include the plugins and toolbar/menu options you want displayed.
Take a look at this basic example of TinyMCE:
https://www.tinymce.com/docs/demo/full-featured/
If you look at the JS tab of the example you will see there are many options available for TinyMCE in the init.

Related

manipulating tinymce in Wordpress

I need to be able to extract, manipulate and update the text in wordpress's tinymce #content textbox.The code is coded in a wordpress plugin.
The below post helps but i am unable to comment or contact the original creator to ask him further questions. Having 1 points I cant practically do anything except ask questions. Let me know if i am doing this wrong.
Basically the code from this link is what i need to manipulate or edit the content in wordpress tinymce editor.
Manipulating TinyMCE content with jQuery
But the code seems to be overly simplified.
so my question is:
Do i need to include jquery
Do i need to include the tinymce js or class? is it in wordpress itself?
The code seems to be half javascript half php? Is the code suppose to be coded in a .js file?
do i need to put php tags here?
// make it into a jQuery object
var $content = $(content);
// manipulate the jquery object using jquery
$content = $content.remove('a');
Thanks.
hi I have figured it out after a bit more researching.
At first I was working with php to manipulate data after it is saved. But then i went on to wanting to manipulate the text before it was saved like underlining certain text based on a list in the database. So I needed to move on to javascript because i was editing the text before it was submitted or a page reload which i didn't wrap my head around yet.
So next i just coded the changes into javascript and built a button to call the process.
and seems i didn't need to include the tinymce class because probably the header of the editor page has already included it.

When working with an already made website, how do you know which file to edit to change something?

Let's say I'm building a website and using an already made Wordpress theme. Say it's a pretty complex theme and there's a lot of folders and files. If I wanted to change something specific, like text, or an image, or something that happens in Javascript/jQuery, and the change that I want is not an option in the themes control panel, what do I do? I know I have to go into the files but how do I know which file to go to? Lately, I've just download the theme to my desktop and use the windows search companion and type in the field that says "a word or phrase in the file." Sometimes it comes up and sometimes it doesn't. For CSS changes I usually use Firebug and click on the element, but many times I want to change the HTML/PHP/Javascript. I feel like I'm doing it the wrong way and there's an easier way that I'm missing.
As you mentioned WordPress theme so I will specifically try to answer this question for editing WordPress theme.
When it comes to WordPress, everything is very structured and well organized. If theme written following standard practices then each component has its specific file. If you are familiar with WordPress theme structure and want to change php code or say a static part then all you need to do is locate the component file say sidebar.php, home.php, single-{type}.php, header.php and many similar files. http://codex.wordpress.org/Template_Hierarchy
Now if you want to edit something that is shown in right/left side of page as sidebar then chances of finding it in sidebar.php are maximum. Similarly to change something on home page try looking for home.php, for posts it could be single-post.php.
Many a times what you are looking to change might need a tweak in widgets. In this case, process remains same as theme you just need to look in different folder.
Javascript: For editing javascript, beautify the code if it came minified. When you have code ready much of js debugging can be done using firebug/Developer Console in chrome. Best way is to put breakpoints at relevant position and then inspect code behavior. You will be able to locate code block that you need to tweak to achieve what you want.
CSS: Create a child theme and then use it override default theme properties.
You can probably use grep in PowerShell, Cygwin, etc.
grep -lir "a word or phrase in the file." *
edit: Emulating Grep in Powershell

How to add javascript in addition to pure text in Joomla Article

More specifically I am trying to implement a wufoo form in a joomla article, but I need to add text, in addition to the code. I tried to just paste the code the article but all I get is the code as text. What am I missing? If it helps I have installed jCode, but I cannot find a way to add text as well in addition to the form.
I am open to other ways as well to solve this issue.
Joomla by default doesn't allow you to import code like PHP or Javascript through articles. For this, a plugin need to be used. I see you've tried using jCode, I've never used this before so can't provide any documentation on it.
I would strongly recommend using Sourcerer as a plugin for importing Javascript and PHP through your articles. It's free, well documented, well supported and easy to use. Once you've installed it, enable the plugin. Then in your article, you can use something like the following:
{source}
<script type="text/javascript">
alert('Hello world');
</script>
<?php
echo '<p>Hello world</p>!';
?>
{/source}
There will be a small button under the article textarea for Sourcerer which will bring up a popup window for you to enter all your code in.
Hope this helps
Alternate options are for your problem
If you are an admin user Remove filter option for article.
Go to article section -> Options -> Text Filter Options -> Choose your user group -> Apply no filter.
Another option is to create a module and assign that module to your article like below.
Create a module that have your forms. For module development tutorial
And create an article and set the module inside that like.
{loadposition contact_form_pos}
Inside your article just mention the module position like above
for more
Hope it make sense..

CKEditor text alignment toolbar buttons

Unable to make text alignment buttons show up on CKEDITOR inline implementation. Tried with v4.1.1 and v4.1.2 on p,div but no luck. Inlineall.html sample file works but as soon as CKEDITOR is loaded in our application(node.js), all works but the alignment buttons.
What could be wrong here? What should I be looking at?
thanks in advance
First of all: check whether CKEDITOR.instances.yourInstance.plugins.justify is present. This is the first thing you got to know.
If the plugin is loaded in your instance, then I'm sure that the problem is Advanced Content Filter. For some reason, your instance doesn't allow the content required by the justify plugin to run. In such case, the feature is out. You got to configure config.(extra)allowedContent for your instance to have it working. If you don't use config.indentClasses, most likely something like this would solve your problem:
config.extraAllowedContent = 'p,div{text-align}';
For CKeditor V4 to enable text alignment options in the toolbar add the bellow inside your config.
config={{extraPlugins: ['justify'],}}

Formatting Buttons in jQuery for Forums

I want to do something as simple as emulate the buttons as can be seen here—albeit in jQuery and Django.
I have scoured the net and found nothing, which surprises me, but I figure it is because I am not using the right terminology.
Right now, I want to include inline tags like strong, em, and code and more tricky things like links and images (using Markdown and HTML syntax).
I figure that there are two to three different states for jQuery to act on:
Some text has been selected; the text is decorated.
Nothing has been selected; jQuery prompts the user to enter the text to be decorated.
The script can discern between highlighted text and a highlighted URL to decide for when it needs to produce a valid link.
I have already done some jQuery stuff, so the basics of it should be manageable (any potential JS regex aside); I just have no idea to which extent jQuery supports this.
You can utilize a Rich Text editor to perform your tasks. This blog post lists some of them -
http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
I have used TinyMCE and it is also very good. Apart from that I have used EphoxEdit Live( http://editlive.com/what-new ) and that is pretty good(though not a jQuery plugin) for heavy usage like content editing.
What you are looking for is a WYSIWYG(What You See Is What You Get) editor.
tinymce comes to mind.
or you can search the jQuery Plugins Page
This might be a good place to start: jQuery WYSIWYG Plugin

Categories

Resources