Jump to content

Recommended Posts

What Is The Best WYSIWYG Text Editor For Admin Side v2.3.4.1 CE?

Roll Call - What Are You Personally Using?

Is there a contribution that does not change the core code / is a module?

I would mainly be using to edit product descriptions...

Thank you in advance for your help!

Share this post


Link to post
Share on other sites

Upon further review I decided that adapting and using the CKEditor for Product Descriptions would be best in my situation...

Here is the version I updated and uploaded: CKEditor Text Editor v2.3.4.1 CE: https://apps.oscommerce.com/ngMgE&ckeditor-text-editor-v2-3-4-1-ce

Credit To Original Updates: joli811 & ♥mommaroodles

Two Versions for: New Install - Drop Files In Place & Modified Install - Edit Code By User

CK Editor 4.4.4 full version. If you need the basic or standard version, you will need to download it.

Also included in the package is instructions for an alternative method of applying the CK Editor to text area fields.

This method imho is better than having to edit the jQuery snippet to exclude the editor on certain text area fields as stated in the package below.

Updated to v2.3.4.1 CE From Original Version: https://apps.oscommerce.com/tcmmu

Share this post


Link to post
Share on other sites

Glad you got one to work. It gives people another option to use. I ended up using tinymce simply because I wanted to minimize the changes to core files. All that is required is to add a few lines to admin/categories.php, find around line 507

<?php echo tep_draw_form('new_product', 'categories.php', 'cPath=' . $cPath . (isset($_GET['pID']) ? '&pID=' . $_GET['pID'] : '') . '&action=' . $form_action, 'post', 'enctype="multipart/form-data"'); ?>

and below this add,

<!--------added for editor Not used------->
   <head>
 <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
      <script type="text/javascript">
