EasyUI Forum
July 17, 2024, 03:26:40 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Integration tinymce in datagrid-Editor  (Read 11819 times)
Max Lamda
Newbie
*
Posts: 48


View Profile
« on: April 20, 2016, 09:17:17 AM »

I found a way to integrate tinymce to be used as editor in data/propertygrid.

<script>
   $.extend($.fn.datagrid.defaults.editors, {
tinymce: {
   init: function(container, options){
      var h = 400;
      var s = '';
      if (typeof options !== 'undefined') {
         if(typeof options.height !== 'undefined' ) h=options.height;
         if(typeof options.setup !== 'undefined' ) s = JSON.stringify(options.setup);
      }
      var xid = 'root' + uniqid();
      var id = 'textbox' + uniqid();
      var input = $('<div data-setup=\'' + s + '\' style="height:' + h + 'px"><iframe style="height:' + h + 'px" scrolling="no" class="tinyframe" id="' + xid + '" frameBorder="0" /><textarea style="display:none" id="' + id + '" /></div>').appendTo(container);
      return input;
   },
   destroy: function(target){
      $(target).remove();
   },
   getValue: function(target){
      return $(target).find('iframe')[0].contentWindow.getValue();
   },
   setValue: function(target, value){
      var id=$(target).find('textarea').html(value).attr('id');
         $(target).find('iframe').attr('src', '/tinymce.html?id=' + id);
   },
   resize: function(target, width){
      $(target)._outerWidth(width);
      $(target).find('iframe')._outerWidth(width);
   }
}
}
</script>

The only other thing you need is to enable the url /timymce.html on your server. It has to provide a document like this:

<html>
   <head>   
      <script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
      <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
   </head>
   <body style='padding:0px;margin:0px'>

      <textarea id='tinymce'>
      </textarea>
      <script>   
         $.extend({
            getUrlVars: function(){
               var vars = [], hash;
               var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
               for(var i = 0; i < hashes.length; i++)
               {
                  hash = hashes.split('=');
                  vars.push(hash[0]);
                  vars[hash[0]] = hash[1];
               }
               return vars;
               },
            getUrlVar: function(name){
               return $.getUrlVars()[name];
            }
         });

         $(function() {
            var id='#' + $.getUrlVar('id');

            $('#tinymce').html(parent.$(id).html());         
            var h=parent.$(id).closest('div').height();
            var setup=parent.$(id).closest('div').attr('data-setup');
            
            $('body').hide();
            $('body').height(h);

            var options = {
                 plugins: "fullscreen image imagetools",
               resize: false,
               selector: '#tinymce',
                 menubar: 'file edit insert view format table tools image',
               setup : function(ed) {
                  ed.on('load',function(e) {
                     window.setTimeout(function() {
                        $('body').show();
                        ed.execCommand('mceFullScreen');
                     },1);
                  });
               }
            };
            if(setup!='') $.extend(options, JSON.parse(setup));
         
            tinymce.init(options);
         });

         function getValue(value) {
            return tinyMCE.activeEditor.getContent({format : 'raw'});         
         }

            
      </script>

   </body>
</html>


The document is quite static ...

You do not need to include the tinymce-Script in your project exept for this special file.

Options given under "setup" in the editor-options-object are passed directly to tinymce.

Quite easy. If anyone manages to style the tinymce to look more easyui-ish: Let me know. The only changes  have to be made in the html-File.
« Last Edit: April 20, 2016, 09:42:44 AM by Max Lamda » Logged
Max Lamda
Newbie
*
Posts: 48


View Profile
« Reply #1 on: April 20, 2016, 09:28:44 AM »

Please note: The plugin "fullscreen" is necessary.



I tried to integrate tinymce inline but could not manage to stop the events clicking on submenues of tinymce to trigger easyui to end the editing-mode because tinymce creates the overlay menus at the end of the body-tag. By this method one has not the slightest interference between easyui and tinyMCE but they still work together.
« Last Edit: April 20, 2016, 09:31:23 AM by Max Lamda » Logged
Max Lamda
Newbie
*
Posts: 48


View Profile
« Reply #2 on: April 20, 2016, 09:36:02 AM »

If needed:

<style>
         iframe.tinyframe {
            overflow: hidden;
            padding: 0px;
            margin: 0px;
            border: 0px;
         }
</style>
Logged
Max Lamda
Newbie
*
Posts: 48


View Profile
« Reply #3 on: April 21, 2016, 12:17:06 AM »

One thing forgotten:

You need a function called uniqid().

Very simple it could look like this:

<script>
   function uniqid() {
      var m=(Math.random() + '').replace('0.', '');
      return m;
   }

</script>

Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #4 on: April 25, 2016, 02:04:28 AM »

Can you put all togeather into https://jsfiddle.net/ and show how it looks like?  Wink
Logged
Max Lamda
Newbie
*
Posts: 48


View Profile
« Reply #5 on: April 26, 2016, 07:03:20 AM »

Sorry, not that easy.

It is part of a very complex application.


You can just extend the defaults.editor and then use your datagrid with the editor-option "tinymce".

That's all.

Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!