BBfriendブログ

TinyMCEを jsfiddle.net で

https://jsfiddle.net/

TinyMCE4のテストをhttps://jsfiddle.net/ でやる際の覚書

http://www.cmsimple-xh.org/wiki/doku.php

  • External Resources として 外部のCDNを指定
    https://cdnjs.com/libraries/tinymce の場合
    バージョンを選択し、特にJquery版に拘らないなら
    末尾のhttps://cdnjs.cloudflare.com/ajax/***/tinymce.min.js
  • CDNがなぜか読み込まれない場合は、左のExternal Resourcesからtinymce.min.jsをクリックして、画面上に一度表示させると良さそう
  • 簡単なデバッグは External Resourcesに 下記を指定
    https://getfirebug.com/firebug-lite-debug.js 
  • 画像の一時的な置き場所
    一時的 http://postimages.org/
    汎用を使う 
    Base64エンコードで使う
  • Iframeで表示される順は ~embedded/result,js,html,css/
    <iframe src="//jsfiddle.net/***/***/embedded/result,js,html,css/" width="100%" height="600" frameborder="0" allowfullscreen="allowfullscreen">

 

単純に・・ エディタの表示例

プラグインやボタンのテスト

HTML

<textarea id="aaa"></textarea>

JSの中

tinymce.init({
  selector: '#aaa',
  plugins: 'code ここにプラグイン名',
  toolbar: 'undo redo | ここにボタン',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'],
  
  setup: function(editor) {

  ここに書く

  }
});

CSSは適当

body {
  padding: 5px;
}

JSのサンプル

サンプル2

サンプル3 :プラグインタイプ

 

コメント