Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    287
    Thanks
    11
    Thanked 0 Times in 0 Posts

    TinyMCE toggle readonly with a link or button

    Hello, I am working on an inline page editor using TinyMCE. A typical usage of this product is you click in a textarea or a div that is assigned as selector in the tinymce init() and it pulls up the tool bar and is in edit mode. What I am trying to accomplish is locking this behavior down. Default to readonly and have a link/button that only shows up and if you have permission to toggle the page into edit mode and back to display mode. Otherwise it is always in display mode and can't be edited.

    I have a jsfiddle here TinyMCE inline toggle - JSFiddle

    link to tinymce documentation if needed https://www.tiny.cloud/docs/

    My link is outside of the selector div. It has a class of toggle. I found an example in a search where someone was trying to do something similar and that is where my commented out code in the JS section comes from. Currently the JS code has readonly:1 in the init() in the fiddle so it is working as planned. If you remove that line and run it again, you will get a warning message

    This domain is not registered with TinyMCE Cloud. Start a free trial to discover our premium cloud services and pro support.
    just close that out and click the Hello world to see the tool bar now works. I cannot seem to find a solution for what I want in all my searches. If I can keep readonly:1 in the init() and then only give access to edit mode via this link that would be ideal.

    Thank you for your time and any guidance.
    Last edited by tripwater; Sep 12th, 2018 at 04:43 PM.

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,822
    Thanks
    58
    Thanked 687 Times in 682 Posts
    The toggle() method in jQuery is deprecated and should be avoided. I like to give users a bit of a visual clue about what a toggling control will do. Something like this, maybe:

    Code:
       $(function() {
          $("a.toggle").on("click", function(){
          if($(this).text()=="Click for Read Only"){
          $(this).text("Click to Edit");
          tinymce.activeEditor.setMode('readonly');
          } else {
          $(this).text("Click for Read Only");
          tinymce.activeEditor.setMode('design');
          }
       });
    });

  3. Users who have thanked xelawho for this post:

    tripwater (Sep 17th, 2018)

  4. #3
    Regular Coder
    Join Date
    May 2005
    Posts
    287
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    The toggle() method in jQuery is deprecated and should be avoided. I like to give users a bit of a visual clue about what a toggling control will do. Something like this, maybe:

    Code:
       $(function() {
          $("a.toggle").on("click", function(){
          if($(this).text()=="Click for Read Only"){
          $(this).text("Click to Edit");
          tinymce.activeEditor.setMode('readonly');
          } else {
          $(this).text("Click for Read Only");
          tinymce.activeEditor.setMode('design');
          }
       });
    });
    You are my hero! EXACTLY what I needed. Works like a charm! Sorry it took so long to respond, got pulled onto another project. Thanks xelawho!

  5. #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,822
    Thanks
    58
    Thanked 687 Times in 682 Posts


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •