代码小记:tinymce使用心得

帕奇式

公司后台的编辑器从我刚接触的bootstrap-wysihtml5更新到summernote,后来发现summernote也是巨坑无比(坑:粘贴没有过滤、插件结构最近又更新一遍了感觉还是个不怎么完整的东西来)。之后摸索到tinymce感觉与前两个编辑器比较还是算完整的(可能没接触到坑)。

这里简单介绍一下tinymce的使用,推荐tinymce的原因是它对于富文本编辑有完整支持,其中比较重要的 粘贴格式清除自定义toolbar自定义文本样式 这些对于编辑需求比较高的都基本能解决。

简单使用

<textarea></textarea>

<script>
tinymce.init({
  selector: 'textarea'  // change this value according to your HTML
});
</script>

直接使用可以使用这种方式,方便快捷。但是满足不了大部分人,你们需要的是自定义!!!

使用手册传送门: https://www.tinymce.com/docs/get-started/basic-setup/
API速查传送门:http://archive.tinymce.com/wiki.php/api4:class.tinymce

手脚架

提供给看完文档后无从下手的伙伴,这配置够用了。

module.exports = {
    "menubar": false,
    "height": 500,
    "language": "zh_CN",
    "plugins": [
        "advlist autolink link image lists charmap print hr anchor pagebreak spellchecker",
        "searchreplace visualblocks visualchars code fullscreen media nonbreaking",
        "table directionality emoticons template textcolor paste textcolor colorpicker textpattern"
    ],
    "toolbar_items_size": "small",
    "block_formats": "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;",
    "toolbar1": "insertfile undo redo | formatselect | bullist numlist | link unlink | uploadimg image media | fullscreen",
    "toolbar2": "fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat"
}

本地化语言包下载传送门:http://archive.tinymce.com/i18n/index.php

语言包下载后放到tinymce/langs目录下方可使用。

常用“姿势”

设置文本

var config = require('tinymce.config')
config.setup = function(editor){
    //init
    editor.on('init', function(){
        editor.setContent('<p>上来就是一把!</p>')
    })
}
tinymce.init(config)

指定DOM初次化

有些情况下不能使用查找方式找到DOM,可以使用以下方式直接传入DOM

tinymce.init({
    target: document.querySelector('#editor')
})

获得内容

if(tinymce.activeEditor) //activeEditor可能为空
    tinymce.activeEditor.getContent()

直接编辑内容

插入图片例子

// editor.undoManager记录DOM变化,回滚操作才会奏效。
editor.undoManager.transact(function() {
    var dom = editor.dom,
        imgElm;

    var data = {
        src: 'http://www.jingyanbus.com/uploads/150307/4175-15030GFS02a.jpg'
    };
    data.id = '__mcenew';
    editor.focus();
    editor.selection.setContent(dom.createHTML('img', data));
    imgElm = dom.get('__mcenew');
    dom.setAttrib(imgElm, 'id', null);
})
阅读 9.6k

帕奇的手札
推敲、实验、搞破坏是每个孩子必经的阶段;)

设计和管理是毕生的课题👨‍💻

856 声望
66 粉丝
0 条评论

设计和管理是毕生的课题👨‍💻

856 声望
66 粉丝
文章目录
宣传栏