TinyMCE Find and Replace?

Hello,
I am investigating a way to find and replace specific text in the TinyMCE (Tinymce 3.1.1 ) HTML Source Editor in TeamSite (6.7.2, service pack 1) .

I found a post in the TinyMCE forums which suggested the use of Christophe Dolivet's EditArea
Has anyone tried to implement EditArea (http://www.cdolivet.com/index.php?page=editArea&sess=9f0491e1255ef83cf7a1856d69d2ed17)

in TeamSite?
Thank you.

Find more posts tagged with

Comments

vpatel

Are you wanting to do some "search-n-replace" automatically behind the scenes or you want the user to have ability in case he/she needs to use that?

Are you talking about TinyMCE fields in DCTs or SitePublisher components?

Migrateduser

This is a task for the user.

If there is a lot of code that the user would like to find and replace.
One can perform this function with the visual format editor, but I have not been able find a way to do this with the HTML Source Editor in TinyMCE.

A simple example would be to find and replace all of the h1 tags with h2 tags.
See the screenshots attached. If I am still not clear, please let me know and I will try to clarify further. Thank you.

Faizi

This is a task for the user.

If there is a lot of code that the user would like to find and replace.
One can perform this function with the visual format editor, but I have not been able find a way to do this with the HTML Source Editor in TinyMCE.

A simple example would be to find and replace all of the h1 tags with h2 tags.
See the screenshots attached. If I am still not clear, please let me know and I will try to clarify further. Thank you.

You can add "Search & Replace" functionality into TinyMCE by below code:

tinyMCE.init({
 theme : "advanced",
 mode : "textareas",
 plugins : "searchreplace",
 theme_advanced_buttons3_add : "search,replace"
});

For more detail go through the below link:
http://wiki.moxiecode.com/index.php/TinyMCE Smiley Tongue

lugins/searchreplace

HTH

vpatel

Never done this myself but it sounds doable with a custom plug-in. I am not sure what Christophe Dolivet's EditArea stuff is doing.

Custom plug-in may do something as simple as this:
1. Open up a custom HTML form with two fields (find text and replace-with text).
2. On submit, get the value of the TinyMCE field with something along these lines (psuedo code assuming you are on TinyMCE 3.x -- major API diffs from 2.x to 3.x): tinyMCE.get('id-for-your-tinymce-field').getContent();
note: there are other methods of getting the content as well.
3. Do your search and replace (using values from step 1) for the content string (from step 2) in your custom plug-in.
4. Write the updated string back to the TinyMCE field -- using similar setContent() method.

Will something like this do for your requirements? See Moxicode's website for exact details about the API.

HTH!

vpatel

Oh cool "Faizi" gave you a "ready-to-go" solution.

Migrateduser

Thank you all for responses. I think however that the "searchreplace" plugin

referred to above will allow one to find and replace text in the GUI interface. My question refers to find and replace in the HTML code itself.

ktaylor1

You can add "Search & Replace" functionality into TinyMCE by below code:
tinyMCE.init({
 theme : "advanced",
 mode : "textareas",
 plugins : "searchreplace",
 theme_advanced_buttons3_add : "search,replace"
});
For more detail go through the below link:
http://wiki.moxiecode.com/index.php/TinyMCElugins/searchreplace

HTH

I keep seeing posts similar to the one above but no one says WHERE to add the tinyMCE.init.
We are using SitePublisher and are trying to customize tinyMCE to simply not verify the html on close. we have the values just do not know how to apply them.

LooseCannon

I keep seeing posts similar to the one above but no one says WHERE to add the tinyMCE.init.
We are using SitePublisher and are trying to customize tinyMCE to simply not verify the html on close. we have the values just do not know how to apply them.

The following are UNTESTED instructions for adding plug-in's that I got either from support of another DevNet member.

These are the exact steps needed for creation of a custom plug-in and also to make the custom plug-in to work on TS 671 SP1 (maybe other versions as well).

Create a plug-in as specified as a example in the _template directory
Name the directory which holds the plug-in to the name of the plug-in.
Add the line tinyMCE.addPlugin("pluginname",true); at the end of the file.
Modify the following lines in the custom_config.js file:
1. IWTinyMCECustomConfig("custom1","toolbarRow","hr,removeformat,visualaid,
  |,charmap,zoom,inserttime,insertdate,pluginname"); // i.e. add your
  pluginname at the end
2. IWTinyMCECustomConfig("custom1","plugins","pluginname"); //This
  line may not be there in the original file and you may need to add it
Make sure your templating.cfg is configured correctly to bring up the instance of DCR with TinyMCE

Pawan

Does anybody know whether this plugin works irrespective of which browser is in use? I remember the spellchecker plugin came sometime back specifically for IE browser which didn't worked in firefox.

These plugins come from Moxiecode, so, will AI entertain any tickets arise from this change or will they redirect them to Moxiecode and just wait for the response.

PaulGore

From version 5.0.13, TinyMCE WYSIWYG Editor has that "Find and Replace" feature. You can check it here for that version.
https://www.tiny.cloud/blog/tinymce-5-0-13-released-with-improved-find-replace/

The Github community has a detailed guide on it as well.