TinyMCE富文本编辑器超简单入门

1. 引入js

<script src='../static/js/tinymce/tinymce.min.js'></script>

<textarea id="emailContent"></textarea>

2. 初始化

tinymce.init({
    selector: '#emailContent',
    language: "zh_CN",
    menubar: false,//隐藏菜单栏
    branding: false,//隐藏右下角技术支持
    elementpath: false,//隐藏底栏的元素路径
    resize: true,//文本框右下角拖动鼠标调整编辑器高度，默认true
    min_height: 300,//最小高度
    plugins: 'autoresize',
    toolbar: 'forecolor backcolor bold italic underline | alignleft aligncenter alignright alignjustify | ' +
    'formatselect | fontselect | fontsizeselect | ' ,
    font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;' +
    'Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;' +
    'Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;' +
    'Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;'
});

PS：当有按钮控制文本域显示与否时，需设置min_height值。否则，先隐藏再显示时，文本域初始高度可能为0，此时文本域未获取到焦点，并不会自适应高度。
更多配置参数请参考文档。

3. 赋值取值：

tinymce.get('emailContent').setContent('...');
var content = tinymce.get('emailContent').getContent();

TinyMCE下载链接
TinyMCE中文文档