生成多个百度编辑器UEditor

最新推荐文章于 2024-07-02 03:29:58 发布

Twoknives

最新推荐文章于 2024-07-02 03:29:58 发布

阅读量1.8k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Twoknives/article/details/86370286

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目是根要输入多天的行程，包括图片日期，于是就只能生成多个编辑器。
js根据input所填的数字，js生成占位符后，根据样式名来渲染编辑器

首先引入文件，官网直接下载就好

http://fex-team.github.io/ueditor/

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>

js生成占位符

str_content="<tr><td width='80'>行程内容</td><td>"+"<script type='text/plain'" + " id='content_"+i+"' class='trip_editor' name='post[content_"+i+"]'></"+"script></td></tr> ";

       mycontent=String("post[content_"+i+"]");
        editorcontent=String('editorcontent'+i);
    

    };
 

      
     $("#trip_content_day").append(str);  
     var trip_editor= ".trip_editor";
     do_editor(trip_editor);
}

根据样式名渲染编辑器


function do_editor(classname){

$(classname).each(function() {
 var id = this.id;    
 var ue = UE.getEditor(id, {
     pasteplain: true, /* 纯文本粘贴 */
     autoHeightEnabled:true,/* 启用右侧滚轮,默认是true自动长高模式*/
     toolbars: [[
         'fullscreen', 'source', '|', 'undo', 'redo', '|',
         'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
         'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
         'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
         'directionalityltr', 'directionalityrtl', 'indent', '|',
         'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
         'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
         'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
         'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
         'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
         'print', 'preview', 'searchreplace', 'drafts', 'help'
     ]]
 }).addOutputRule(function(root){
   // 每次编辑框获取焦点的时候都会自动插入<p><br/></p> 不需要的话我们这里可以处理一下
 // 只处理第一个空的段落，后面的段落可能是人为添加
 var firstPNode = root.getNodesByTagName("p")[0];
 firstPNode && /^\s*(<br\/>\s*)?$/.test(firstPNode.innerHTML()) && firstPNode.parentNode.removeChild(firstPNode);
 });
 console.log('ueditor for ' + id + ' init.');
});
```