开源富文本编辑器 - Jodit

showtooltip 2020-06-23

与众多的产品的尿性一个样,Jodit同样臭不要脸的宣城自己是最好的富文本编辑器。

Jodit使用纯TypeScript编写,不需要引入第三方文件。

当然,Jodit还是非常简洁干净,并且非常方便使用的,设计的非常前沿,也十分人性化,并且功能方面也十分的丰富。

 

你可以通过下列方式安装Jodit。

通过bower安装

bower install jodit

使用npm来安装

npm install jodit

你也可以通过CDN来引用jodit的css和js压缩文件。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.1.39/jodit.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.1.39/jodit.min.js"></script>

又或者,从GitHub上下载完整的开源项目,然后导入到自己项目中,本地引用。

<link rel="stylesheet" href="build/jodit.min.css">
<script src="build/jodit.min.js"></script>

 

引入jodit文件之后,一个简单的使用例子。

<div id="editor"></div>
<script>var editor = new Jodit('#editor');</script>

与大部分的富文本编辑器的使用方式一样,如果你使用过其他的富文本编辑器,对此应该感到熟悉。

 

Jodit通过content设置编辑器默认高度。

你可以通过如下代码,设置编辑器自动调整高度。

var editor = new Jodit('#editor');
editor.setEditorValue('<p>test</p>'.repeat(50));

 

当然,你也可以设定为固定的高度。

var editor = new Jodit('#editor', {
    height: 200
});
editor.setEditorValue('<p>test</p>'.repeat(50));

 

如果你想禁止水平或者垂直的高度调整,可以通过设置allowResizeX和allowResizeY属性来实现。

var editor = new Jodit('#editor', {
    height: 200,
    allowResizeX: false,
    allowResizeY: false
});
editor.setEditorValue('<p>test</p>'.repeat(50));

 

Jodit提供了自定义theme的功能,如果你对当前编辑器的颜色不满意,可以更换theme。

var editor = new Jodit('#editor', {
    theme: "dark"
});

 

你也可以自己创建theme。

<style>
.jodit_summer_theme .jodit_wysiwyg {
    background-color: #f0fff5;
}
.jodit_summer_theme .jodit_toolbar {
    background: #fcffda;
}
.jodit_summer_theme .jodit_toolbar svg{
    fill: #004607;
}
</style>

使用自己建立的theme

var editor = new Jodit('#summer', {
    theme: "summer"
});

 

如何使用Jodit自定义插件呢?

Jodit.plugins.pluginName = function (editor) {
    editor.events.on('afterInit', function () {
        // here you can insert your code
    });
};

在自定义的插件中使用事件,建立一个jodit.stat.js文件,内容如下。

Jodit.plugins.stat = function (editor) {
    var statusbar = document.createElement('div');
    statusbar.style.backgroundColor = '#f8f8f8';
    statusbar.style.color = '#000';
    statusbar.style.fontSize = '11px';
    statusbar.style.padding = '1px 4px';

    function calcStat() {
        var text = editor.helper.trim(editor.editor.innerText),
            wordCount = text.split(/[\s\n\r\t]+/).filter(function (value) {
                return value;
            }).length,
            charCount = text.replace(/[\s\n\r\t]+/, '').length;

        statusbar.innerText = 'Words: ' + wordCount + ' Chars: ' + charCount;
    }

    editor.events
        .on('change afterInit', editor.helper.debounce(calcStat, 100))
        .on('afterInit', function () {
            editor.container.appendChild(statusbar);
        });
};

 

最后使用自定义的插件,与之前操作类似,只不过多引入一个自己创建的插件文件。

<link rel="stylesheet" href="build/jodit.min.css">
<script src="build/jodit.min.js"></script>
<script src="plugins/jodit.stat.js"></script>
<textarea id="editor"></textarea>
var editor = new Jodit('#editor');

 

Jodit还提供toolbar中图标大小设置的功能,具体通过toolbarButtonSize来进行设置。

var editor = new Jodit('#editor', {
    toolbarButtonSize: "small"
    //toolbarButtonSize: "large"
});

