简单好用的文本编辑器《Simditor》插件快速入门实例

最新推荐文章于 2024-10-10 07:43:38 发布

原创

最新推荐文章于 2024-10-10 07:43:38 发布 · 8.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#文本编辑 #插件 #Simditor

Simditor是一个简单易用的富文本编辑器，提供加粗、加斜、下划线等基本功能。在使用中发现工具栏图片存在偏移问题，通过修改simditor.css中特定属性解决了此问题。此外，还介绍了如何设置只显示图片上传的菜单和切换到英文界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需要文本编辑器，我在网上找到了Simditor这个插件，感觉简单好用，在这里记录一下，也推荐给更多的人。

Simditor能做什么

简单来说，Simditor能够将web页面中的textarea文本域变成一个简单的富文本编辑器。能够实现常用的加粗加斜下划线，标题表格字体颜色等功能，并且输出所见即所得的html代码。

Simditor如何使用

可以在Simditor的官网查看demo，文档和github下载地址。

下载最新版本的Simditor文件后解压，并且引入：

//引入css
<link rel="stylesheet" type="text/css" href="js/simditor-2.3.6/styles/simditor.css" /> 
//引入js，若不需要上传则可以不引用uploader.js文件
<script type="text/javascript"

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Creabine

关注关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

富文本编辑器simditor

weixin_42588966的博客

04-04

1156

依赖了jQuery, 而且它有自己的样式, 别忘记引入报错: Simditor.connect is not a function 这是因为版本问题, 也和jQuery有关降低simditor版本就行了我的react项目里面: simditor@2.3.6 jQuery@3.4.1 ...

SimditorDemo完整源码WEB工程.zip

03-20

SimditorDemo完整源码WEB工程.zip

6 条评论您还未登录，请先登录后发表或查看评论

Simditor的快速使用

Wing_93的博客

12-17

9100

像编辑器之类的插件，一般使用都无非三部，引入资源，开辟容器，JS调用。环境：Windows环境，Java开发，页面与接口在同一个项目中，未进行前后端隔离，服务器Tomcat 官网地址：Simditor文档第一步去官网下载地址，导入到相应目录下，若是node开发，则只需要$ npm install simditor $ bower install simditor此处笔者用的是java项目开发，

Simditor的使用

tammy_bi的专栏

05-05

8596

序其实，simditor真的是很好用的，只需要简单的配置就可以用的，只是初步接触到它的时候，不知道原理，然后内心又存在着对未知事物的“恐惧”，所以在使用的过程中还是纠结了一段时间的。编辑文章simditor的官方网址为http://simditor.tower.im/ 上面有它的一些使用帮助。但是，我在使用的过程中，发现很多问题写的不是很清晰，需要自己去摸索和实验。下载simditor 并使用首先

又一HTML编辑器Simditor

shenzhenNBA的专栏

05-08

3040

web越来越流行，对应HTML编辑器也出现butong又一HTML编辑器Simditor

Simditor的图片上传（原理 + django实现）

Preke的专栏

08-03

4391

其实本文是一篇笔记.... 首先推两篇深度好文，其实这两篇文章都讲了一部分，但是我感觉都不全面，这也是我想总结一下，写下这篇的原因，我也是看完这两篇文章之后实现，然后自己实现的。 http://blog.youkuaiyun.com/itmyhome1990/article/details/40374843 http://www.cnblogs.com/shawlang/p/4766681.ht

Simditor富文本编辑器实例分享及插件官网介绍

Simditor是一个简单而高效的富文本编辑器，它主要面向需要在网页上插入或编辑内容的用户，提供了一个便捷的方式来进行富文本的编写。富文本编辑器（Rich Text Editor）是指能够输入格式化文本的编辑器，它通常能够...

Kindeditor 富文本编辑器实例Demo

04-21

1. **富文本编辑器的基本概念**：富文本编辑器不同于简单的纯文本编辑器，它可以处理格式化的文本，包括字体、字号、颜色、对齐方式、列表、链接、图片等元素。Kindeditor作为一款富文本编辑器，提供了这些功能，...

原生js ---- ueditor富文本编辑器实例

10-17

本实例聚焦于"原生JS"实现的"ueditor"富文本编辑器，这是一款功能强大且广泛应用的开源编辑器，它以其丰富的定制性和高效的性能著称。首先，ueditor提供了两种主要的配置方式：默认的toolbar和自定义的toolbar。...

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

12-09

本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考，具体如下：首先就是在CKeditor的plugins目录下新建一个目录qchoice： qchoice目录下的结构如下：然后， images中...

simditor-fullscreen:simditor的全屏编辑扩展

06-04

simditor-fullscreen 扩展，将编辑器全屏如何使用常规加载在Simditor的基础上引用 simditor-fullscreen 的脚本 [removed][removed] 配置 new Simditor({ textarea: textareaElement, ..., toolbar: [..., 'fullscreen'] }) AMD模式加载引入require.js [removed][removed] 在require.js的入口配置 simditor-fullscreen require.config({ paths:{ jquery: 'bower_comp

Simditor富文本编辑器

05-05

很喜欢这个简单高效的富文本编辑器。也来分享给大家一个实例，希望大家用的到。插件官网：http://www.oschina.net/p/simditor 详细了解。

浅析Yii2集成富文本编辑器redactor实例教程

12-18

今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor，个人觉得Redactor比百度编辑器好用哦 Redactor有官方的Yii2插件package，实用性也是很强的。首先我们不急不躁，先进行安装Redactor。可以参考...

在react中引使用Simditor富文本编辑器

spcming的博客

10-07

399

simditor是一个依赖于JQuery富文本编辑器的模块，需要先安装jQuery之后再引入到项目中使用使用方法使用npm install simditor@2.3.6 或者yarn add simditor@2.3.6 这里推荐安装2.3.6版本，笔者在使用的时候安装最新版本会在运行时报错（如果在您的项目中没有报错可以直接安装最新版本）新建一个富文本编辑器的通用模块放入以下代码 import React, { Component } from 'react' import Simditor

Simditor：带行号的富文本编辑器教程

weixin_42400643的博客

09-12

1365

本文还有配套的精品资源，点击获取简介：Simditor 是一款功能丰富的富文本编辑器，特别适用于需要文本细致编辑与排版的场景。它具备独特的行号显示功能，极大提升了长文档和代码的追踪与管理效率。该编辑器设计易用，支持HTML标签输入和Markdown语法，利用JavaScript、HTML5和CSS3构建，保证了与现代浏览器的兼容性。开发者通过简单的配置即可启用行号显示并进...

推荐开源项目：Simditor - 简单易用的Web文本编辑器

gitblog_00042的博客

03-21

580

Simditor：一款强大的浏览器端WYSIWYG文本编辑器