We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 5340
    • 1,624 Posts
    Quote from: splittingred at Mar 04, 2010, 02:19 PM

    matt: ideally, yes, once i can find out how to do so - CKEditor is a bit different than Tiny in this.

    The current version we have allows these params:


    stylesCombo_stylesSet
    The "styles definition set" to load into the styles combo. The styles may be defined in the page containing the editor, or can be loaded on demand from an external file when opening the styles combo for the fist time. In the second case, if this setting contains only a name, the styles definition file will be loaded from the "styles" folder inside the stylescombo plugin folder. Otherwise, this setting has the "name:url" syntax, making it possible to set the URL from which loading the styles file.

    The file looks like this:

    CKEDITOR.addStylesSet('default',[{name:'Blue Title',element:'h3',styles:{color:'Blue'}},{name:'Red Title',element:'h3',styles:{color:'Red'}},{name:'Marker: Yellow',element:'span',styles:{'background-color':'Yellow'}},{name:'Marker: Green',element:'span',styles:{'background-color':'Lime'}},{name:'Big',element:'big'},{name:'Small',element:'small'},{name:'Typewriter',element:'tt'},{name:'Computer Code',element:'code'},{name:'Keyboard Phrase',element:'kbd'},{name:'Sample Text',element:'samp'},{name:'Variable',element:'var'},{name:'Deleted Text',element:'del'},{name:'Inserted Text',element:'ins'},{name:'Cited Work',element:'cite'},{name:'Inline Quotation',element:'q'},{name:'Language: RTL',element:'span',attributes:{dir:'rtl'}},{name:'Language: LTR',element:'span',attributes:{dir:'ltr'}},{name:'Image on Left',element:'img',attributes:{style:'padding: 5px; margin-right: 5px',border:'2',align:'left'}},{name:'Image on Right',element:'img',attributes:{style:'padding: 5px; margin-left: 5px',border:'2',align:'right'}}]);
    


    So I’m trying to figure out how to integrate that via a property. There are a few ideas, and I’d love feedback on them:

    1. Currently you could just set that property to an absolute URL: mystyles:http://mysite.com/assets/js/ckstyles/styles.js that points to a styles definition JS file. This already works like this with the plugin property.
    2. We could have a custom property of some sort that in some kind of formatting could define things, but that gets hard as these are pretty dynamic JS structures.

    I prefer 1, as it requires no more work. What do you think?


    I found this. Maybe it helps
    • Is there any solid documentation on adding custom CSS classes to the Styles menu? Have yet to get this to work. Even added/edited styles in the default styles.js file and nothing changes (cache wipe via Manager AND manually).

      Lead me to believe the default config is being pulled from somewhere else.

      This is one of those things that there was a lot of discussion, but no real answers. Anyone out there able to customize styles in CKEditor in Revo? (wish this client would pop for redactor, then it would be a non-issue)
        • 36562
        • 94 Posts
        Any news on custom classes? I think it would be great now that many are creating themes.

        Obviously Redactor from modmore is the best solution. But i don't wanna force my customers to buy it. And i really do not like tiny.
          --------------------------------------
          www.williamastrom.se
          • 34049
          • 28 Posts
          Quote from: dvstudiosinc at Feb 18, 2014, 04:10 PM

          This is one of those things that there was a lot of discussion, but no real answers. Anyone out there able to customize styles in CKEditor in Revo? (wish this client would pop for redactor, then it would be a non-issue)

          I'm not saying this is the correct way of doing it but I have found a way that works to add my own styles to the list in ckeditor.

          Create a new folder in the ckeditor directory, manager/assets/components/ckeditor/ckeditor, for various reasons I called my directory clan, so I had manager/assets/components/ckeditor/ckeditor/clan.

          Then from the ckeditor directory copy the styles.js file to your new directory.

          Now edit your new styles.js file, the important thing to note is to change the name of the style set to the same as the directory so in my style.js file the first code line is
          CKEDITOR.stylesSet.add( 'clan', [


          Then add in or delete styles to styles.js as required. For example I want a h4 level style with a clear:left; style applied so I added
          {name: 'Clear left',		element: 'h4', styles: { 'clear': 'left' } },

          after the Italic Title line.

          Then in the manager settings for the ckeditor change the CSS styles set to
          clan:styles.js
          where you change 'clan' to your directory name and styleSet.

          Finally clear your site cache and go to the resource where your new style should appear in the list.
          [ed. note: apcherry last edited this post 9 years, 4 months ago.]
          • Jason Sonderman Reply #15, 9 years ago

            [ed. note: dvstudiosinc last edited this post 9 years ago.]