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

此页更新时间:2019-11-08 20:27

此页英文文档:无

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

常用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="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="copyContent()" value="复制选中文字" >
<input type="button" onclick="pasteContent()" value="粘贴" >
<input type="button" onclick="mceImage()" 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',
        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 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 copyContent(){ tinyMCE.editors[tinyID].execCommand('copy'); }
function pasteContent(){ tinyMCE.editors[tinyID].execCommand('paste'); }
function mceImage(){ tinyMCE.editors[tinyID].execCommand('mceImage'); }

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

插入不会被过滤掉的空元素