elRTE

Sorry, but for now editor has no API (it is available only in developer version)
But you can try some tricks. I explain core, fetch details from elrte code.
First you need elrte instance:

var inst = $(selector).elrte()[0].elrte;

Second - find required command.
All commands stored in elRTE.ui._buttons array, so if need "bold" command:

var bold = instance.ui._buttons.bold;

bold.command();

For commands names see /src/js/elrte/ui/
Some commands (which has names accepted by execCommand()) such bold/italic etc does not exists as files but available in elRTE.ui._buttons

hello mr.Levashov

thank you for your guidance.
yes. i know that it's available only in developer version. but since this editor is open source, i think that i can do that. but, i asked similar question in nicEdit forum (about nicedit editor). the solution represented was like following :

<a href="javascript:document.execCommand('bold',false,'');AAAA" contenteditable="false">BOLD</a>

and it works perfectly in IE,opera,FF,chrome (that work only in nicedit editor). i need help like this solution for elRTE editor. because i need all options & buttons (like table,headings, insert picture & ...) used in elRTE editor.

plz help me guys... .

<a href="#" onclick="return command('bold')">BOLD</a>
<script>
function command(name) {
  var instance = $(selector).elrte()[0].elrte, 
      buttons = instance.ui._buttons,
      l = buttons.length;

  while (l--) {
    if (buttons[l].name == name) {
      instance.ui._buttons[l].command();
      break;
    }
  }
  return false;
}
</script>

That works quiet nice!

wow ! that's great... ! thank you so much.
that was exactly what i want and i'm so glad and grateful... . thanks my dear friend.

1. i appreciate if you help me in some cases like : "font color" , "background color" , "format" , "font size" and "font". i have problem with them.
2. and when i use my own toolbar(menu), i won't need default menu... . how can i hide this? (i try to hide elRTE default menu with define a new toolbar with null panels. but when i run the project, any of the anchor tags(in my own menu), didn't work... .). how can i do this?

thx... .

keykan ... wrote:

1. i appreciate if you help me in some cases like : "font color" , "background color" , "format" , "font size" and "font". i have problem with them.

You need another one trick - this commands use "set" method with argument

var fontcolor = ...

fontcolor.set('#222')

Please, read elrte src for more details

1. and when i use my own toolbar(menu), i won't need default menu... . how can i hide this? (i try to hide elRTE default menu with define a new toolbar with null panels. but when i run the project, any of the anchor tags(in my own menu), didn't work... .). how can i do this?

This elrte archicture problem :( No toolbar - no commands.
Trick is - create toolbar with all required commands. After erlte loaded hide toolbar

$(selector).find('.toolbar').hide();

Troex Nevelin wrote:

That works quiet nice!

Real ninja :)

Hi mr.Levashov,

3 other questions :

1. excuse me. my problem with "font color" , "background color" is that when i click the

<a href="#" onClick="return command('forecolor')">Font color</a> color picker was not open... . "background color" like this... .

i wrote :

<script>
    function command2(color,name) {
      var instance = $('#editor').elrte()[0].elrte, 
          buttons = instance.ui._buttons,
          l = buttons.length;
      while (l--) {
        if (buttons[l].name == name && buttons[l].rte == color) {
          instance.ui._buttons[l].command2();
          break;
        }
      }
      return false;
    }
</script>

in head section and call it

<a href="#" onClick="return *command2*('rte,forecolor')">Font color</a>
<a href="#" onClick="return *command2*('rte,hilitecolor')">Background color</a>

but it doesn't work... .

2. since "font size" , "format" , and "font" are selectable (like dropdown), i don't know that can i use anchor tag for them too?

<a href="#" onClick="return command('fontsize')">Font size</a>
<a href="#" onClick="return command('formatblock')">Format</a>
<a href="#" onClick="return command('fontname')">Font</a>
?
if "no", should i use <select></select> tag?

3. i appreciate if you explain a little about following code :

<script>
    function command(name) {
      var instance = $('#editor').elrte()[0].elrte, 
          buttons = instance.ui._buttons,
          l = buttons.length;
      while (l--) {
        if (buttons[l].name == name) {
          instance.ui._buttons[l].command();
          break;
        }
      }
      return false;
    }
</script>

i couldn't understand your algorithm... . thx.

keykan ... wrote:

