admin 教程 2022-12-28

【超详细】Tinymce富文本使用教程

Tinymce基础使用手册 1. 开始

官网文档：www.tiny.cloud/docs/

社区版及开发版官方最新打包地址：www.tiny.cloud/get-tiny/self-hosted/

汉化包：tinymce.ax-z.cn/static/tiny/langs/zh_CN.js

2. 快速使用引入tinymce脚本将tinymce初始化为页面的一部分

我们需要使用tinymce.init()来进行初始化；tinymce.init()内的初始化对象包含众多参数，但都是可省略的，唯一必须的参数就是selector（允许通过css选择器指定tinymce要绑定的内容容器，div和textarea都是可以的）

例如：

tinymce.init({ selector: ‘#tinydemo’ });

获取tinymce富文本框内容的几种方式：

如果当前页面只有一个编辑器

获取内容：tinyMCE.activeEditor.getContent()

设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)

如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）

获取内容：tinyMCE.editors[0].getContent()

设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)

获取不带HTML标记的纯文本内容

var activeEditor = tinymce.activeEditor;var editBody = activeEditor.getBody();activeEditor.selection.select(editBody);//纯文本内容var text = activeEditor.selection.getContent({ ‘format’: ‘text’});

textarea可通过表单提交 TinyMCE Quick Start Guide Hello, World! tinymce.init({ selector: ‘#mytextarea’ });

3. 常用配置 selector

渲染DOM，必填，String值，使用CSS选择器。

language

指定语言，String，值区分大小写。

language_url

汉化包路径

height

设置整个编辑器的高度，包括菜单栏、工具栏和状态栏,如果提供了数字，TinyMCE 以像素为单位设置高度。如果提供了字符串，TinyMCE 假定该值是有效的 CSS，并将编辑器的高度设置为字符串值。这允许备用单元，例如%，em，和vh。(测试%不起作用)

readonly

只读，Boolean，将编辑器设置成只读模式，不可编辑。

plugins

指定需加载的插件，String或Array，此插件必须已存在plugins目录内；若使用String值，多个插件用空格分隔；默认不会加载任何插件，支持自写插件。

可选插件配置：www.tiny.cloud/docs/plugins/opensource/advlist/

toolbar

自定义工具栏，Boolean或String或Array；为false时将关闭工具栏；String值时用于自定义工具栏，例：toolbar:”link | preview”，值中可插入“|”分组；支持多级工具栏,例：toolbar1:””,toolbar2:””；官网：www.tiny.cloud/docs/configure/editor-appearance/#toolbar

自定义菜单。例：

tinymce.init({ selector: ‘#tinydemo’, menu: { file: {title: ‘文件’, items: ‘newdocument’}, edit: {title: ‘编辑’, items: ‘undo redo | cut copy paste pastetext | selectall’}, insert: {title: ‘插入’, items: ‘link media | template hr’}, view: {title: ‘查看’, items: ‘visualaid’}, format: {title: ‘格式’, items: ‘bold italic underline strikethrough superscript subscript | formats | removeformat’}, table: {title: ‘表格’, items: ‘inserttable tableprops deletetable | cell row column’}, tools: {title: ‘工具’, items: ‘spellchecker code’} }});

当有多级菜单时：

tinymce.init({ selector: ‘#tinydemo’, menubar: ‘my1’, menu: { my1: {title: ‘我的菜单’, items: ‘copy paste’ } }}); menubar

1级菜单，Boolean或String；为false时将关闭菜单栏；String时用于自定义1级菜单，例：menubar:”file edit”；官网：www.tiny.cloud/docs/configure/editor-appearance/#menubar

placeholder

内容预展示文本，String值。

resize

调整编辑器大小工具，编辑器右下角有一个可以拖动的标记，鼠标按住它可以改变编辑器的大小。默认resize: true；可选值为：true（仅允许改变高度）, false（完全不让你动）, ‘both’（宽高都能改变，注意引号）。

4. 高级功能图片上传 tinymce.init({ selector: ‘#tinydemo’, language: ‘zh_CN’, plugins: ‘image’, //使用image插件 toolbar: ‘image’, //工具栏显示 images_upload_url: ‘/api/controller/action’, //用于指定一个接收上传文件的后端处理程序地址 images_upload_base_path: ‘/demo’, //如果返回的地址是相对路径，此参数可以给相对路径指定它所相对的基本路径});

跨域问题：如果TinyMCE和接受上传图片程序未在同一域名下，浏览器会因跨域问题而拒绝操作，后端程序返回结果时，需给浏览器一个允许跨域的指令。

图片上传扩展参数

名称描述images_upload_credentials对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。值为布尔值，默认false。images_upload_handler（图片上传自定义实现）此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供4个参数：blobInfo、成功回调和失败回调、上传进度（取值1-100）。

images_upload_handler函数将完全接管编辑器的图片上传，你需要在上传成功后执行成功回调函数，参数则为图片URL，也可以在第二个参数加入对话框填充数据对象。

//以下为自定义上传实现的一个代码示例tinymce.init({ selector: ‘#tinydemo’, images_upload_handler: function(blobInfo, success, failure, progress) { var xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open(‘POST’, ‘action’); xhr.upload.onprogress = function(e) { progress(e.loaded / e.total * 100); } xhr.onload = function() { var json; if (xhr.status == 403) { failure(‘HTTP Error: ‘ + xhr.status, { remove: true }); return; } if (xhr.status < 200 || xhr.status >= 300) { failure(‘HTTP Error: ‘ + xhr.status); return; } json = JSON.parse(xhr.responseText); if (!json || typeof json.location != ‘string’) { failure(‘Invalid JSON: ‘ + xhr.responseText); return; } success(json.location); }; xhr.onerror = function() { failure(‘Image upload failed due to a XHR Transport error. Code: ‘ + xhr.status); } formData = new FormData(); formData.append(‘file’, blobInfo.blob(), blobInfo.filename()); xhr.send(formData); }});

文件上传

原文里只涉及了图片上传，文件上传没有说明，只能使用 file_picker_callback 写回调。更多参数请移步官网：www.tiny.cloud/docs/configure/file-image-upload/#automatic_uploads

简单例子：

tinymce.init({ selector: ‘#tinydemo’, language: ‘zh_CN’, plugins: ‘link’, toolbar: ‘link’, file_picker_callback: function(callback, value, meta) { //文件分类 var filetype = ‘.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4’; var upurl = ‘/api/controller/’; //为不同插件指定文件类型及后端地址 switch (meta.filetype) { case ‘image’: filetype = ‘.jpg, .jpeg, .png, .gif’; upurl += ‘action1’; break; case ‘media’: filetype = ‘.mp3, .mp4’; upurl += ‘action2’; break; case ‘file’: break; }; //模拟出一个input用于添加本地文件 var input = document.createElement(‘input’); input.setAttribute(‘type’, ‘file’); input.setAttribute(‘accept’, filetype); input.click(); input.onchange = function() { var file = this.files[0]; var xhr, formData; console.log(file.name); //TODO:这里写请求 }; }, }); 自定义插件

第一，在目录tinymce/plugins下新建一个目录，与自己要取的插件名称相同，在到插件目录下新建plugin.min.js，如下：

upfile/plugin.min.js

upfile是我自定义插件名称，位置tinymce/plugins/upfile

第二，理解下面代码，参阅官网：www.tiny.cloud/docs/api/tinymce/tinymce.addonmanager/

/** * 上传文件插件 */tinymce.PluginManager.add(‘upfile’, function (editor, url) { var openDialog = function () { return editor.windowManager.open({ title: ‘上传文件’, body: { type: ‘panel’, items: [ { type: ‘htmlpanel’, // component type html: ” } ] }, buttons: [ { type: ‘cancel’, text: ‘Close’ }, { type: ‘submit’, text: ‘Upload’, primary: true } ], onSubmit: function (api) { let input = document.getElementById(“TinymcefileToUpload”); console.log(“进来了”); if (input.files.length > 0) { let file = input.files[0]; let formData = new FormData(); formData.append(“formFile”, file); axios.post(“https://192.168.0.174:7183/api/Test/UploadFile”, formData).then(res => { if (res.data?.path != “”) { editor.insertContent(res.data.fileName + “:” + res.data?.path); alert(“文件上传成功”); } else { alert(“上传失败”); } }).catch(err => console.log(err)); } api.close(); } }); }; // Add a button that opens a window editor.ui.registry.addButton(‘upfile’, { text: ` < path fill- rule="evenodd" d = "M3.5 10a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 0 0 1h2A1.5 1.5 0 0 0 14 9.5v-8A1.5 1.5 0 0 0 12.5 0h-9A1.5 1.5 0 0 0 2 1.5v8A1.5 1.5 0 0 0 3.5 11h2a.5.5 0 0 0 0-1h-2z" /> `, onAction: function () { // Open window openDialog(); } }); // Adds a menu item, which can then be included in any menu via the menu/menubar configuration editor.ui.registry.addMenuItem(‘upfile’, { text: ‘Example plugin’, onAction: function () { // Open window openDialog(); } }); return { getMetadata: function () { return { name: “Example plugin”, url: “http://exampleplugindocsurl.com” }; } };});

第三，笔者理解不难看出，这是一个自写文件上传插件，需要注意的是该插件基于tinymce5.x，5.x以下会报错；回到代码，其中upfile是插件名； openDialog()是用于打开弹窗； editor.windowManager.open用于自定义弹窗主题内容以及按钮回调； title是弹窗标题； body是弹窗中间内容；上述插件使用的是一个容器包含很多子项，子项其中用了html容器，该容器支持html输出； buttons弹窗按钮集合；onSubmit是提交按钮触发事件； editor.ui.registry用于添加自定义项，具体参考：www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#methods

5.使用typo排版

引入typo.css，给div加上”class=’typo'”即可自动排版，详情参阅：typo.sofi.sh

typo.css局域网地址：file://desktop-b9prpkg/enjoy/typo.css

6.tinymce-vue(不推荐)

a.快速使用

本节基于vue2演示首先，使用vuecli创建项目

vue create vue-demo

进入项目目录后，安装tinymce-vue

npm install –save “@tinymce/tinymce-vue@^3”

完整使用：

import HelloWorld from “./components/HelloWorld.vue”;import Editor from “@tinymce/tinymce-vue”;export default { name: “App”, components: { HelloWorld, Editor, }, data() { return { initME: { height: 500, language: “zh_CN”, plugins: [ “advlist autolink lists link image charmap print preview anchor”, “searchreplace visualblocks code fullscreen”, “insertdatetime media table paste code help wordcount”, ], toolbar: “undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help”, }, }; }, mounted() { tinymce.init({});},};