关于富文本Tinymce的问题

   由于前后端分离，而且还要求上传本地的图片等等一系列需求，这里使用了Tinymce 解决中间有不少坑，写个备忘吧。

首先页面中引入

<script type="text/javascript" src="/js/admin/tinymce.full.min.js">script>,

同时引入你需要实例化的js

在html中<textarea id="text">textarea>

下面就是页面的js

const bar1 = [
    'fontsizeselect fontselect formatselect',
    'bold italic underline strikethrough',
    'codesample blockquote subscript superscript',
    'alignleft aligncenter alignright alignjustify',
    'bullist numlist'
];
const bar2 = [
    'forecolor backcolor',
    'outdent indent',
    'link anchor imageupload',
    'table insertdatetime',
    'hr pagebreak',
    'pastetext unlink removeformat',
    'visualblocks code preview fullscreen',
    'undo redo'
];
const fonts = [
    '宋体=宋体',
    'Andale Mono=andale mono,times',
    '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',
    'Trebuchet MS=trebuchet ms,geneva',
    'Verdana=verdana,geneva',
    'Webdings=webdings',
    'Wingdings=wingdings,zapf dingbats'
];
// tinymce编辑器设置

tinymce.suffix = '.min';
tinymce.init({
    selector: '#text',
    height: 400,
    menubar: false,
    language: 'zh_CN',
    convert_urls: false,
    imageupload_url: '/treasureWeb/fileUpload/uploadPicture.do',
    plugins: [
        'lists link  preview hr anchor pagebreak',
        'wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media table imageupload',
        'paste textcolor colorpicker codesample'
    ],
    toolbar1: bar1.join(' | '),
    toolbar2: bar2.join(' | '),
    'image_advtab': true,
    'imagetools_toolbar': 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    'font_formats': fonts.join(';')
});

这里的imageupload 就是我们自己定义的插件,需要放到tinymce.js的同级目录的plugins里面   ,imageupload里面就是我们自己需要定义的插件了。 坑的地方主要就是由于环境的打包问题上线时候，会提示$未定义这里我们直接在plugins引入jq或者在页面前引入cdn。

                                                            有需要imageupload的同学可以联系我！