limit icons in view or limit abilities in the WYSIWYG

9 posts by 4 authors in: Forums > CMS Builder
Last Post: March 6, 2015   (RSS)

By Twocans - March 3, 2015

Hi yea,
I want my client to be able to insert content but only with <p> or <br> as I have applied specific css to my pages thus want to keep all in tact.

My question is, in the  WYSIWYG their are many options like insert image,  horizon rule, set text color etc etc.

I do not want to permit this. I only want them to be able to apply both paragraph or breaks.

How can I remove/limit the icons on view.

Regards

Kenny

By Twocans - March 4, 2015

I have had a look at the icons css and see in the WYSIWYG ui skin below, I have tried commenting it out, but where as the icons then do not appear, the links are still there but appear as blank buttons. 

If anyone has done this before and has a better clue loll I am grateful for all inpuut.

k

/* Theme */
.defaultSkin span.mce_bold {background-position:0 0}
.defaultSkin span.mce_italic {background-position:-60px 0}
.defaultSkin span.mce_underline {background-position:-140px 0}
.defaultSkin span.mce_strikethrough {background-position:-120px 0}
.defaultSkin span.mce_undo {background-position:-160px 0}
.defaultSkin span.mce_redo {background-position:-100px 0}
.defaultSkin span.mce_cleanup {background-position:-40px 0}
.defaultSkin span.mce_bullist {background-position:-20px 0}
.defaultSkin span.mce_numlist {background-position:-80px 0}
.defaultSkin span.mce_justifyleft {background-position:-460px 0}
.defaultSkin span.mce_justifyright {background-position:-480px 0}
.defaultSkin span.mce_justifycenter {background-position:-420px 0}
.defaultSkin span.mce_justifyfull {background-position:-440px 0}
.defaultSkin span.mce_anchor {background-position:-200px 0}
.defaultSkin span.mce_indent {background-position:-400px 0}
.defaultSkin span.mce_outdent {background-position:-540px 0}
.defaultSkin span.mce_link {background-position:-500px 0}
.defaultSkin span.mce_unlink {background-position:-640px 0}
.defaultSkin span.mce_sub {background-position:-600px 0}
.defaultSkin span.mce_sup {background-position:-620px 0}
.defaultSkin span.mce_removeformat {background-position:-580px 0}
.defaultSkin span.mce_newdocument {background-position:-520px 0}
.defaultSkin span.mce_image {background-position:-380px 0}
.defaultSkin span.mce_help {background-position:-340px 0}
.defaultSkin span.mce_code {background-position:-260px 0}
.defaultSkin span.mce_hr {background-position:-360px 0}
.defaultSkin span.mce_visualaid {background-position:-660px 0}
.defaultSkin span.mce_charmap {background-position:-240px 0}
.defaultSkin span.mce_paste {background-position:-560px 0}
.defaultSkin span.mce_copy {background-position:-700px 0}
.defaultSkin span.mce_cut {background-position:-680px 0}
.defaultSkin span.mce_blockquote {background-position:-220px 0}
.defaultSkin .mce_forecolor span.mceAction {background-position:-720px 0}
.defaultSkin .mce_backcolor span.mceAction {background-position:-760px 0}
.defaultSkin span.mce_forecolorpicker {background-position:-720px 0}
.defaultSkin span.mce_backcolorpicker {background-position:-760px 0}

By rconring - March 5, 2015 - edited: March 5, 2015

I have found from much experience that very few clients can be trusted to enter data in a WYSIWYG without completely destroying your site styling.  So, very few of my clients are given that choice.  I have developed a system of Page Elements that are stored in related tables to the page number so that the client can enter an unlimited number of elements but I control the rendering of the data element. (See attached image)

Paragraphs are entered as Text Blocks, Page Headings as H1 Heading, Sub headings as H2 Heading, Sliders as an upload array, Photo Gallery as an upload array etc   The rendering code for each element type is stored in Include files and called in a page rendering loop that accesses the related element table.

I found that modifying the WYSIWYG editor causes so many problems that it was not worth the effort.  Furthermore, it inspired me to create a better mousetrap.

Ron Conring
Conring Automation Services
----------------------------------------
Software for Business and Industry Since 1987
Attachments:

elements.jpg 46K

By Deborah - March 5, 2015 - edited: March 5, 2015

Kenny, You can remove TinyMCE buttons like this:

1. Make a copy of /lib/wysiwyg.php and name the new copy wysiwyg_custom.php.
This new file will then get loaded instead of the original.

2. Then you can remove the buttons you don't want from the lines that begin:

theme_advanced_buttons1

theme_advanced_buttons2

Be sure to format those lines with commas on each side of the separators.

If I want to keep the 'code' (HTML) button active so I can easily make edits, but have the button invisible to the client, I simply Photoshop out the button in the TinyMCE icons.gif.

Ron, that method of yours is inspiring!

~ Deborah

By Twocans - March 5, 2015

thank you very much.

cheers

k

By Twocans - March 5, 2015

thanks for that, Interesting concept, for me thought I just want my client to have both breaks and paragraphs, will look at your way more closely in future..

cheers

k

By rconring - March 5, 2015

I understand ... It took quite some time to develop the method, but it pays off, especially when developing mobile first sites where inline formatting can really be detrimental to responsive page layout. 

You will just need to be aware of the modified editor when upgrading that it doesn't get overwritten.

Have a great day!

Ron Conring
Conring Automation Services
----------------------------------------
Software for Business and Industry Since 1987

By rconring - March 6, 2015

Jerry ...

I sent you an email on this ... hope I had the right address.

Ron Conring
Conring Automation Services
----------------------------------------
Software for Business and Industry Since 1987