TinyMCE and Flask

Posted on 2019-04-30T04:33:47Z by Kevin Foong

In this post I will run through process of setting up the TinyMCE editor with Flask. TinyMCE is a great WYSIWYG editor and suitable for things like blog posts. It also enables you to upload images directly into your text.

Follow the instructions below to set up TinyMCE as a local download.

In Flask I create your forms as per normal using Flask-WTF. Note that the post field is defined as a TextAreaField. Later we will be using the TinyMCE editor to replace this field.

class PostForm(FlaskForm):
    heading = StringField('Title', validators=[InputRequired(), Length(max=100)])
    post = TextAreaField('Write something')
    tags = StringField('Tags')
    submit = SubmitField('Submit')

Now download TinyMCE (see https://www.tiny.cloud/docs/general-configuration-guide/advanced-install/#sdkinstall)
and unzip the contents into a web accessible location. I downloaded mine into a folder named "tinymce" under the static folder.
Create a route which will look something like this.

@app.route('/post')
def post():
    form = PostForm()
    return render_template('post/post.html',form=form)

In the "post.html" template which contains the form, you will need to include the TinyMCE script and initialise it (see below). As you can see there are a lot of options available. The important one to take note of for now is selector which will point to the id of the TextAreaField we defined in step 1. We know the id will be "#post" because the id will be the same as the name of the field. Flask automatically sets the id of each element to the name of the field you have defined.

......
<div class="field">
    {{ form.heading.label(class_='label') }}
    <p class="control">
        {{ form.heading(class_="input") }}
    </p>
</div>

<div class="field">
    {{ form.post.label(class_='label') }}
    <p class="control">
        {{ form.post(rows=16) }}
    </p>
</div>

<div class="field">
    <div class="control">
        {{ form.submit(class_="button is-link") }}
    </div>
</div>

<script type="text/javascript" src="{{ url_for('static', filename='tinymce/tinymce.min.js') }}"></script>
<script type="text/javascript">
    tinymce.init({
        selector: '#post',
        plugins: [
            'advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
            'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
            'save table contextmenu directionality template paste textcolor codesample'
        ],
        imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | codesample',
        images_upload_url: '{{ url_for('post.imageuploader') }}',
        automatic_uploads: true,
        images_reuse_filename: false,
        images_upload_base_path: '/static/uploads',
        codesample_languages: [
            { text: 'HTML/XML', value: 'markup' },
            { text: 'JavaScript', value: 'javascript' },
            { text: 'CSS', value: 'css' },
            { text: 'Processing', value: 'processing' },
            { text: 'Python', value: 'python' }
        ],
        width: "100%",
    });
</script>

At this stage when you run your app, the TinyMCE editor should appear in place of the TextAreaField. You will now be able to use the TinyMCE editor and all its features. Then when you are finished editing and and when you click submit, the HTML that you have entered will be automatically set back to the original TextAreaField. You can then continue to write that data into the database as normal. Flask does not even need know that you were using TinyMCE.
You can also upload images directly into TinyMCE. images_upload_url was defined in step 3 which refers to function imageuploader. We now need to define this function. This function basically saves the image on the server and appends the image link back into the TinyMCE editor.

@app.route('/imageuploader', methods=['POST'])
@login_required
def imageuploader():
    file = request.files.get('file')
    if file:
        filename = file.filename.lower()
        if ext in ['jpg', 'gif', 'png', 'jpeg']:
            img_fullpath = os.path.join(app.config['UPLOADED_PATH'], filename)
            file.save(img_fullpath)
            return jsonify({'location' : filename})

    # fail, image did not upload
    output = make_response(404)
    output.headers['Error'] = 'Image failed to upload'
    return output

That's it!

Some additional ideas includes saving a thumbnail version of the image and saving the image metadata (such as file name, width x height, file size) into a database. Both of these can be accomplished with the help of the Pillow library. I may write another tutorial on this in another post. Meanwhile if you have any comments do let me know.

You can see the full source code on Github

Update - I have now also written part 2 here.

Tags: tinymce flask python

Comments

Kendallhup on 2023-04-19T16:17:45Z

娛樂城

BrianImito on 2023-04-19T10:19:56Z

娛樂城

EugeneIsosy on 2023-04-15T07:48:19Z

Bocor88

EugeneIsosy on 2023-04-15T07:48:10Z

BOCOR88

RichardDop on 2023-04-14T23:10:52Z

Menjadi MC

EugeneIsosy on 2023-04-14T10:09:49Z

먹튀검증은 인터넷상에서 이루어지는 게임 및 스포츠 베팅 등의 활동에서 발생할 수 있는 사기와 부정행위를 예방하고 방지하기 위한 검증 절차입니다. 인터넷상에서 이루어지는 게임 및 스포츠 베팅 등의 활동에서는 많은 금전적 거래가 이루어지고 있습니다. 이에 따라 사기와 부정행위가 발생할 가능성이 높아지는데, 먹튀검증은 이러한 사기와 부정행위를 방지하기 위한 수단입니다. 먹튀검증을 위해서는 검증 업체가 있어야 합니다. 검증 업체는 먹튀 사이트를 찾아내고, 해당 사이트에서 이루어지는 활동을 분석하여 문제가 있는 사이트인지 판단합니다. 이를 위해 검증 업체는 다양한 데이터베이스를 활용하여 정보를 수집하고, 이를 기반으로 검증을 수행합니다. 먹튀검증은 사용자들에게 안전한 게임 및 스포츠 베팅 환경을 제공하기 위해 중요합니다. 먹튀 사이트에서는 사용자들이 입금한 돈을 돌려주지 않거나, 사기성 게임을 제공하는 경우가 많습니다. 이러한 경우 사용자들은 큰 손해를 입을 수 있으며, 이를 예방하기 위해서는 먹튀검증이 필요합니다. 또한, 먹튀검증은 베팅 업체나 게임 업체의 신뢰도를 높이는데도 큰 역할을 합니다. 사용자들은 신뢰성이 높은 업체를 찾아야 하기 때문에, 먹튀검증을 통해 신뢰성이 검증된 업체를 선택할 수 있습니다. 따라서, 먹튀검증은 사용자들에게 안전한 게임 및 스포츠 베팅 환경을 제공하고, 업체들의 신뢰성을 높이는데 큰 역할을 합니다. 이를 위해 검증 업체는 끊임없이 사이트를 모니터링하고, 사용자들의 신고나 제보를 받아 적극적으로 대응하여 사기와 부정행위를 방지해야 합니다

Phillippap on 2023-04-11T03:43:14Z

作为一家香港品牌的娛樂城，在过去十年里已经在海外拥有了可观的声誉和业务。截至目前，它在亚洲拥有超过10万名忠实玩家的支持，并拥有超过20年的海外線上娛樂城營運经验，并取得了合法博弈执照。如果你正在寻找一家有趣、安全且提款快速的娱乐平台，那么娛樂城绝对是你的不二之选。无论你是新手玩家还是老手玩家，娛樂城都将为你提供丰富多样的娱乐城游戏和优惠活动。除了满足每一位玩家的游戏需求外，娛樂城还会为每种游戏内容提供丰富的优惠活动，让玩家们可以一起享受每个游戏内容的乐趣。除了奖金和免费金币、首充优惠外，娛樂城还为玩家们提供了丰富多彩的体育和电竞活动，让玩家们可以更全面地体验娱乐城的乐趣。娛樂城一直在不断改进和进步，致力于打造更完美的娱乐城活动，使每位玩家都可以找到最适合自己的娱乐方式，并且享受到更多的加码优惠。每个月固定的储值加码活动和其他丰富多彩的优惠活动，都让玩家们可以更轻松地取得更多优惠，让他们更容易地找到最适合自己的娱乐方式，并且享受到更多的娱乐城游戏体验。总之，娛樂城是一家让你可以在轻松、安全的环境下体验各种不同类型的娱乐城游戏，享受到最优惠的玩乐方式的绝佳选择。

Phillippap on 2023-04-11T03:41:48Z

Gameone娛樂城是香港頂級的娛樂城品牌，集團擁有超過10年的海外營運經驗，並取得合法博弈執照。這讓玩家在這個平台上可以享受到安全、有趣、提款快速等優質的娛樂體驗。在Gameone娛樂城，玩家可以享受多種不同類型的遊戲，如百家樂、體育、老虎機等等。除此之外，Gameone娛樂城還提供了多種優惠活動，讓玩家可以獲得更多的獎勵和福利。這些活動包括免費體驗金、首儲優惠、每月固定贈獎活動、儲值限時加碼等等。在Gameone娛樂城，玩家可以享受到高品質的遊戲體驗，並且能夠安全地進行存款和提款操作。平台採用先進的加密技術和安全措施，以確保玩家的個人信息和資金安全。此外，提款速度也非常快，通常只需要幾個小時就可以完成。總之，如果你正在尋找一個安全、有趣、提款快速的網上娛樂城，那麼Gameone娛樂城絕對是一個不錯的選擇。在這裡，你可以享受到多種不同類型的遊戲，還可以參加多種優惠活動，讓你獲得更多的獎勵和福利。在Gameone娛樂城，你可以放心地享受高品質的遊戲體驗，而且能夠安全地進行存款和提款操作

MichaelRal on 2023-03-18T05:00:26Z

2023年第五屆世界棒球經典賽即將拉開帷幕！台灣隊被分在A組，小組賽定於2023年3月8日至3月15日進行，淘汰賽時間為3月15日至3月20日，冠軍賽將在3月21日舉行。比賽將由各組前兩名晉級8強複賽，你準備好一起看世界棒球經典賽了嗎？更多詳情請參考富遊的信息！以下是比賽的詳細賽程安排：分組賽 A組：台灣台中市，2023年3月8日至3月12日，洲際球場 B組：日本東京都，2023年3月9日至3月13日，東京巨蛋 C組：美國亞利桑那州鳳凰城，2023年3月11日至3月15日，大通銀行球場 D組：美國佛羅里達州邁阿密，2023年3月11日至3月15日，馬林魚球場淘汰賽八強賽（Game 1、2）：日本東京都，2023年3月15日至3月16日，東京巨蛋八強賽（Game 3、4）：美國佛羅里達州邁阿密，2023年3月17日至3月18日，馬林魚球場四強賽（半決賽）：美國佛羅里達州邁阿密，2023年3月19日至3月20日，馬林魚球場冠軍賽（決賽）：美國佛羅里達州邁阿密，2023年3月21日，馬林魚球場你可以參考以上賽程安排，計劃觀看世界棒球經典賽

JasonKnorp on 2023-03-18T01:15:07Z

娛樂城：不同類型遊戲讓你盡情娛樂現今，娛樂城已成為許多人放鬆身心、娛樂休閒的首選之一，透過這些娛樂城平台，玩家可以享受到不同種類的遊戲，從棋牌遊戲、電子遊戲到電競遊戲，選擇相對應的遊戲類型，可以讓你找到最適合自己的娛樂方式。棋牌遊戲：普及快、易上手、益智棋牌遊戲有兩個平台分別為OB棋牌和好路棋牌，玩家可以透過這兩個平台與朋友聯繫對戰。在不同國家，有著撲克或麻將的獨特玩法和規則。棋牌遊戲因其普及快、易上手、益智等特點而受到廣大玩家的喜愛，像是金牌龍虎、百人牛牛、二八槓、三公、十三隻、

JasonKnorp on 2023-03-17T18:49:01Z

EugeneIsosy on 2023-03-16T13:50:19Z

娛樂城: 娛樂和賭場體驗的完美融合娛樂城是一個綜合性的賭場娛樂平台，提供各種類型的賭博遊戲和娛樂活動。賭場遊戲包括各種桌上遊戲、機台遊戲和體育博彩等，而娛樂活動則包括音樂會、表演、電影等。娛樂城的目標是為參與者提供最優質的賭場和娛樂體驗。賭場保證提款娛樂城的賭場保證提款，通過金融交易處理系統提供最快的存款、取款和信用轉換，讓您不必擔心賭場不付錢給您。這個保證是基於娛樂城對自己產品的自信和對客戶的尊重。如果您在娛樂城中贏得了大獎，您可以在短時間內得到您的獎金，而不必等待很長時間。娛樂城24小服務娛樂城提供24小時的客服服務，專業的客服人員會為您解答任何問題。此外，娛樂城還提供專業的客服培訓和遊戲學習，不斷為參與者提供應對和處理遊戲信息最有效的方法。這些服務都旨在提供最優質的客戶體驗。賭場遊戲娛樂城的賭場遊戲包括各種桌上遊戲、機台遊戲和體育博彩等。扶餘娛樂城是其中一個傑出的例子，提供各種運動和體育項目的投注服務，包括NBA、MLB、世界杯、台灣運動會、美式足球、冰球、籃球、棒球、足球、網球、綜合格鬥、拳擊、高爾夫、北京賽車運動等重要賽事。真人荷官在富友賭場，您可以享受豪華的賭場和一流的真人荷官。真人

EugeneIsosy on 2023-03-15T22:14:34Z

RobertJouts on 2023-03-13T21:15:47Z

RobertJouts on 2023-03-13T21:15:23Z

EugeneIsosy on 2023-03-13T20:48:40Z

EugeneIsosy on 2023-03-13T20:38:27Z

EugeneIsosy on 2023-03-12T07:23:38Z

Georgerum on 2023-03-12T03:00:24Z

goldshell

Charlessat on 2023-03-11T04:18:22Z

ipollo

EugeneIsosy on 2023-03-09T11:09:52Z

Slot777 adalah situs slot online terpercaya di Indonesia yang menawarkan permainan slot dengan deposit pulsa tanpa potongan. Dengan adanya metode deposit pulsa, pemain dapat dengan mudah mengisi saldo dan bermain di mana saja. Selain itu, situs ini juga menawarkan berbagai provider slot terbaru seperti Pragmatic, Habanero, dan PGsoft. Selain Slot777, ada juga situs slot online terpercaya lainnya seperti Slot88 yang menyediakan permainan slot dengan tingkat kemenangan yang tinggi. Situs ini juga menawarkan berbagai game slot seperti Slot88 Hong Long Meng, Slot88 Qixi, dan Slot88 Lucky Bats. Namun, pemilihan situs slot online harus dilakukan dengan hati-hati karena banyak situs yang justru membuat pemain kalah terus. Oleh karena itu, disarankan untuk memilih situs slot yang resmi dan terpercaya seperti Slot777 dan Slot88. Dengan begitu, pemain dapat memainkan permainan slot dengan aman dan meraih kemenangan yang tinggi.

EugeneIsosy on 2023-03-08T16:15:04Z

EugeneIsosy on 2023-03-06T23:23:28Z

EugeneIsosy on 2023-03-06T14:09:35Z

"Sabong Bonus: A Great Way to Get More for Your Money" If you're looking to get more bang for your buck when it comes to online sabong, then you need to take advantage of the Sabong Bonus offered by some sites. One such site is offering a 200% bonus for new members. This means that if you deposit 100PHP, you'll get an additional 200PHP in bonus credits. That's a total of 300PHP to bet on your favorite cockfights! To get the Sabong Bonus, all you need to do is sign up on the site and make your first deposit. The bonus credits will be automatically added to your account. With the extra credits, you can bet on even more cockfights and potentially win big. So why not take advantage of the Sabong Bonus today and see what you can win?

Jerryrhymn on 2023-02-21T01:48:02Z

Playing online sabong also provides an opportunity for beginners to learn more about the sport. Many online platforms offer tutorials and guides on how to play and bet on sabong matches. They can also participate in free games or practice matches to improve their skills before they place real bets.

Tyronetearf on 2023-02-19T09:52:26Z

최고의 메이저 사이트 추천 업체 중 하나인 메이저나라는 전문적인 검증 과정을 통해 안전한 메이저 사이트를 보증하고 있습니다. 최근 먹튀 사고가 증가하면서 먹튀 방지를 위한 많은 장치들이 나타나고 있습니다. 그러나 메이저나라는 이러한 편법에 속지 않고 안전한 메이저 업체만을 추천하고 있습니다. 메이저나라는 안전한 메이저 놀이터를 추천하기 위해 먹튀 검증을 진행하고 있습니다. 먹튀 검증 과정에서는 업계 전문가들로 구성된 검증팀이 악성 사이트에 대한 회원들의 가입을 최대한 막고 있습니다. 이를 통해 더 많은 회원들이 안전한 업체를 이용할 수 있도록 노력하고 있습니다. 메이저나라에서는 먹튀 검증 방법을 단순히 서버 년도 수준의 검증이 아닌, 실제 업계 커뮤니티와 관련 업자들에게 잠입하여 모든 사이트 정보를 얻고 해당 사설 토토사이트의 운영 방법이나 관리 방법 등을 입수하고 계열 사이트의 경우에는 해당 놀이터를 역추적하여 실질적인 운영 사이트를 찾아내는 방법을 사용합니다.

Brandoncem on 2023-02-14T12:07:31Z

tiyara4d

JasonMit on 2023-01-10T20:16:27Z

스포츠중계

EdgardoPep on 2023-01-10T14:11:11Z

먹튀검증

Jamesmam on 2022-12-30T22:54:18Z

토토사이트

Jamesmam on 2022-12-30T09:33:34Z

토토사이트

TracyUsecy on 2022-12-27T09:22:53Z

GAS SLOT Adalah, situs judi slot online terpercaya no.1 di Indonesia saat ini yang menawarkan beragam pilihan permainan slot online yang tentunya dapat kalian mainkan serta menangkan dengan mudah setiap hari. Sebagai agen judi slot resmi, kami merupakan bagian dari server slot777 yang sudah terkenal sebagai provider terbaik yang mudah memberikan hadiah jackpot maxwin kemenangan besar di Indonesia saat ini. GAS SLOT sudah menjadi pilihan yang tepat untuk Anda yang memang sedang kebingungan mencari situs judi slot yang terbukti membayar setiap kemenangan dari membernya. Dengan segudang permainan judi slot 777 online yang lengkap dan banyak pilihan slot dengan lisensi resmi inilah yang menjadikan kami sebagai agen judi slot terpercaya dan dapat kalian andalkan

TracyUsecy on 2022-12-23T23:52:05Z

Williamcette on 2022-12-23T14:14:59Z

먹튀검증사이트

Williamcette on 2022-12-20T14:58:11Z

Demo Slot Online Indonesia Gacor. Dengan penyedia layanan Pragmatic Play terbaik, Anda dapat bermain tanpa membuat akun di mesin slot atau melakukan deposit, sehingga mudah untuk memenangkan jackpot. Sangat cocok untuk anda yang menyukai permainan slot online dengan jackpot bulanan jutaan rupiah. Demo Slot Online Indonesia Gacor memberi Anda kesempatan untuk memainkan mesin slot uang nyata terbaru dan tercanggih yang juga menawarkan versi demo dari game mereka sehingga Anda bisa merasakan gameplaynya sebelum Anda memainkan Slot Pragmatic dengan uang sungguhan

Williamcette on 2022-12-19T08:57:17Z

Puncak88

Jamesmam on 2022-12-19T03:39:35Z

프리미엄 스포츠중계 PICKTV(픽티비)는 회원가입없이 무료스포츠중계,월드컵중계,무료TV시청이 무료로 가능합니다

Jamesmam on 2022-12-18T00:21:28Z

프리미엄 스포츠중계 PICKTV(픽티비)는 회원가입없이 무료스포츠중계,월드컵중계,무료TV시청이 무료로 가능합니다

Williamcette on 2022-12-07T21:51:31Z

Antoniowaino on 2022-11-24T06:47:07Z

10 e lotto immediato

GeorgeNeusa on 2022-11-22T11:59:52Z

먹튀검증

RichardCHike on 2022-11-22T08:34:46Z

1 Mobile Numero Assistnza

DavidLig on 2022-11-12T06:10:31Z

Comentarios bater jogo na casa de apostas 1 win. Como jogar e ganhar dinheiro em. Estrategia e truques para ganhar no 1 win Casino. Analogo do jogo aviator por Dinheiro. Jogo Predictor hack

Jeremyden on 2022-11-11T17:21:00Z

Многопользовательская игра на деньги, которая позволяет зарабатывать деньги делая ставки на график. Высокие коэффициенты и выплаты. Бонус по промокоду 2022 играть в казино 1 win

DavidOwelp on 2022-11-10T18:42:50Z

в букмекерской конторе 1 win. Азартная краш игра в казино 1вин. Стратегия заработка денег. Как вывести средства с баланса. Бонус промокод при регистрации на официальном сайте. Скачать APK на телефон.

Richardjeace on 2022-11-10T07:51:21Z

A dinheiro em uma casa de apostas. Estratégias populares, truques e táticas do jogo para ganhar dinheiro. Baixe o aplicativo para o telefone gratuitamente. Bônus de inscrição para cada jogador

Jeremyden on 2022-11-10T07:23:01Z

Jogo A dinheiro multiplayer que permite ganhar dinheiro apostando em um grafico. Altos indices e pagamentos. Bonus do codigo promocional 2022. jogar no Casino 1 win Yu

Harryfer on 2022-10-21T20:44:23Z

온라인 슬롯카지노

Kevin Foong on 2020-08-04T00:04:17Z

@Prosper Ogbonnaya, the code on this tutorial should be working. Can you show your code so I can take a look.

Prosper Ogbonnaya on 2020-08-03T12:45:01Z

Got a 404 right after trying to upload an image from my local directory, I think it has something to do with the image upload url..explain

Kevin Foong on 2019-11-17T04:01:33Z

I took a look and you are missing the closing bracket for codesample_languages. Should be: codesample_languages: [ {text: 'HTML/XML', value: 'markup'}, {text: 'JavaScript', value: 'javascript'}, {text: 'CSS', value: 'css'}, {text: 'Processing', value: 'processing'}, {text: 'Python', value: 'python'} ], content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', '//www.tiny.cloud/css/codepen.min.css' ]

Edvin Dunaway on 2019-11-10T10:29:19Z

I'm not able to get it to work with my site. could you look? https://gist.github.com/eddinn/b5c84f83105d5179adbe68cda46c5c28 https://gist.github.com/eddinn/a8d398ee156914c2f91cac24c6e9a8e4

TinyMCE and Flask

Comments

Leave a Comment