nopCommerce Text Editor

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
9 years ago
Hello,

I have seen from some screen shots of a text editor that is different than the version used in 3.4. Is there any plugin or other option to use a more robust text editor. One feature I would really like to have is ability to change text color.

Travis
0
9 years ago
Hi,

Following are steps to enable text color plugin for nopCommerce 3.40 editor (TinyMCE):

- Open the "Nop.Admin/Views/Shared/EditorTemplates/RichEditor.cshtml" file.
- Modify following code: (NOTE - new code added in this format)
  
  BEFORE
  ---
  

tinyMCE.init({
            selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
            height: 350,
            width: 790,
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste@(allowJbimages ? " jbimages" : null)",
            ],
            toolbar: "insertfile undo redo | styleselect | fontselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image@(allowJbimages ? " jbimages" : null)",
            //"relative_urls" required by jbimages plugin to be set to "false"
            relative_urls: false,
            @if (allowRoxyFileman){
                <text>
                //picture manager
                    file_browser_callback: RoxyFileBrowser@(random),
                </text>
            }
            //we should set "convert_urls" set to "false" (because of "relative_urls" requirement)
            //otherwise, it'll break existing links when editing message template
            convert_urls: false
        });
  


  AFTER
  ---
  

tinyMCE.init({
            selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
            height: 350,
            width: 790,
            plugins: [
                "advlist autolink lists link image charmap print preview anchor textcolor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste@(allowJbimages ? " jbimages" : null)",
            ],
            toolbar: "insertfile undo redo | styleselect | fontselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image@(allowJbimages ? " jbimages" : null) | forecolor backcolor",
            //"relative_urls" required by jbimages plugin to be set to "false"
            relative_urls: false,
            @if (allowRoxyFileman){
                <text>
                //picture manager
                    file_browser_callback: RoxyFileBrowser@(random),
                </text>
            }
            //we should set "convert_urls" set to "false" (because of "relative_urls" requirement)
            //otherwise, it'll break existing links when editing message template
            convert_urls: false
        });
  

- Deploy the changes.

Hope this help :)
ima9ines.com - Let's contribute to the community :)

Kind Regards,
Tuấn Đỗ (ima9ines)

Skype support account - tuan_da2

FREE plugins
http://ima9ines.com/en/nopcommerce-plugins-free
http://www.nopcommerce.com/marketplace.aspx?vendor=61573
5
9 years ago
Impressive! It works!
0
9 years ago
ima9ines wrote:
Hi,

Following are steps to enable text color plugin for nopCommerce 3.40 editor (TinyMCE):

- Open the "Nop.Admin/Views/Shared/EditorTemplates/RichEditor.cshtml" file.
................

tinyMCE.init({
            selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
            height: 350,
            width: 790,
            plugins: [
                "advlist autolink lists link image charmap print preview anchor textcolor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste@(allowJbimages ? " jbimages" : null)",
            ],
            toolbar: "insertfile undo redo | styleselect | fontselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image@(allowJbimages ? " jbimages" : null) | forecolor backcolor",
            //"relative_urls" required by jbimages plugin to be set to "false"
            relative_urls: false,
            @if (allowRoxyFileman){
                <text>
                //picture manager
                    file_browser_callback: RoxyFileBrowser@(random),
                </text>
            }
            //we should set "convert_urls" set to "false" (because of "relative_urls" requirement)
            //otherwise, it'll break existing links when editing message template
            convert_urls: false
        });
  


---------------------------------------------------------
Hello-

I am trying to modify the init of my TinyMCE and running into a problem which I'm hoping you can help me solve.
I am defining the schema as HTML5, and including extended valid elements so that TinyMCE does not strip my microdata from content when switching between views.
http://www.tinymce.com/wiki.php/Configuration:schema
http://www.tinymce.com/wiki.php/Configuration:valid_elements
-----------------------------------------------------------
tinyMCE.init({
       schema: "html5",
           extended_valid_elements:"@[itemscope|itemtype|itemid|itemprop|itemref|content],div,span,meta,time[datetime]", 
           selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
            height: 350,
            width: 790,
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste@(allowJbimages ? " jbimages" : null)"
            ],
            toolbar: "insertfile undo redo | styleselect | fontselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image@(allowJbimages ? " jbimages" : null)",
            //"relative_urls" required by jbimages plugin to be set to "false"
            relative_urls: false,
            @if (allowRoxyFileman){
                <text>
                //picture manager
                    file_browser_callback: RoxyFileBrowser@(random),
                </text>
            }
            //we should set "convert_urls" set to "false" (because of "relative_urls" requirement)
            //otherwise, it'll break existing links when editing message template
            convert_urls: false
        });

