一半君的总结纸

听话只听一半君

如何把ckeditor/tinymce放到pyqt ui里

好像不应该说如何,因为没有什么创意,只是试一下而已

有时候需要个简单的html编辑器,但是linux下好像没有特别小的,ckeditortinymce都很强大,试试把他们放到QWebView里

ckeditor
  1. 首先去官网自定义一个build,lz选了完整版和黑色主题
  2. 下载后解压

    启动的时候maximize

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>A Simple Page with CKEditor</title>
            <!-- Make sure the path to CKEditor is correct. -->
            <script src="ckeditor.js"></script>
            <script type="text/javascript" src="adapters/jquery.js"></script>
            <link rel="stylesheet" type="text/css" href="mysitestyles.css" />
        </head>
        <body>
            <form>
                <textarea name="editor1" id="editor1" rows="10" cols="80">
                </textarea>
                <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' ,
                {
    	            on :
    	            {
    	                // Maximize the editor on start-up.
    	                'instanceReady' : function( evt )
    	                {
    	                    evt.editor.execCommand( 'maximize' );
    	                }
    	            } 
    	        }
                );
                </script>
            </form>
        </body>
    </html>
    

    加了一行 config.contentsCss

    CKEDITOR.editorConfig = function( config ) {
    	// Define changes to default configuration here. For example:
    	// config.language = 'fr';
    	// config.uiColor = '#AADC6E';
    	config.contentsCss = 'mysitestyles.css';
    };
    
    

    把背景改成黑的,链接颜色改亮

    body, .cke_contents, .cke_source
    {
      /* Font */
      font-family: Arial, Verdana, sans-serif;
      /*font-size: 12px;*/
    
      /* Text color */
      color: #f0f0f0;
    
      /* Remove the background color to make it transparent */
      background-color: #383838 !important;
    }
    
    
    html
    {
      /* #3658: [IE6] Editor document has horizontal scrollbar on long lines
      To prevent this misbehavior, we show the scrollbar always */
      _overflow-y: scroll
    }
    
    img:-moz-broken
    {
      -moz-force-broken-image-icon : 1;
      width : 24px;
      height : 24px;
    }
    img, input, textarea
    {
      cursor: default;
    }
    
    a {
      color : #0080FF !important;
      /*text-decoration : none !important;*/
    }
    

    pyqt ui

    #!/usr/bin/env python
    
    import sys
    import os
    from PyQt4 import QtGui, QtCore, QtWebKit
    from PyQt4 import uic
    
    # enable ctrl-c to kill the app
    import signal
    signal.signal(signal.SIGINT, signal.SIG_DFL)
    
    
    class MyWindow(QtGui.QDialog):
    
        def __init__(self, parent=None):
            super(MyWindow, self).__init__(parent)
            self.layout = QtGui.QVBoxLayout()
            self.layout.setContentsMargins(0, 0, 0, 0)
            self.webview = QtWebKit.QWebView()
            self.layout.addWidget(self.webview)
            self.setLayout(self.layout)
    
            self.webview.load(
                QtCore.QUrl(os.path.join(os.path.dirname(__file__), 'index.html')))
    
            self.resize(950, 500)
    
    if __name__ == "__main__":
        app = QtGui.QApplication(sys.argv)
        win = MyWindow()
        win.show()
        sys.exit(app.exec_())
    
    

效果图:
ckeditor

tinymce
  1. 自选build
  2. 设置高度宽度占满窗口的js好脑残,应该有简洁的方法吧?
    editor.execCommand(‘mceFullScreen’)全屏

    完全版,反正不考虑速度,是本地用

    <!DOCTYPE html>
    <html>
        <head>
            <script src='tinymce.min.js'></script>
            <script>
                tinymce.init({
                selector: '#mytextarea',
                theme: 'modern',
                skin: 'charcoal',
                plugins: [
                    'advlist autoresize autolink lists link image charmap print preview hr anchor pagebreak',
                    'searchreplace wordcount visualblocks visualchars code fullscreen',
                    'insertdatetime media nonbreaking save table contextmenu directionality',
                    'emoticons template paste textcolor colorpicker textpattern imagetools'
                ],
                toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                toolbar2: 'print preview media | forecolor backcolor emoticons',
                image_advtab: true,
                templates: [
                    { title: 'Test template 1', content: 'Test 1' },
                    { title: 'Test template 2', content: 'Test 2' }
                ],
                content_css: [
                    'dark.css'
                ],
                body_class: "mceBlackBody",
                setup: function(editor) {
                editor.on('init', function(e) {
                    editor.execCommand('mceFullScreen');
                });
                }
                });
            </script>
            <script>
                function doresize(){
                    var ht = window.innerHeight;
                    console.log("ht = " + ht);
                    if (document.getElementsByClassName('mce-toolbar-grp')){
                        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetHeight;
                        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetTop;
                        console.log("ht = " + ht);
                    }
                    if (document.getElementsByClassName('mce-statusbar')){
                        ht += -document.getElementsByClassName('mce-statusbar')[0].offsetHeight;
                        console.log("ht = " + ht);
                    }
                    ht += -3; // magic value that changes depending on your html and body margins
                    if (document.getElementsByClassName('mce-edit-area')){
                        document.getElementsByClassName('mce-edit-area')[0].style.height = ht + "px";
                        console.log("ht = " + ht);
                        document.getElementsByClassName('mce-edit-area')[0].style.width = window.innerWidth;
                    }
                }
                window.onresize=doresize;
                window.onload=doresize;
            </script>
        </head>
        <body>
            <form method="post">
                <textarea id="mytextarea"></textarea>
            </form>
        </body>
    </html>
    
    #!/usr/bin/env python
    
    import sys
    import os
    from PyQt4 import QtGui, QtCore, QtWebKit
    from PyQt4 import uic
    
    # enable ctrl-c to kill the app
    import signal
    signal.signal(signal.SIGINT, signal.SIG_DFL)
    
    
    class MyWindow(QtGui.QDialog):
    
        def __init__(self, parent=None):
            super(MyWindow, self).__init__(parent)
            self.layout = QtGui.QVBoxLayout()
            self.layout.setContentsMargins(0, 0, 0, 0)
            self.webview = QtWebKit.QWebView()
            self.layout.addWidget(self.webview)
            self.setLayout(self.layout)
    
            self.webview.load(
                QtCore.QUrl(os.path.join(os.path.dirname(__file__), 'index.html')))
    
            self.resize(950, 500)
    
    if __name__ == "__main__":
        app = QtGui.QApplication(sys.argv)
        win = MyWindow()
        win.show()
        sys.exit(app.exec_())
    
    

    把编辑区改成黑色

    body.mceBlackBody {
        background: #191c1f;
        color: #fff;
    }
    

效果图:
tinymce

ckeditor github地址
tinymce github地址

参考:
ckeditor forum – Setting editor area height to 100%
Change the background color of the CKEditor text area

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: