tinymce使用

下载tinymce

请戳这里下载最新版免费版tinymce

注： tinymce有版权，我是用的是官方社区版及开发版

引入tinymce

将下载好的tinymce社区开发板解压后放入我们的项目静态文件里面，在项目中引入tinymce即可，如下图：

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

初始化tinymce

1.在html中加入

2.新建js文件
3.在js文件里面导入下面代码

tinymce.init({
   selector: '#tinymcetest', //容器，可使用css选择器
   placeholder: '在这里输入文字',
   language: 'zh_CN', //调用放在langs文件夹内的语言包
   toolbar: true, //工具栏
   menubar: true, //菜单栏
   branding: false, //右下角技术支持
   inline: false, //开启内联模式
   elementpath: false,
   min_height: '50vh', //最小高度
   height: '50vh',  //高度
   skin: 'oxide',
   toolbar_sticky: true,
   visualchars_default_state: true, //显示不可见字符
   image_caption: true,
   paste_data_images: true,
   relative_urls: false,
   // remove_script_host : true,
   plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
   toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',

   images_upload_url: '/massages/img', /*后图片上传接口*/ /*返回值为json类型 {'location':'uploads/jpg'}*/
   setup: function (editor) {
       editor.on('change', function () {
           editor.save();
       });
   }

});

预览界面