TinyMce文本编辑器

第一步：引入tinymce文件

<script type="text/javascript" src="../../hlib/tinymce/tinymce.min.js"></script>

第二步：编写HTML文件

<textarea id="content" name="content" rows="" cols=""></textarea>

第三步：初始化tinymce

<script language="javascript" type="text/javascript">
 tinyMCE.init({
selector : "#content", //选择器，如：id、class等
language : "zh_CN",//指定语言为中文
height : 500,              //指定编辑框高度为500
menubar: false,        //隐藏主菜单栏
plugins: [    //添加插件
         "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
         ],

   //工具栏显示的工具
    toolbar1: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
    toolbar2: "searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code | inserttime preview | forecolor backcolor",
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

 //扩展工具栏
    /* style_formats: [
                    {title: 'Bold text', inline: 'b'},
                    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                    {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                    {title: 'Example 1', inline: 'span', classes: 'example1'},
                    {title: 'Example 2', inline: 'span', classes: 'example2'},
                    {title: 'Table styles'},
                    {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
                ],  */
    //定义是否可以改变输入窗口大小
    theme_advanced_resizing : true,
image_advtab: true,
templates: [{title: 'Test template 1', content: 'Test 1'},{title: 'Test template 2', content: 'Test 2'}] 
}); 
 </script>

扩展插件

uploadimage插件，创建js文件，然后压缩为min.js文件（与tinymce自身插件结构相同，用法与tinymce也相同）

plugin.js中

var j;//用于关闭layui弹窗
tinymce.PluginManager.add('uploadimage', function (editor) {
function selectimg(){
j=layer.open({//layui弹窗
 type: 1,
 content: $('#img-select'),
 area: ['400px','300px'],
 btn:'确定',
 yes: function(index, layero){
  var src = $('#picture').val();
var width = $('#width').val();
var height = $('#height').val();
var imgposition = $('#imgposition').val();
var img = "<div>";//定义要添加的元素
img += "<img style='width:"+width+"px;height:"+height+"px;margin-left:"+imgposition+"px' src='"+src+"'/></div>";
var content = tinyMCE.activeEditor.getContent();//获取编辑器中的内容
var div = "<div></div>";//定义父元素
div = $(div).append(content).append(img);//将编辑其中的内容及要添加的图片append到父元素中，append返回添加后的jQuery对象
tinyMCE.activeEditor.setContent(div.html());//最后将对象中的HTML元素添加到编辑器中
layer.close(index);
 },
 btnAlign: 'r',
 closeBtn:2,
 anim: 1,
 resize:false,
 cancel: function(index, layero){ 
 layer.close(index);
 }  
});
}
    editor.addButton('uploadimage', {
        icon: 'image',
        tooltip: '本地上传',
        onclick: selectimg
    });


    editor.addMenuItem('uploadimage', {
        icon: 'image',
        text: '本地上传',
        context: 'tools',
        onclick: selectimg
    });
    
});