Creating a custom TinyMCE plugin similar to existing Style selector
Hi
I have a requirement where my current customer are using some other CMS tool with XStandard based rich text editor. Which gives them an option to select a text in the editor and wrap it with a "HTML" tag and a css "Class".
For example, select the text: "Test header" and wrap it with Light Blue -> Header 1 (as shown below an example). Which will create this HTML: <h1 class="blue">Test header<h1>
I am not able to do this in TinyMCE and styles in Umbraco. But I understand that TinyMCE supports pluggins.
Please can someone provide me an example or a link to a blog post which can help me write a pluggin similar to Style selector (in TinyMCE) and make it perform HTML Tag + Css class?
Sorry, I am getting all sort of errors (parsing) while trying to attach an image which shows the current styling option available in the existing CMS which uses XStandard based rich text editor.
You can configure TinyMCE to give a drop down menu of styles that the editor can select, the same as you see when posting a question or answer on this forum, so you can highlight text and set it to be "Heading 1" for example, have a look at Add styles to the drop-down menu.
This will not cover what I am looking for. I had gone through the link you have provided. For example, I would want to wrap the selected text with a header tag (for e.g., h2) which I can acheive by selecting the "Heading 2". But i also want to add a custom class to the header class,
I'd like to bump this thread to see if anyone has any potential solutions to this issue other than forcing users to insert blocks like this using a Macro which is not so flexible if you want to add Richtext inside of the container?
Creating a custom TinyMCE plugin similar to existing Style selector
Hi
I have a requirement where my current customer are using some other CMS tool with XStandard based rich text editor. Which gives them an option to select a text in the editor and wrap it with a "HTML" tag and a css "Class".
For example, select the text: "Test header" and wrap it with Light Blue -> Header 1 (as shown below an example). Which will create this HTML: <h1 class="blue">Test header<h1>
I am not able to do this in TinyMCE and styles in Umbraco. But I understand that TinyMCE supports pluggins.
Please can someone provide me an example or a link to a blog post which can help me write a pluggin similar to Style selector (in TinyMCE) and make it perform HTML Tag + Css class?
Much appreciated.
Thanks
Guru
Hi,
Sorry, I am getting all sort of errors (parsing) while trying to attach an image which shows the current styling option available in the existing CMS which uses XStandard based rich text editor.
Thanks
Guru
Guru,
You can configure TinyMCE to give a drop down menu of styles that the editor can select, the same as you see when posting a question or answer on this forum, so you can highlight text and set it to be "Heading 1" for example, have a look at Add styles to the drop-down menu.
Will this cover what you want to do?
Richard
Hi Richard
This will not cover what I am looking for. I had gone through the link you have provided. For example, I would want to wrap the selected text with a header tag (for e.g., h2) which I can acheive by selecting the "Heading 2". But i also want to add a custom class to the header class,
e.g., <h2 class="myCustomClass">Selected Text</h2>
Along with this I need an option to select a text and surround it with a <div class="myCustomClass">Selected Text</div>
Thanks
Guru
Hi Everyone,
Please can some one provide me any more ideas / techiques about how I can acheive this in Umbraco.
If this is not the right place for this post, please can some one direct me to the correct forum.
Much appreciated
Thanks
Guru
I'd like to bump this thread to see if anyone has any potential solutions to this issue other than forcing users to insert blocks like this using a Macro which is not so flexible if you want to add Richtext inside of the container?
Maybe this wiki can help? http://our.umbraco.org/wiki/how-tos/enabling-the-'template'-plugin-for-tinymce
Jeroen
I found a solution which seems to work for me and which others may wish to try:
http://our.umbraco.org/projects/developer-tools/mysnippets-for-tinymce
is working on a reply...