The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> tinymce split view
aristosv
post Jan 31 2021, 10:23 AM
Post #1





Group: Members
Posts: 1
Joined: 31-January 21
Member No.: 27,760



I just set up tinymce for the first time, and I really like how you can configure it just the way you want to.

What I am trying to do now, is create a split view. For example have the source code on the right, and the wysiwyg editor on the left. So I can preview the changes I make to the code in real time.

This is the code I used to set up tinymce like I want it.

CODE
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/key_goes_here/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<textarea>
</textarea>
  <script>
    tinymce.init({
      selector: 'textarea',
      height: '1000',
      width: '50%',
      plugins: 'charmap hr emoticons preview image link code autolink lists checklist media table',
      toolbar: 'undo redo | fontselect | fontsizeselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | forecolor backcolor | link image media | hr charmap emoticons | preview code | table',

      image_title: true,
      automatic_uploads: true,
      file_picker_types: 'image',
      file_picker_callback: function (cb, value, meta) {
       var input = document.createElement('input');
       input.setAttribute('type', 'file');
       input.setAttribute('accept', 'image/*');
      
      input.onchange = function () {
       var file = this.files[0];

       var reader = new FileReader();
       reader.onload = function () {
        var id = 'blobid' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);      
        cb(blobInfo.blobUri(), { title: file.name });
       };
       reader.readAsDataURL(file);
      };

      input.click();
     },
     content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',

     toolbar_mode: 'floating',
   });
  </script>
</body>
</html>


and this is what it looks like

IPB Image

and this is what I want it to look like

IPB Image

is this possible to do?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:42 AM