Can the TOC directory be redirected to an external element? At the same time, click the directory to jump to the specified content?
The current TOC plug-in can not meet the requirements, because when the content is very long, it is a headache to browse up and down
Table of Contents
Introduction
I want to show Tinymce Editor slider at the left side
I have used the Tinymce Sidebar API TinyMCE SideBar
Try here Tinymce SideBar Fiddle Sidebar is at right sude but i want that at left side
I tried following but it shows at the right side as follow:
But I want slider at the Right side as follow:
Important: TinyMCE 5.10 will include the final release of the Table of Contents plugin (
toc
) as an open source plugin. The Table of Contents plugin will be removed from the open source bundle and be available as a premium plugin for TinyMCE 6.0.
Useful links
手写一个文章目录插件,兼容博客园 markdown 和 TinyMCE 编辑器
https://www.cnblogs.com/guangzan/p/12692795.html
tinymce 基于vue + typescript 同步更新左侧目录导航
在富文本编辑器中将某段落设置成H1-H6任意标题时,实时在左侧【目录导航】中生成目录,取消任意H1-H6标签时,同步更新左侧目录导航
https://www.tiny.cloud/docs/plugins/opensource/toc/
富文本编辑器TinyMCE在vue2中的使用以及动态绑定(全部代码)
https://juejin.cn/post/7086753431385276447
siderbar left: table of contents demo page
https://github.com/jgallen23/toc
demo:http://projects.jga.me/toc/#toc3
文章页面,左侧滚动内容时右侧目录也在跟着变化
https://www.cnblogs.com/mahmud/p/11456222.html
富文本编辑器tinymce获取文本内容和设置文本内容
1、如果当前页面只有一个编辑器:
获取内容:tinyMCE.activeEditor.getContent()
设置内容:tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)
2、如果当前页面有多个编辑器(下面的“[0]”表示第一个编辑器,以此类推):
获取内容:tinyMCE.editors[0].getContent()
设置内容:tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)
3、获取不带HTML标记的纯文本内容:
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );
取到的 text 即为纯文本内容。
如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中
如果你想用TinyMCE来修改你之前写的文章那么你需要将源代码放到TinyMCE中,如果服务器把HTML源码发给我们可是我们应该怎样调用?
方法为使用 tinymce.activeEditor.setContent()这个函数
具体用法为:
tinymce.activeEditor.setContent() //设置TinyMCE编辑器里的内容源代码
tinymce.activeEditor.getContent() //获取TinyMCE编辑器里的内容源代
可是我们发现直接放到HTML文件里执行无法获取到这个函数,这是因为TinyMCE这个时候还没有初始化完成,也就是说我们还无法调取这个函数,必须要等到TinyMCE彻底初始化完成后才能调用,所以我们这里有两种写法获取初始化完成的消息。
//第一种:
//使用setup
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
selector: '#mytextarea',
setup: function (editor) {
editor.on('init', function (e) {
console.log('初始化完成');
tinymce.activeEditor.setContent(data);
});
}
})
________________________________________________________________________________________
//第二种
//使用.then回调函数
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
selector: '#mytextarea',
}).then(resolve => {
tinymce.activeEditor.setContent(data);
});
————————————————
tinymce5设置光标到内容末尾
通常我们设置内容后,光标会跑到最前面
editor.setContent(content)
复制后,通过下面代码即可把光标放到内容最后面
editor.selection.select(editor.getBody(),true);
editor.selection.collapse(false);
The Table of Contents plugin provides the following JavaScript commands.
The Table of Contents plugin provides the following JavaScript commands.
Command Description
mceInsertToc Inserts a Table of Contents into the editor.
mceUpdateToc Updates an existing Table of Contents.
Examples
tinymce.activeEditor.execCommand('mceInsertToc');
tinymce.activeEditor.execCommand('mceUpdateToc');
tinymce原装插件
https://www.cnblogs.com/xunhanliu/tag/tinymce/
tinymce5.1.6 源码下载
https://www.tiny.cloud/get-tiny/self-hosted/
https://www.jb51.net/article/165713.htm
Tinymce富文本编辑器的改进——支持导入word
https://juejin.cn/post/7110046266909949983
利用iframe引入自定义功能页面
https://developer.aliyun.com/article/996159#slide-2
jQuery 实现富文本的标题自动生成二级目录
http://xieboke.net/article/157/
https://dyclassroom.com/tinymce/how-to-set-data-to-tinymce-text-editor
手写一个文章目录插件(博客园)
https://www.cnblogs.com/guangzan/p/12692795.html
Other
各种左侧目录编辑器
https://www.zhihu.com/question/48929348