Popular blog tags

Integrating Table of Contents plugin with TinyMCE Editor Sidebar at Left Side in ASP.NET Core

Published

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获取文本内容和设置文本内容
如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中
tinymce5设置光标到内容末尾
The Table of Contents plugin provides the following JavaScript commands.
tinymce原装插件源码分析
Tinymce富文本编辑器的改进——支持导入word
利用iframe引入自定义功能页面
jQuery 实现富文本的标题自动生成目录

富文本编辑器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原装插件源码分析

cnblogs.com/xunhanliu/t

 

 

Tinymce富文本编辑器的改进——支持导入word

juejin.cn/post/71100462

利用iframe引入自定义功能页面

developer.aliyun.com/ar

 

jQuery 实现富文本的标题自动生成二级目录

xieboke.net/article/157