一些技巧 | TinyMCE中文文档中文手册

进阶主题 \ 一些技巧额外可能用到的小技巧

此页更新时间：2020-07-15 11:17

此页英文文档：无

这里是一些虽然简单，但可能在生产或开发环境中需要用到的技巧。

常用API

先点创建编辑器，再玩后面的按钮。

提醒：销毁编辑器后，某些按钮是用不了的！

<textarea id="tinydemo">这里是默认文字。</textarea>
<input type="button" onclick="initTiny()" value="① 创建编辑器" >
<input type="button" onclick="getContent()" value="获得内容" >
<input type="button" onclick="setContent()" value="设置内容" >
<input type="button" onclick="goEnd()" value="光标放最后" >
<input type="button" onclick="insertContent()" value="插入内容" >
<input type="button" onclick="saveContent()" value="同步内容到textarea" >
<input type="button" onclick="boldContent()" value="加粗文本" >
<input type="button" onclick="colorContent()" value="标红文字" >
<input type="button" onclick="fontSize()" value="文字大小" >
<input type="button" onclick="getText()" value="获得纯文本" >
<input type="button" onclick="copyContent()" value="复制选中文字" >
<input type="button" onclick="pasteContent()" value="粘贴" >
<input type="button" onclick="mceImage()" value="打开图片对话框" >
<input type="button" onclick="indent2em()" value="自定义首行缩进" >
<input type="button" onclick="hideTiny()" value="隐藏编辑器" >
<input type="button" onclick="showTiny()" value="显示编辑器" >
<input type="button" onclick="destroyTiny()" value="销毁编辑器" >

var tinyID='tinydemo';
function initTiny(){
    tinymce.init({
        selector: '#'+tinyID,
        language:'zh_CN',
        plugins:'link image indent2em',
        auto_focus: true,
    });
}
function destroyTiny(){
    tinyMCE.editors[tinyID].destroy();
    //tinyMCE.editors[tinyID].remove();
}
function getContent(){
    var cnt = tinyMCE.editors[tinyID].getContent();
    console.log(cnt);
    alert(cnt);
}
function getText(){
    var cnt = tinyMCE.editors[tinyID].getContent({ format: 'text' });
    console.log(cnt);
    alert(cnt);
}
function goEnd(){
    editor = tinyMCE.editors[tinyID];
    editor.execCommand('selectAll');
    editor.selection.getRng().collapse(false);
    editor.focus();
}
function setContent(){ tinyMCE.editors[tinyID].setContent('设置内容'); }
function insertContent(){ tinyMCE.editors[tinyID].insertContent('<b>插入内容</b>'); }
function saveContent(){ tinyMCE.editors[tinyID].save(); }
function showTiny(){ tinyMCE.editors[tinyID].show(); }
function hideTiny(){ tinyMCE.editors[tinyID].hide(); }
function boldContent(){ tinyMCE.editors[tinyID].execCommand('bold'); }
function colorContent(){ tinyMCE.editors[tinyID].execCommand('ForeColor',false,'#f33'); }
function fontSize(){ tinyMCE.editors[tinyID].execCommand('fontSize',false,'24px'); }
function copyContent(){ tinyMCE.editors[tinyID].execCommand('copy'); }
function pasteContent(){ tinyMCE.editors[tinyID].execCommand('paste'); }
function mceImage(){ tinyMCE.editors[tinyID].execCommand('mceImage'); }
function indent2em(){ tinyMCE.editors[tinyID].execCommand('indent2em'); }

浏览器支持的execCommand接口可参考这里。

查询当前支持的全部工具栏按钮

包括核心提供的工具栏按钮和当前引入插件提供的按钮。

tinyMCE.activeEditor.ui.registry.getAll().buttons;

查询当前支持的全部菜单项

同上。

tinyMCE.activeEditor.ui.registry.getAll().menuItems;

编辑器自带的图标

太多不贴了，直接看官网tinymce自带图标

自己添加图标可以用API：tinymce.editor.ui.Registry.addIcon()

ajax提交表单自动同步textarea的问题

传统点击submit提交按钮会自动同步内容，但ajax之类的用事件提交会导致内容没有同步，暂时的解决办法是在初始化参数中setup参数里加入事件监听，让他自动同步。

setup: function(editor){ 
    editor.on('change',function(){ editor.save(); });
},

工具栏z-index导致遮盖弹出层的问题

修改\skins\ui\oxide\skin.min.css文件，搜索“.tox .tox-editor-header”，将其z-index的值从1变为0后问题解决。

中文文档