-
2021-12-23 11:18:28更多相关内容
-
具有用 Rust 编写的后端的现代编辑器。
2021-06-28 17:47:41席编辑(读作“Zigh”)具有用 Rust 编写的后端的现代编辑器。维护状态:xi-editor 项目目前不在积极开发中。虽然我们很乐意接受错误修复,但目前没有计划新功能。我们想在未来的某个时候再次重新编写一个文本编辑器... -
计算机后端-PHP视频教程. Linux08 vim编辑器.wmv
2022-05-22 07:34:27计算机后端-PHP视频教程. Linux08 vim编辑器.wmv -
拉丁美洲编辑器后端
2021-03-04 05:49:32拉丁美洲编辑器后端 -
微信小程序富文本编辑器插件editor微信小程序前端和图片接收后端
2020-03-13 00:15:52微信小程序富文本编辑器官方插件editor为微信小程序前端和图片接收后端,基于微信官方演示程序,去掉了多余的东西,加了一个后端接收图片的代码,直接可以使用,其他语言参照接收程序很简单。直接可以用。 -
java后端源码-codeyourcloud:在GoogleDrive和Onedrive的浏览器代码编辑器中
2021-06-05 09:19:10还有一个后端组件(还)不是开源的,用于诸如首选项和身份验证之类的事情。 发布此内容的目的是向其他人展示如何成功地与 Google Drive 和 OneDrive API 交互。 好的部分 如果您想查看所有魔法发生的地方,请查看js/... -
morphdown:后端带有 PHP 服务器的 Markdown 编辑器桌面应用程序
2021-06-26 18:45:34一个简单的 Markdown 文档编辑器,后端带有 PHP Mor ph down 是一个分支:漂亮的 GitHub Markdown 编辑器。 Morphdown 使用 PHP 呈现文件。 Markdown 内容使用进行解析。 当前不支持代码语法高亮。 Morphdown 是... -
swiftyswiftvim:Swifty Swift Vim是Vim和YouCompleteMe的语义编辑器后端
2021-05-01 09:28:28该项目的创建是为了满足文本编辑器中语义Swift支持的需求,并将Swift集成到文本编辑器中。 iCompleteMe Vim的用法 实现了Vim级的UI代码和客户端库。 前往启动并运行。 emacs-ycmd 对icmd / SwiftySwiftVim的支持... -
在富文本编辑器编辑的内容调用后端的接口保存再返回的数据带标签
2021-12-28 13:39:32在富文本编辑器编辑的内容调用后端的接口保存再返回的数据带标签场景:在前端的富文本编辑器编辑内容后,调用保存接口,保存成功后返回给前端的是带标签的文本
处理前:
处理后:
如何处理:这里的处理用到了正则
ToText(htmls) {//我这边是用到的elementui的table表格,对数组的content(保存的富文本编辑器的编辑内容)字段进行处理,所以把这个数组作为参数 for (var i = 0; i < htmls.length; i++) { console.log(htmls[i].content, 'before-------')//打印处理前的数据 let s = htmls[i].content.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ') htmls[i].content = s//处理好后重新赋值给这个数组 console.log(htmls[i].content, 'after---------') } },
亲测有效,大家快试试吧!
-
contao_dcaconfig-editor:在后端编辑 dcaconfig.php
2021-06-05 14:17:29例如,dcaconfig 编辑器适用于希望直接从后端调整配置文件 dcaconfig.php 并且不想使用“FTP-下载-编辑-上传”方法的每个人。 由于其敏感用途,dcaconfig-editor 仅供管理员使用。 使用 dcaconfig-editor,文件夹... -
GhostBacker:Ghost Blogging平台的主题,使前端看起来像后端帖子编辑器。 从Casper默认Ghost主题派生
2021-05-13 21:22:30GhostBacker 主题,使前端看起来像后端帖子编辑器。 设计版权2013 Ghost Foundation。 从Casper派生,这是默认的Ghost主题。 请访问Ghost: -
超级编辑器:Web的后端独立视觉作曲家
2021-02-06 01:42:39后端独立的网络视觉作曲家。 演示版 在此处签出演示-https: 文献资料 请参考 执照 麻省理工学院 用 :red_heart_selector: 在孟加拉国达卡的 -
百度编辑器ueditor-dev-1.5.0官方最新版gbk-php.rar
2022-01-16 21:04:16UEditor 是由百度 web 前端研发部开发所见即所得富文本web编辑器,具有轻量、可定制、注重用户体验等特点。是目前免费版最好用兼容性最好的编辑器之一,此版为官方最新版1.5.0。 -
greened-server:用于GreenEd级别编辑器的Java服务器后端
2021-05-21 08:49:38绿服务器 用于GreenEd级别编辑器的Java服务器后端。 -
富文本编辑器生成的含有图片的内容转换成word文档 java 后端下载
2022-06-22 12:31:45wangEditor 等富文本内容 (含图片: base64格式、http的网络图片等) 转换成word java后端下载 -
海龟编辑器(编程猫出品)
2022-02-26 07:37:41Python初学者专用程序 -
report-backend:用于处理报告编辑器客户端的后端API
2021-03-04 12:51:58report-backend:用于处理报告编辑器客户端的后端API -
DNSWebAdmin:用于绑定的基于Web的DNS编辑器(MySQL后端)-开源
2021-04-14 04:41:40该项目着重于易于使用的快速DNS编辑器。 它使用MySQL数据库后端来保持快速更新。 它支持绑定视图。 当我想到这里要添加的内容时,还会添加更多内容 -
eric7Python开发 编辑器源码
2022-02-04 12:40:56Eric编辑器(IDE)的安装包(源码). 解决网不好的问题. -
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2020-12-11 23:23:28项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 ... -
Neditor文本编辑器-其他
2021-06-12 07:27:49Neditor是基于Ueditor的一款现代化界面的富文本编辑器。 百度Ueditor是公认非常好用的中文富文本编辑器。但随着时间的推移,大家感觉百度编辑器并不是那么漂亮。于是我们对Ueditor进行修改,有了现在的Neditor。 ... -
vue2.0 实现富文本编辑器功能
2020-12-09 16:09:32UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery… kindEditor:功能强大,代码... -
LayEdit(layer 富文本编辑器使用,包含图片的上传)
2017-10-18 14:11:42layer 富文本编辑器layedit与form的使用,包含form提交时获取富文本的内容以及编辑器的图片上传 -
Phoenix Hospital是一个用户界面项目,在vscode编辑器中使用HTML,CSS,Javascript完成,没有后端连接
2021-03-21 19:17:18Phoenix Hospital是一个用户界面项目,它在vscode编辑器中使用HTML,CSS,Javascript完成,没有后端连接。本网站的灵感来自网站 :smiling_face_with_hearts: ...该网站是在大流行期间创建的,幻灯片放映幻灯片导航到... -
springboot 集成activiti编辑器
2022-05-27 14:51:41springboot 集成activiti编辑器 -
Django轻松使用富文本编辑器-tinymce(前端+后端)
2019-04-01 23:24:03富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息。 安装依赖包 pip install django-tinymce==2.6.0 ...在学习Django的路上艰难前行
什么是富文本编辑器
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息。
安装依赖包
pip install django-tinymce==2.6.0
- 在setting文件中注册这个app
INSTALLED_APPS = ( ... 'tinymce', )
- 在setting文件中添加编辑器配置
TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400, }
- 在项目文件的urls.py文件中配置编辑器的url路径
urlpatterns = [ ... url(r'^tinymce/', include('tinymce.urls')), ]
以上配置好后就可以开始使用了
先介绍在Admin中的使用
- 在对应项目的model.py进行创建
from tinymce.models import HTMLField class GoodsInfo(models.Model): gcontent=HTMLField()
- 生成迁移文件并执行迁移(这一步应该都知道吧)
- 在对应项目admin.py文件注册这个模型
- 启动此程序
自定义使用
-
在应用视图views.py文件
def editor(request): return render(request,'booktest/editor.html')
-
配置对应的url地址
url(r'^editor/',views.editor),
- 创建静态文件目录
- 打开py_django虚拟环境的目录,找到tinymce的目录。
/home/python/.virtualenvs/py_django/lib/python3.5/site-packages/tinymce/static/tiny_mce - 拷贝tiny_mce_src.js文件、langs文件夹以及themes文件夹拷贝到项目目录下的static/js/目录下。
- 前端代码
<html> <head> {% load staticfiles %} <title>自定义使用tinymce</title> <script src="/static/tiny_mce/tiny_mce.js"></script> <script> tinyMCE.init({ 'mode':'textareas', 'theme':'advanced', 'width':450, 'height':300 })</script> </head> <body> <form action=""> <label> <textarea name="comment_content">富文本</textarea> </label> <br> <input type="submit" value="提交评论" class="btn btn-default"> </form> </body> </html>
- 效果展示
-
富文本编辑器插件-wysiwyg.js
2019-05-14 16:13:57利用wysiwyg.js开发的一款十分强大的、jQuery富文本编辑器插件,经过优化后的富文本框,打开速度非常快,无报错,不影响其他任何功能。 -
基于百度UMeditor编辑器二次开发
2019-08-11 04:12:24基于百度UMeditor编辑器二次开发,上传图片不依赖后端配置,支持数学公式。 -
WangEditor富文本编辑器上传图片到java后端
2021-06-26 21:49:59WangEditor上传图片到java后端 新建Maven工程 1.pom.xml <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11<...WangEditor上传图片到java后端
新建Maven工程
1.pom.xml
<dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11</version> <scope>test</scope> </dependency> <!-- 省略getter与setter方法--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.6</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.0.11.RELEASE</version> </dependency> <!-- JSTL,表单标签库--> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- ServletApi--> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <!-- 文件上传要添加的依赖--> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> <!-- 把对象装换成json--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.41</version> </dependency> </dependencies>
2.springmvc.xml
<?xml version='1.0' encoding='UTF-8' ?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd"> <!-- 启动注解驱动,找到注解--> <mvc:annotation-driven></mvc:annotation-driven> <!-- 引入静态资源 mapping:将静态资源映射到指定路径下 location:本地静态资源所在的目录--> <mvc:resources mapping="/static/**" location="/static/"/> <!-- 扫描业务代码,交给ioc处理--> <context:component-scan base-package="com.xxx.controller"></context:component-scan> <!-- 配置视图解析器--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- 前缀--> <property name="prefix" value="/WEB-INF/jsp/"></property> <!-- 后缀--> <property name="suffix" value=".jsp"></property> </bean> <!-- 配置上传组件--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean> </beans>
3.spring.xml
<?xml version='1.0' encoding='UTF-8' ?> <!-- was: <?xml version="1.0" encoding="UTF-8"?> --> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd"> </beans>
4.web.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Archetype Created Web Application</display-name> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <!-- 让spring读取springmvc的配置文件--> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <!-- 拦截所有请求--> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
5.定义一个工具类
import java.util.List; //1、先建一个返回信息的封装类 @Data @AllArgsConstructor @NoArgsConstructor public class WangEditorResponse { private String errno; private List<String> data; }
6.定义handler
import com.alibaba.fastjson.JSONObject; import com.xxx.unity.WangEditorResponse; import org.apache.commons.io.FilenameUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; import java.util.Arrays; import java.util.Random; @Controller public class HelloHandler { /** * 用户上传图片 * @return */ //myFile:要与前端保持一致 @RequestMapping(value = "/uploadImg.do") @ResponseBody public Object uploadImg(@RequestParam("myFile") MultipartFile file, HttpServletRequest request) throws IOException { String path = request.getSession().getServletContext().getRealPath("static"+ File.separator+"uploadfiles"+ File.separator+"photo"); String oldFileName = file.getOriginalFilename(); String prefix = FilenameUtils.getExtension(oldFileName);//源文件后缀 String fileName = new Random().nextInt(10000000)+"."+prefix;// 文件名称 System.out.println(path + File.separator+ fileName); //value:是保存到服务器的地址 String value = request.getContextPath()+ "/static/uploadfiles/photo/"+ fileName; File dest = new File(path,fileName); try { //保存文件 file.transferTo(dest); } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } String jsonString = JSONObject.toJSONString(new WangEditorResponse("0", Arrays.asList(value))); System.out.println(jsonString); return jsonString; } }
7.index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%--不忽略el表达式--%> <%@ page isELIgnored="false" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入基本的js文件--> <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script> </head> <body> <!--填写文本--> <form method="post"> <div id="div1" style="margin-top: 40px"> </div> </form> <script type="text/javascript"> const E = window.wangEditor; const editor = new E('#div1'); // 2.隐藏插入网络图片的功能 // 设置 editor.config.showLinkImg = false 即可隐藏插入网络图片的功能,即只保留上传本地图片。 editor.config.showLinkImg = false; // 配置 server 接口地址 editor.config.uploadImgServer = '${pageContext.request.contextPath}/uploadImg.do';//与后端访问接口保持一致 //与后端接受保持一致 editor.config.uploadFileName = 'myFile'; editor.config.onchange = function (newHtml) { console.log('change 之后最新的 html', newHtml) }; editor.config.uploadImgHooks = { //配置自动插入到编辑器 customInsert: function (insertImgFn, result) { // result 即服务端返回的接口 // insertImgFn 可把图片插入到编辑器,传入图片 src ,执行函数即可 console.log(result); insertImgFn(result.data[0]) } }; editor.create(); </script> </body> </html>
8.项目结构
9.效果
收藏数
72,326
精华内容
28,930