fastadmin动态追加富文本编辑器（Tinymce富文本编辑器）篇

第一步：去后台插件中心安装一个富文本编辑器的插件这里以Tinymce富文本编辑器为例，此款编辑器在fastadmin后台为免费插件。

第二步：去你的源代码目录的addons/tinymce目录下找到bootstrap.js文件打开

找到如下这段渲染代码（这段代码中的.tinyeditor为小编自己项目中有多个编辑器为了不冲突自己更改了，默认为editor）

 try {
            //绑定summernote事件
            if ($(".tinymce,.tinyeditor", form).size() > 0) {
                require(['tinymce'], function () {
                    var init = {
                        selector: ".tinymce,.tinyeditor",//容器可以是id也可以是class
                        language: 'zh_CN',//语言
                        theme: 'silver',//主体默认主题
                        plugins: ['advlist link image lists charmap hr anchor pagebreak searchreplace wordcount visualblocks visualchars code insertdatetime nonbreaking save table contextmenu directionality help autolink autosave print preview spellchecker fullscreen media emoticons template paste textcolor'],//所含插件
                        content_style : '',//编辑器样式只对编辑器试图有效不会提交到html中
                        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | spellchecker help',//工具栏
                        file_picker_types: 'image,media',//文件上传支持类型：file,image,media
                        //图像上传处理
                        convert_urls:false,//关闭url自动检测
                        images_upload_handler: function (blobInfo, success, failure) {
                            Upload.api.send(blobInfo.blob(), function (data) {
                                var url = Fast.api.cdnurl(data.url);
                                success( url);
                                return;
                            },function (data,ret) {
                                Layer && Layer.closeAll('dialog');
                                failure(ret.msg);
                                return;
                            });
                        },
                        image_default_size:{width:'100%',height:''},//图片添加成功后的默认宽高 格式：{width:"",height:''} 允许是百分比或像素
                        media_default_size:{width:'100%',height:''},//音/视频添加成功后的默认宽高 格式：{width:"",height:''} 允许是百分比或像素
                        browser_spellcheck: true,//浏览器检查拼写
                        spellchecker_callback: function(method, text, success, failure) {
                            var words = text.match(this.getWordCharPattern());
                            if (method == "spellcheck") {
                                var suggestions = {};
                                for (var i = 0; i < words.length; i++) {
                                    suggestions[words[i]] = ["First", "Second"];
                                }
                                success(suggestions);
                            }
                        },
                        setup:function (editor) {
                            editor.on('change',function () {
                                editor.save();
                                $(editor.getElement()).trigger("input");
                            });
                        }
                    };
                    if(false){
                        //文件上传处理
                        init.file_picker_callback = function(callback, value, meta) {
                            //为不同插件指定文件类型
                            switch(meta.filetype){
                                case 'image':
                                    filetype='image/*';
                                    break;
                                case 'media':
                                    filetype='audio/*,video/*';
                                    break;
                                case 'file':
                                default:
                            }

                            //模拟出一个input用于添加本地文件
                            var input = document.createElement('input');
                            input.setAttribute('type', 'file');
                            input.setAttribute('accept', filetype);
                            input.click();
                            input.onchange = function() {
                                Upload.api.send(this.files[0], function (data) {
                                    var url = Fast.api.cdnurl(data.url);
                                    callback(url);
                                    return;
                                },function (data,ret) {
                                    Layer && Layer.closeAll('dialog');
                                    alert(ret.msg);
                                    return;
                                });
                            };
                        };
                    }
                    tinymce.init(init);
                    $(document).on("click", ":button[type=submit],input[type=submit]", function () {
                        tinymce.triggerSave();
                    });
                });
            }
        } catch (e) {

        }

大概位置也就是在第10行代码左右。将这段代码粘贴到目录   你的项目文件夹\public\assets\js\require-form.js中

首先找到events这个大方法如下图

在这个大方法中新建一个tinyeditor方法，将刚刚的代码粘贴到这个方法体中

粘贴好了以后注意改一下监听程序增加一行代码如下

$(editor.getElement()).trigger("change");//新增

第四步：找到fieldlist方法在里面追加一行代码

这里的tinyeditor是你上面自定义的什么方法名这里就写什么方法名，按照小编的这个名称也是可以的。

 Form.events.tinyeditor(obj);

第五步：找到你的前台html部分将动态追加的那个class改为tinyeditor即可。

此时已经可以实现动态编辑器的添加渲染和删除了，但在fieldlist组件拖拽排序时会导致tinymce编辑器损毁解决方案如下：

第六步：修改/public/assets/js/require-form.js里的fieldlist方法里面的dragEnd修改如下：

加一行代码

$(this).find('.tinymce').remove();