1. excuse me. my problem with "font color" , "background color" is that when i click the

<a href="#" onClick="return command('forecolor')">Font color</a> color picker was not open... .

You need to realize your own ui logic (colorpicker, fontselect etc), elrte could not do it for you

2. since "font size" , "format" , and "font" are selectable (like dropdown), i don't know that can i use anchor tag for them too? if "no", should i use <select></select> tag?

Its up to you

3. i appreciate if you explain a little about following code :

[...]

i couldn't understand your algorithm... . thx.[...]

Simple find command by name. ui._buttons is array (this my mistake in first post)

You can modify command function to accept option for .set

function command(name, opt) {
    /* get instance of editor and buttons array*/
    var instance = $('#editor').elrte()[0].elrte, 
        buttons = instance.ui._buttons,
        l = buttons.length;

    /* search array for desired command 'name' */
    while (l--) {
        if (buttons[l].name == name) {
            /* found the needed button */
            button = instance.ui._buttons[l];
            /* check if we passed some opts for button */
            if (opt && opt.length > 0) {
                button.set(opt);
            }
            /* execute command (the same as press the button in toolbar) */
            button.command();
            break;
        }
    }
    return false;
}

And now you can use in your html like this:

    <div class="button" onclick="return command('bold');">bold</div>
    <div class="button" onclick="return command('forecolor', '#f00');">forecolor (red)</div>
    <div class="button" onclick="return command('fontsize', 'x-large');">fontsize (x-large)</div>
    <div class="button" onclick="return command('fontname', 'monospace');">fontname (monospace)</div>

Mr. Levashov and Nevelin I am realy grateful. thanks a lot.

Excuse me,my problem with "font","font size","background color","font color" and "format" is that I want to have combo box for them as same as elrte combo box. I use your methods with anchor tags but they did not response. Could you please help me a little more?

What you mean by "combo box"?

If you mean <select> with options than you will have to make them by yourself.

Or you mean setting some style in one click? Like:

<div class="button" onclick="command('bold'); command('fontname', 'monospace'); command('forecolor', '#f00'); return false;">my style</div>

I mean when I click , for example on font size, a list with different size like;8,12,14 or small,normal and large ,open and user have chance to select size.

You have to program it youself like this:

JS:

    <script type="text/javascript" charset="utf-8">
        jQuery().ready(function() {
            var opts = {
                cssClass : 'el-rte',
                height   : 350,
                toolbar  : 'maxi',
                cssfiles : ['elrte/css/elrte-inner.css', 'elrte/css/inner-example.css']
            };

            var rte = $('#editor').elrte(opts);

            $('#font-size').change(function(){
                command('fontsize', $(this).val()+'px');
            });
        });

        function command(name, opt) {
            var instance = $('#editor').elrte()[0].elrte, 
                buttons = instance.ui._buttons,
                l = buttons.length;

            while (l--) {
                if (buttons[l].name == name) {
                    button = instance.ui._buttons[l];
                    if (opt && opt.length > 0) {
                        button.set(opt);
                    }
                    button.command();
                    break;
                }
            }
            return false;
        }
    </script>

HTML:

    Font size: <select id="font-size">
        <option value="12">12</option>
        <option value="14">14</option>
        <option value="18">18</option>
        <option value="24">24</option>
    </select>

Hi there,

At the fallowing of my project, i load content of a page (Article.php for example) in elrte editor with ajax. When editing was finished, i get the content with "var content = $('selector').elrte('val');".

But i didn't know how can i save this content to Article.php directly(without save in db and after that fetching them)? Should i put editor in <form> tag for saving? Because i put editor in <div> only.

    <div class="main-content">
        <div id="loading"></div>    
        <div id="editor">
        </div>
    </div>

thanks.

Hello,

How can i use formatblock command like above solutions? I use a code like the fallowing :

<div class="button" onclick="return command('formatblock', 'h1');">Heading 1</div>
<div class="button" onclick="return command('formatblock', 'h2');">Heading 2</div>
<div class="button" onclick="return command('formatblock', 'h3');">Heading 3</div>

but it doesn't work! :-(

How can i do that?

thanks.