还能将图标改成文字形式

var editor = new Jodit('#editor', {
    textIcons: true
});

 

更多介绍,请访问Jodit的开源项目地址:https://github.com/xdan/jodit

类似runjs的开源项目
jsbin 一块可以在线的开源web开发调试工具,是由Remy Sharp创建的一个完全开源的项目,能在线编辑和测试HTML,CSS,JS代码,项目地址https://github.com...
那些替代迅雷的开源免费下载器
意思。 FDM下载器开源无广告,界面简洁清爽,支持http下载,bt种子,磁力链接,其中HTTP下载支持多线程和断点续传。如果你已经厌烦了迅雷的各种推广,FDM值得尝试一下。 他还跨平台支持...
古典瑜伽文本: 利与弊
古典瑜伽文本: 利与弊 在我完成了克里希那玛查亚的瑜伽体式研究,我开始和上师学习古典瑜伽的文本,名为哈他瑜伽之光。接近他的课堂是不容易的。他确信学生是值得的,主题是有用的,适合学生的。我将在一节课的...
xuilei奥秘:与月入十万的做擦边球网站站长的聊天心得
病啊?” 当时看到这句话,我竟然找不到任何反驳的理由。确实,在生存这个严峻的问题面前,其余问题都得靠边站。 虽然互联网上充斥着一片形势大好的声音,总有人炫,动不动就是豪宅豪车的……但作为一个明白人...
父辈的水窖,东塬人
的菜园里。衣服脏了就用手拍拍灰、太阳下晒晒继续穿,实在脏的受不了,只能辛苦自己,背一大箩衣服到石川河洗衣服,或者等着雨来。 包产到户后,农村经济搞活了,农民手里也宽裕了,先起来的部分农民率先搬出世代...
sodasinei【翻译练习】萩原朔太郎「芥川君との交際について」
遵守社交礼节而疲累的、有着纤细神经的文明人眼中,室生君那未开化般的野性与质朴性,确是令人感到惊喜的、甚至是英雄般的性情吧。(那时的室生君较之现今要远更野性。)另一方面,室生君也为自己的野性感到羞耻...
《论语》心得
公之才之美,使骄且吝,其馀不足观也已。” 子曰:“笃信好学,守死善道。危邦不入,乱邦不居。天下有道则见,无道则隐。邦有道,贫且贱焉,耻也;邦无道,且贵焉,耻也。”而君子与小人的区别,小人一直对于正道...
阿斯汤加传承--掌门人 R.Sharath Jois(上)
,这才是真正的瑜伽士。尽管你读万卷书,学五车,若无法把这些规范实践在日常生活中,读再多书、拿再多文凭又有什么用?一点意义也没有。瑜伽练习者至少应该试着遵循正道。   你认为大多数人在练习的过程中最大...
阿斯汤加传承--掌门人 R.Sharath Jois(下)
大师,甚至是世界级的老师,但是对他来说,无论是是贫,他的心智状态始终维持一贯的平静;根据我的观察,过去两年来更是如此。这两年来他去了好几趟医院,但是他从来不曾惊慌,不曾恐惧,就连动手术时也坦然无畏。这...
搜索引擎分词算法SEO
分词算法,在任何的搜索引擎中,都是最基础的应用。 不论是百度还是Google,都是搜索引擎,都需要对抓取内容进行分词处理。 本站使用lucene做搜索,用的是开源搜索引擎,在对一段文字进行处理的时候...
免费CMS系统哪个好?草根站长选用cms建站的几个参考标准
一旦你遇到问题,能很快的找到解决方案。同时,用户数量多,也给开发者带来盈利,而开发者盈利了,便能对CMS产品持续进行维护更新,以及新版本的发布,这是一种良性的循环。 在GitHub上有许多的开源项目,但...
用Java可以做网站吗?需要掌握哪些知识?
到许多第三方的框架,比方bootstrap之类的。但不会也没关系,就那些基本的东西掌握了,网站就能做起来了!   最后是一些零碎的:比如开发工具,常用的是eclipse,最大的开源项目分享网站,是...