------------------------------------------------------------------------------------------
But this throws an error when I try to edit a topic page or other content using TinyMCE:
error in log says:
"[" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.


I think it refers to this:
@[itemscope

I am guessing that the "@"  causes .NET to think there is a new code block.


The documentation at TinyMCE explains that the @ symbol is used as a keyword to indicate "all" elements.

Can you suggest another way to write the extended valid elements so that there are no errors with .NET?
Can the @ somehow be "escaped" ?

Thanks,
Steve
An upvote on a helpful post means "thank you" in every language. I believe in this community. For every question I ask, I try to answer at least five others.
0
9 years ago
Hi,

Please try this:

extended_valid_elements:"@@[itemscope|itemtype|itemid|itemprop|itemref|content],div,span,meta,time[datetime]",

Hope this help :)
ima9ines.com - Let's contribute to the community :)

Kind Regards,
Tuấn Đỗ (ima9ines)

Skype support account - tuan_da2

FREE plugins
http://ima9ines.com/en/nopcommerce-plugins-free
http://www.nopcommerce.com/marketplace.aspx?vendor=61573
2
9 years ago
ima9ines wrote:
Hi,

Please try this:

extended_valid_elements:"@@[itemscope|itemtype|itemid|itemprop|itemref|content],div,span,meta,time[datetime]",

Hope this help :)


Thank you! That was the trick! I guess repeating the character escapes it?? Nice to know-

Also...for anybody else trying to add microdata to their topics pages using the TinyMCE editor, this is what I ended up doing to get the editor to leave my code alone when switching between views (source/normal)


schema: "html5",
extended_valid_elements:"@@[itemscope|itemtype|itemid|itemprop|itemref|content|id|class|style|href|src|alt|height|width|border],ul,p,a,img,div,span,meta,link,time[datetime]",


Steve
An upvote on a helpful post means "thank you" in every language. I believe in this community. For every question I ask, I try to answer at least five others.
2
9 years ago
great!!!
www.Nop-Store.com - Take your store to the next level with our Plugins. We also use them. :)

Facebook: http://www.facebook.com/NopStoreOficial

nopCommerce MVP
0
8 years ago
Hi Guys

I am hoping someone may know the answer to this, a customer has asked me to include Spell Checker in their Tiny-mce editor for nopCommerce 3.30, I have found the plugin for it in the tinymce plugins folder, and as I have not done one of these before I am not quite sure how to add it in, any help would be much appreciated.

UPDATE: ok all sorted in the RichEditor.cshtml I added the following line, as spell checking is now handled by the browser :).

add this line to your tinymce.init, "browser_spellcheck: true," this gives red line underneath under words that are suspected to be incorrect.

Kind Regards
Ron Palmer
Please VOTE if this has been of some help.

Kind Regards
Ron Palmer (Southend Web Services)
Director & Developer at https://www.southendwebservices.com
nopCommerce Solutions Partner/Nop MVP

Email: [email protected]
Skype:xtremecommerce

Responsive Web Development for nopCommerce
0
8 years ago
How to config adminareasettings.richeditoradditionalsettings (All Settings) paste_retain_style_properties:"all" in paste plugin https://www.tinymce.com/docs/plugins/paste/
Talk to do, do to finish
0
3 years ago
Hi again....

Where does the tinymce get initialized now that there is no RichEditor.cshtml in newer versions (4.30)?
tinyMCE.init {


Thanks,
Steve
An upvote on a helpful post means "thank you" in every language. I believe in this community. For every question I ask, I try to answer at least five others.
0
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.