Custom advance editor

I want to create an advance custom editor with my own tags. for example if i enter below text:

and if I select ‘boys’ and click a special button to convert it to a blank text box it will be something like this:

and I want to the result of that input in middle of my text.

then if someone fill that text box like this:

the whole value that will be send to server, for example via post, will be this:

So actually i don’t know what should I do exactly to create it.

Sorry for my English.

Thanks in advance.