• Is it possible to modify the WISIWIG Text Editor used when ediing posts and pages.

    What I would like to do is add a few new buttons along the top which when clicked will insert a <span> around the selected text (these spans will be pre-configured) so that I can then hopefully disable the use of tags within the WISIWIG and thus force my client to only style the contents of a page, the way I have designed it!

    Is this possible? Where/What pages/scripts do I need to edit?

Viewing 14 replies - 1 through 14 (of 14 total)
  • It’s possible, but it could be more work than you want. The TinyMCE files should be at wp-includes/js/tinymce if I remember right.

    Just keep a log of what you did to which file in case of future upgrades.

    What kind of elements are you trying to add? Be careful not to create a monster πŸ™‚

    Thread Starter fire-enigmax

    (@fire-enigmax)

    Just looking to basically copy the B (bold<b>) button and functions so that I can then make a button that is programmed to change the style of some text within the posts. Just want to replace <b> with something like <span class=”text2″> so that I can then control text2 within the css files.

    I found the tinymce files but am unsure where to start changing! I have looked at the tinymce documentation but it doesn’t seem to be as good as wp (nore the forum).

    Any tips/help/guidence etc would be grateful.

    I know you’re really wanting to reprogram TinyMCE, but are you using spans so much that you really need to use a button instead of typing? Just seems like a lot of work for something that may be wiped out on an upgrade later on.

    The other option is looking at some plugins. Some of the Adsense plugins insert buttons into the menu and modifying those may be an easier option for you as well.

    Thread Starter fire-enigmax

    (@fire-enigmax)

    If the site was just for me then I wouldn’t mind just typing, however this is being used as part of a CMS for a client and they do not have markup knowledge. Can you link to the Adsense plugin you mention and I will have a look and see if this is a possible alternative!

    I wount be worrying too much about an upgrade as I will not be allowing upgrade to take effect as then it would become an enhancement (which could potentially mean more revenue πŸ˜‰ )

    Thanks

    There are several, but the one that I use is Adsense.

    I have the feeling you are missing something..

    What kind of formatting through CSS do you mean exactly?

    WordPress using semantic tags for the formatting of the content, so instead of using <b> for bold text, it inserts < strong > tags. In your CSS you can add any properties to strong elements; font color, font size, etc.

    #main-content p { margin: 0 0 1em 0; }
    #main-content strong { color: #a00; }

    Are you aware of this?

    Thread Starter fire-enigmax

    (@fire-enigmax)

    yes I am aware of this, this is the reason I am looking to duplicate the B button and change the tag it produces within the script (whether it is b or strong) therefore I can do whatever changes (styling using the CSS).

    I have searched all of the code in the tinymce folder and copied any call/mention of Bold (which it calls the button) and have managed to produce an extra button on the GUI, however I cant seem to find what the button actually calls so that I can duplicate/change this, so currently I have a button which just generates a javascript error which gives no help.

    I think what I need to help would be some ‘tracing’ program which I can use to trace each call and return of javascript within the page so that I can see what functions are being called when I press the existing B Button and from there I can then modify!

    Sorry if im confusing things.

    BTW: I will try adsense once i get a chance, thanks!

    I’m sorry, I’m still not convinced πŸ™‚ I really think you are thinking to complicated…

    Tell me, what changes exactly do you want to make to the markup and what exactly do you want to control by CSS?

    Thread Starter fire-enigmax

    (@fire-enigmax)

    In the Markup – I want the button to create the tags <span class=”text2″>Sometext Here </span>

    then this will allow me to have a preset class within the css file

    .text2 {
    color: #989898;
    letter-spacing: 1.2em;
    }

    for example!

    The reason I want this configured into a button is because I cannot expect my client to code this each time (simple as it is), its just not professional.

    I only want to style certain parts of the post and not the whole post so styling the p doesnt seem workable.
    example would be.

    Welcome to my site, this month we have loads of new things to …
    (I have used strong as a demo only here).. and this is in addition to the Title so please dont mention modifying the title tag to be inline or such.

    Thanks for your comments and time so far!

    The thing is that you don’t need to fool around with spans and such to get this done. What I meant above is that you can use the strong or the em tag to accomplish this. In HTML they have exactly the “semantic” value you are looking for: emphasizing certain parts of a sentence.

    Al you have to do is style the strong and the em elements. And that can be done like this:

    strong {
       color: #989898;
       letter-spacing: 1.2em;
    }

    Here‘s a good article that might help you understand why this would be a better approach.

    Thread Starter fire-enigmax

    (@fire-enigmax)

    microKid,

    Thanks for clarifying, I understand completly what you are saying and I think that ths could be a solution in other cases but the reason I am suggesting adding these extra buttons is because I am using them for more than one tag, ie I mentioned a text2 tag, I will also be doing the same for text3,4,5 etc as these are used to style the initial words of particular posts. I still need to have the B and I buttons working for accessibility of certain words.

    I know this can be a complicated task and I have thought about it and decided that I need to do it this way for reasons of presentation and usability.

    I have managed to create the button and have it display on the menu but I cant seem to find the connecting function, where the actual ‘happenings’ occur and the tags placed in!

    Ok, i understand now.

    WordPress uses a narrowed down version of tinyMCE.

    I think you should look at the possibility of activating the format select menu (see this example on the tinyMCE site) in the WordPress installation, and then look at how to add custom styles to that menu, with custom names “text2” etc.

    If that isn’t a solution, see if there is a plugin for tinyMCE that might do what you are looking for,

    Thread Starter fire-enigmax

    (@fire-enigmax)

    Thanks, I have seen this dropdown but wanted to actually use a button. However after days of looking around on tinyMCE forum and docs I still cannot wok out how to do this ‘simple’ thing, so looks like I might have to revert to the drop-down option.

    Thanks for everyones help!

    If anyone does find out how to add another button identical to the B one there by default then please let me know – email chrismcneill85 [@] hotmail [.] com
    as I think it could come in very handy someday!

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Adding / Modifying the WISIWIG’ is closed to new replies.