Frontaccounting make all Textarea as Rich Text Editor
X

Congrats, You are Subscribed to Receive Updates.

Frontaccounting make all Textarea as Rich Text Editor


First Method:

First one. you can use jQueryte editor. Here you can download the files. And Extract the zip and copy the js and css file to js directory. Than you can open the `header.inc` and change your file path.

	echo "<link href='$path_to_root/js/jquery-te-1.4.0.css' rel='stylesheet' type='text/css'> \n";
        echo "<script src='$path_to_root/js/jquery.js'></script>\n
		<script src='$path_to_root/js/jquery-te-1.4.0.min.js'></script>\n ";

Than you can add a few line of function to make all your textarea into  rich text editor.

Goto  `include/page/footer.inc`. Here you can add the following line into it.

echo "<script type='text/javascript'>
	$(document).ready(function(){
		jquery_editor();
	});
	
	function jquery_editor() {
		$('textarea').jqte();
	}
</script>";

That’s it the text editor should be like this.

Screenshot 2015-12-22 11:58:37

Alternative Editor :

Frontaccounting make all Textarea as Rich Text Editor. Some of us need to use the comments and memo areas better with Text formatting options. Here i am just giving a simple tutorial to make your comment area or memo area with rich text editor.

First we need one rich text editor. So we have few Open source Javascripts for this Rich text editor. Here i am suggesting simple one. which is NicEdit and you can get it from here.  nicedit.com

Screenshot_2015-3-21 16.38.30

than we have to include the js of nicedit to our FA. So just goto the following directory.

root_of_fa/includes/page/header.inc  and  here you can find few html tags there, which will start the page. Just include this tag just above the send_scripts()  function.

echo "<script src='http://js.nicedit.com/nicEdit-latest.js' type='text/javascript'></script>\n
<script type='text/javascript'>bkLib.onDomLoaded(nicEditors.allTextAreas);</script> \n";

this will replace all your comments and memo area into the rich text editor.  But there you need to do one more step to get it always. Because, the AJAX functionality will recreate the components, but it wont render there.  so you need to hook it again.  so just do one more step again.  I am not sure the line number, so here i brought the code here.  Open the js folder on your root.  than open the utils.js file,  the find the following line and add the  green marked  line there.

 if (errors.length>0)
			window.scrollTo(0,0);
			//document.getElementById('msgbox').scrollIntoView(true);
	  // Restore focus if we've just lost focus because of DOM element refresh
		  	if(!newwin) { 
		  		setFocus();
			}
		}
		kvcodes_custom_callback_js();
            },
	        false  // do not disable caching
        );
	};

than, at the end of the file add this function  which is also on the same file.

function kvcodes_custom_callback_js() {
	bkLib.onDomLoaded(nicEditors.allTextAreas);
}

thats’  it.  If you have any doubt or comments drop below, i will try help you. There are some problem in Alternative method. So please go with first one

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

5 comments

  1. commenter
    Evandro Rodrigues

    Very good tutorial.
    I could implement in my FrontAccounting, but it does not save the editions on the bench. you know what can it be? The other fields operates normal.

  2. commenter
    Evandro Rodrigues

    Yet he is not recording in the database, you know what can it be?

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts