代码小记：tinymce使用心得

GT 发布于2019-08-19 17:37 / 2945人阅读

摘要：简单使用直接使用可以使用这种方式，方便快捷。但是满足不了大部分人，你们需要的是自定义使用手册传送门速查传送门手脚架提供给看完文档后无从下手的伙伴，这配置够用了。本地化语言包下载传送门语言包下载后放到目录下方可使用。

序

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

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

简单使用

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

使用手册传送门： 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("上来就是一把！")
    })
}
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);
})

GPU云服务器云服务器使用心得使用心得与技巧阿里云使用心得橙云vps使用心得

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78689.html

TinyMCE插件开发

摘要：目前网上关于插件开发的文章少得可怜，下面分享最近的经历，如何快速上手开发一个插件。第六步调试插件在打开的网页中可以看到工具栏中实现了插件。 TinyMCE是一个非常优秀的轻量级的所见即所得HTML编辑器，历史悠久，开源，在github的start也非常高的，且长期保持更新。TinyMCE的官方插件不少，基本能满足日常需求，但是有时候我们还需要一些结合业务的功能。这时官方插件无法满足，就...

aboutU 2019-08-22 18:29 评论0 收藏0
tinymce与prism代码高亮实现及汉化的配置

摘要：简单介绍是一个轻量级的基于浏览器的所见即所得编辑器，由写成。它对和都有着非常良好的支持。功能方强大，并且功能配置灵活简单。另一特点是加载速度非常快的。所以我们使用作为代码高亮插件。简单介绍：TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大，并且功能配置灵活简单。另一特点是加载速度非常快的...

番茄西红柿 2019-04-23 13:31 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

HackerShell 2019-08-21 17:29 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

Honwhy 2019-08-01 17:56 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

k00baa 2019-07-30 14:56 评论0 收藏0