开源富文本编辑器 - Jodit

与众多的产品的尿性一个样,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...
纯CSS实现tooltip的简单例子
%;}.btn:hover .showtooltip { display: block;//现实提示文本}</style></head><body> <...
书单。po文短篇小合集/睡前小甜文
po文短篇小合集20本 睡前小甜文(大部分甜1v1 主剧情3w字左右) 仅书单,无文本,上po18看 《许你十个愿望》by沈周(小故事合集主骨科,已写完4个故事,好看又好哭 ) 《安娜》by小什...
搜索引擎分词算法SEO
分词算法,在任何的搜索引擎中,都是最基础的应用。 不论是百度还是Google,都是搜索引擎,都需要对抓取内容进行分词处理。 本站使用lucene做搜索,用的是开源搜索引擎,在对一段文字进行处理的时候...
父辈的水窖,东塬人
的菜园里。衣服脏了就用手拍拍灰、太阳下晒晒继续穿,实在脏的受不了,只能辛苦自己,背一大箩衣服到石川河洗衣服,或者等着雨来。 包产到户后,农村经济搞活了,农民手里也宽裕了,先起来的部分农民率先搬出世代...
《论语》心得
公之才之美,使骄且吝,其馀不足观也已。” 子曰:“笃信好学,守死善道。危邦不入,乱邦不居。天下有道则见,无道则隐。邦有道,贫且贱焉,耻也;邦无道,且贵焉,耻也。”而君子与小人的区别,小人一直对于正道...