See src/elrte/js/ui/formatblock.js file, for formatBlock button it uses different method than set for setting parameter, it's called formatBlock, so try to modify command function like that:

        function command(name, opt) {
            var instance = $('#editor').elrte()[0].elrte, 
                buttons = instance.ui._buttons,
                l = buttons.length;

            while (l--) {
                if (buttons[l].name == name) {
                    button = instance.ui._buttons[l];
                    if (opt && opt.length > 0) {
                        if (name == 'formatblock') {
                            button.formatBlock(opt);
                        }
                        else {
                            button.set(opt);
                        }
                    }
                    button.command();
                    break;
                }
            }
            return false;
        }

Hi,

Thanks Mr. Troex Nevelin,

I want to use elColorPicker in my page. In the other word, i want to put a div element(for example), and by clicking that, the color picker window show 256 colors and by selecting one of them, the selected text be colorful. Exactly like elRTE color picker but with above solution. For getting to this goal,

I include 'elcolorpicker.js' my page :

<script src="components/elrte/src/ellib/js/jquery.elcolorpicker.js" type="text/javascript"></script>

and put two div elements like this :

<a href="#" onclick="return command('forecolor')" id="font_color" class="font_color" title="Change the text color.">Font Color</a>
<a href="#" onclick="return command('hilitecolor')" id="bg_font_color" class="bg_font_color" title="Change backgrount of the text color.">Background color</a>

and the fallowing script in my page :

    <script type="text/javascript">
        var opts = {
        'class' : '',
        color   : this.defaultColor,
        update  : function(c) { self.indicator.css('background-color', c); },
        change  : function(c) { self.set(c) }
    }
    $('#font_color').elColorPicker(opts);
    $('#bg_font_color').elColorPicker(opts);
    </script>

but the color picker window, doesn't show by clicking! :-( So i can't select color... .

How can i do that?!

I'm so sorry for my English... .

Thanks

Are you trying slowly rewrite whole elRTE UI? =)

<!-- add in JS -->
$('#elcolorpicker').elColorPicker({
  'change': function(c) { command('forecolor', c); },
  'class': 'myelcolorpicker'
});

<!-- add after body-->
<div class="button" id="elcolorpicker">elColorPicker</div>

The elColorPicker() method will remove any value from your #elcolorpicker element (will clean text inside div) and apply myelcolorpicker and routeded-3 styles - this is because elColorPicker() was not designed to work outside elRTE.

P.S.: please send us screenshot of what are you doing? =)

Hi my dear friend

:)) Of course not, elrte is much more than my knowledge that i rewrite it :).

I send a screenshot of what I am doing and why I am using elrte .
I need it for my project ( of course I need an editor but for some cases I choose to using elrte editor ) and using the editor is the first step of my project.
It is my graduation project for my bachelor degree .
I'm really glad that I find your editor and will introduce elrte.org in my presentation.
These are screenshots:

I really appreciate that you answer all of my question.
My last question was about selecting the color for background and font color such as elrte does.
I use above codes that you send :

($('#elcolorpicker').elColorPicker({
  'change': function(c) { command('forecolor', c); },
  'class': 'myelcolorpicker'
});

<div class="button" id="elcolorpicker">elColorPicker</div>

in body

but it didn't work.
I don't know what I should do.

keykan ... wrote:

I send a screenshot of what I am doing and why I am using elrte . I need it for my project ( of course I need an editor but for some cases I choose to using elrte editor ) and using the editor is the first step of my project. It is my graduation project for my bachelor degree . I'm really glad that I find your editor and will introduce elrte.org in my presentation.

Looks nice! Keep going!

I use above codes that you send : [...] in elcolorpicker.js file and

<div class="button" id="elcolorpicker">elColorPicker</div>

in body

but it didn't work. I don't know what I should do.

If you have already included elRTE on the page (and you have), than you don't need to include elcolorpicker.js, it is already included with elrte.min.js.

The code I posted should be put inside jQuery().ready() block, like that:

        jQuery().ready(function() {
            var opts = {
                cssClass : 'el-rte',
                height   : 350,
                toolbar  : 'maxi',
                cssfiles : ['elrte/css/elrte-inner.css', 'elrte/css/inner-example.css']
            };

            var rte = $('#editor').elrte(opts);

            $('#font-size').change(function(){
                command('fontsize', $(this).val()+'px');
            });

            $('#elcolorpicker').elColorPicker({
                'change': function(c) { command('forecolor', c); },
                'class': 'myelcolorpicker'
            });
        });