tinymce.init({
    selector: 'textarea', branding: false, width : "640",
     menubar : true,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
<!--------added for editor------->

and thats it. It adds more fetures to the editor. It is posiable to make this a no core change but that requires a little more work than I have time for. When the moduler admin is available that should make it a simple no core addon.

image.png.2bbc86712b4ded5db0476352c6004146.png


 

Share this post


Link to post
Share on other sites
10 hours ago, JcMagpie said:

Glad you got one to work. It gives people another option to use. I ended up using tinymce simply because I wanted to minimize the changes to core files. All that is required is to add a few lines to admin/categories.php, find around line 507

<?php echo tep_draw_form('new_product', 'categories.php', 'cPath=' . $cPath . (isset($_GET['pID']) ? '&pID=' . $_GET['pID'] : '') . '&action=' . $form_action, 'post', 'enctype="multipart/form-data"'); ?>

and below this add,

<!--------added for editor Not used------->
   <head>
 <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
      <script type="text/javascript">
tinymce.init({
    selector: 'textarea', branding: false, width : "640",
     menubar : true,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
<!--------added for editor------->

and thats it. It adds more fetures to the editor. It is posiable to make this a no core change but that requires a little more work than I have time for. When the moduler admin is available that should make it a simple no core addon.

image.png.2bbc86712b4ded5db0476352c6004146.png

@JcMagpie this is a great add-on too!

I decided to go with the CK Editor because it is Free... where tinymce is a pay per month add-on...

I am surprised a text editor for Product Descriptions is not a Standard Core item in OsCommerce... Maybe in the future!

Share this post


Link to post
Share on other sites

Dear @Bobber

The addon you published (CKEditor Text Editor v2.3.4.1 CE: https://apps.oscommerce.com/ngMgE&ckeditor-text-editor-v2-3-4-1-ce) is compatible with OSC 2.3.4.1 EDGE?

Best regards

Valqui

Share this post


Link to post
Share on other sites

Dear Zahid @JcMagpie

I tried it and it worked very well, thank you very much !! . You have to register it to get of the annoying notice : "This domain is not registered with TinyMCE Cloud. Start a free trial to discover our premium cloud services and pro support".

To add the menu of colors you have to add forecolor backcolor in the options of the toolbar:

  toolbar: "insertfile undo redo | forecolor backcolor | styleselect | bold italic | alignleft aligncenter align right alignjustify | bullist numlist outdent indent | link image" 

Again, thank you very much for giving a simple and practical solution to a issue that should come as standard in OSC.

I hope that @wHiTeHaTor @burt will package your solution or @Bobberaddon in a future version as an addon that comes pre-installed out of the box.

Best regards

Valqui

Share this post


Link to post
Share on other sites
On 6/18/2018 at 5:09 PM, Bobber said:

I just tried Quill.js Product Description WYSIWYG Editor: https://apps.oscommerce.com/Get&PCOBK&2WLz7 and it did not work... easy drop and replace but nothing :-/

The problem with the Quill.js contribution was that apparently quilljs.com deleted the old version of the Javascript from their site, resulting in a broken link. :(

I've uploaded a new version that should fix that problem and also upgraded it to the latest version (from 0.19.10 to 1.3.6), which supports things like header levels, block quotes, and hanging indents.

I'd caution that there are risks with using any HTML editor on any public-facing part of your site (including but not limited to product reviews etc); many of them have serious vulnerabilities such as cross-site scripting and so forth. Quilljs attempts to clean the HTML to avoid at least the worst vulnerabilities, but who knows if they've plugged all the possible holes. A lot of other Javascript-based HTML editors out there have known vulnerabilities and shouldn't be used on client-facing sites, but you should be able to use most of them safely in the Admin area.

Bruce

Share this post


Link to post
Share on other sites
2 minutes ago, bcwright said:

The problem with the Quill.js contribution was that apparently quilljs.com deleted the old version of the Javascript from their site, resulting in a broken link. :(

I've uploaded a new version that should fix that problem and also upgraded it to the latest version (from 0.19.10 to 1.3.6), which supports things like header levels, block quotes, and hanging indents.

I'd caution that there are risks with using any HTML editor on any public-facing part of your site (including but not limited to product reviews etc); many of them have serious vulnerabilities such as cross-site scripting and so forth. Quilljs attempts to clean the HTML to avoid at least the worst vulnerabilities, but who knows if they've plugged all the possible holes. A lot of other Javascript-based HTML editors out there have known vulnerabilities and shouldn't be used on client-facing sites, but you should be able to use most of them safely in the Admin area.

Bruce

Great Work Bruce!

I agree with you cautions about risks pertaining to public facing parts of the site... I only use it on the admin side personally.

Share this post


Link to post
Share on other sites
On 6/19/2018 at 3:21 PM, Bobber said:

All that is required is to add a few lines to admin/categories.php, find around line 507

<?php echo tep_draw_form('new_product', 'categories.php', 'cPath=' . $cPath . (isset($_GET['pID']) ? '&pID=' . $_GET['pID'] : '') . '&action=' . $form_action, 'post', 'enctype="multipart/form-data"'); ?>

and below this add,

<!--------added for editor Not used------->
   <head>
 <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
      <script type="text/javascript">
tinymce.init({
    selector: 'textarea', branding: false, width : "640",
     menubar : true,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
<!--------added for editor------->

Hello Zahid @JcMagpie

I'm using Tinymce to edit the content of the products and it works great !! so thank you for this so paractical solution.

Now I have a problem with the text editing block for the "Meta description for SEO".

In that field also appears the Tinymce editor and generates HTML content , when there should go only text, NOT HTML.

What changes should I make, so that the Tinymce editor does not appear in "Meta description for SEO".

Best regards

Valqui

Share this post


Link to post
Share on other sites

Hi Valqui,

Yes I know the quick and dirty fix was just that 😊 it will appear on all selector: 'textarea'. The only way to stop this is to assign class to the text area you wish it to appere on. This makes the change more complicated which is why I did not list it.

You would need to do somthing like this, I have not tested this!

<script type="text/javascript">
    tinyMCE.init({
        //mode : "textareas",
        mode : "specific_textareas",
        editor_selector : "newclass",
        theme : "simple"
    });
</script>

<textarea id="txtdesc" name="txtdesc" class="newclass" rows="6" cols="96" ></textarea>

But I don’t think there is any need for this as, I'm not sure it makes much difference if its used on the SEO! As long as you simply type plain text in to that box it should not be an issues. The thing to avoid is qutation marks as google sees these as a brake point and will ignore anything after it.

Also these days there is no guarantee that google will use your meta description!


 

Share this post


Link to post
Share on other sites

Here @GLWalker gives detailed instructions on how to integrate tinyMCE:
https://apps.oscommerce.com/Fc1HV&amp;advanced-tinymce

For your information.

Cheers, Eddy

PS. tinyMCE is free - you just need to use a lower version.

Edited by Moxamint

Share this post


Link to post
Share on other sites
13 hours ago, valquiria23 said:

Now I have a problem with the text editing block for the "Meta description for SEO".

Just did a quick test with tinymce to see what difference if any it made to the meta tag seen in the code!

This is the discription I typed into the admin side with tinymce activated.

image.png.efb07aac382651fcb2f55e1b89ff9232.png

This is the meta description added to the html, as you can see its fine.

****with tinymce****
<meta name="description" content="<p>Reinforcing its position as a multi-monitor trailblazer, Matrox Graphics Inc. has once again developed the most flexible and highly advanced solution in the industry. Introducing the new Matrox G200 Multi-Monitor Series; the first graphics card ever to support up to four DVI digital flat panel displays on a single 8&quot; PCI board.</p>" />

<meta property="og:type" content="product" />
<meta property="og:title" content="Matrox G200 MMS" />
<meta property="og:site_name" content="justfastfood" />
<meta property="og:description" content="Reinforcing its position as a multi-monitor trailblazer, Matrox Graphics Inc. has once again developed the most flexible and highly advanced solution in the industry. Introducing the new Matrox G20..." />
<meta property="og:image" content="https://www.justfastfood.com/images/2mg.jpg" />
<meta property="product:price:amount" content="239.99" />
<meta property="product:price:currency" content="USD" />
<meta property="og:url" content="https://www.justfastfood.com/product_info.php/products_id/1" />
<meta property="product:availability" content="instock" />

 

****without tinymce*****
<meta name="description" content="<p>Reinforcing its position as a multi-monitor trailblazer, Matrox Graphics Inc. has once again developed the most flexible and highly advanced solution in the industry. Introducing the new Matrox G200 Multi-Monitor Series; the first graphics card ever to support up to four DVI digital flat panel displays on a single 8&quot; PCI board.</p>" />

<meta property="og:type" content="product" />
<meta property="og:title" content="Matrox G200 MMS" />
<meta property="og:site_name" content="justfastfood" />
<meta property="og:description" content="Reinforcing its position as a multi-monitor trailblazer, Matrox Graphics Inc. has once again developed the most flexible and highly advanced solution in the industry. Introducing the new Matrox G20..." />
<meta property="og:image" content="https://www.justfastfood.com/images/2mg.jpg" />
<meta property="product:price:amount" content="239.99" />
<meta property="product:price:currency" content="USD" />
<meta property="og:url" content="https://www.justfastfood.com/product_info.php/products_id/1" />
<meta property="product:availability" content="instock" />

 

 

I would not worry about it. Just make sure you just type plain text and not any thing fancy plus keep it short and to the point.

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

While the text  for the "Meta description for SEO" is only in one paragraph I do not see much problem.

But the best thing would be if the tinymce editor does not appear in that block.

Excellent weekend

Valqui

Share this post


Link to post
Share on other sites

Yes but that needs code changes as mentioned above. Remember Meta discription should be short and simple nothinng else. See advise below or read full artical here

https://moz.com/learn/seo/meta-description

 

"Optimal length

Meta descriptions can be any length, but Google generally truncates snippets ~300 characters (this limit increased in December 2017). It's best to keep meta descriptions long enough that they're sufficiently descriptive, so we recommend descriptions between 50–300 characters. Keep in mind that the "optimal" length will vary depending on the situation, and your primary goal should be to provide value and drive clicks.

Optimal format

Meta description tags, while not tied to search engine rankings, are extremely important in gaining user click-through from SERPs. These short paragraphs are a webmaster's opportunity to "advertise" content to searchers, and searchers' chance to decide whether the content is relevant and contains the information they're seeking from their search query.

A page's meta description should intelligently (read: in a natural, active, non-spammy way) employ the keywords that page is targeting, but also create a compelling description that a searcher will want to click. It should be directly relevant to the page it describes, and unique from the descriptions for other pages.

Google ranking factor?

Google announced in September of 2009 that neither meta descriptions nor meta keywords factor into Google's ranking algorithms for web search. 

Meta descriptions can however impact a page's CTR (click-through-rate) on Google which can positively impact a page's ability to rank. 

For that reason, among others, it's important to put some effort into meta descriptions."


 

Share this post


Link to post
Share on other sites
On 9/28/2018 at 5:31 AM, Moxamint said:

Here @GLWalker gives detailed instructions on how to integrate tinyMCE:
https://apps.oscommerce.com/Fc1HV&amp;advanced-tinymce

Thank you very much Eddy  @Moxamint. with this information  I solved the problem.

Best regards.

Valqui

 

Edited by valquiria23

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×