富文本编辑器

vue+springboot图片上传和显示

由 南楼画角 提交于 2020-02-25 22:07:15
一、前言 在使用spring boot做后台系统，vue做前端系统，给客户开发一套系统时候，其中用到了图片上传和显示的功能。 二、环境 前端：vue 前端组件：tinymce 后台：spring boot:2.2.3 三、正文 在客户开发一套门户管理系统时，集成了tinymce组件，用于编辑内容，springboot不同于其他项目。 是集成tomcat的，文件和图片是不能直接访问的。所以我在做集成富文本编辑器时，需要处理图片的问题。 这个问题跟上传头像等显示图片的功能是类似的。下面记录详情步骤代码。 第一步：集成tinymce组件 <!--引入tinymce组件--> import Tinymce from '@/components/Tinymce' <!--启用tinymce组件--> <el-form-item> <el-button type="primary" :loading="btnLoading" @click="onSubmit" >保 存</el-button> </el-form-item> <!--核心代码--> <template> <div class="page-container"> <div class="page-title-section"> </div> <div class="page-content-section"> <div

vue-cli -- Tinymce富文本编辑器挖坑

由 邮差的信 提交于 2019-12-18 18:37:18
官方文档 参考文献 一、安装Tinymce // 首先安装tinymce的vue组件，因为没有注册服务 npm install @tinymce/tinymce-vue -S // 接着安装tinymce npm install tinymce -S 或者在package.json文件中配置 "@tinymce/tinymce-vue": "^2.0.0", "tinymce": "^5.0.3", 二、安装语言包 正常情况下，tinymce是英文的，所以需要下载中文包 中文语言包下载 三、配置文件 将下好的中文包和tinymce中的skins文件一起拷贝复制到public中的tinymce中 四、引入tinymce 在使用页面引入tinymce import tinymce from 'tinymce/tinymce' import Editor from '@tinymce/tinymce-vue' import 'tinymce/themes/silver' Tips 这是个组件，需要在components中注册后才能使用 <editor id="tinymce" v-model="tinyValue" :init="init"></editor> init 初始化配置 init: { language_url: '/tinymce/langs/zh_CN.js',//

富文本编辑器word

由 爱⌒轻易说出口 提交于 2019-12-05 16:48:42
tinymce 是很优秀的一款富文本编辑器，可以去官网下载。 https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。 http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/ 以vue为例说明： 将tinymce下载后放到static目录下，不用npm安装。 powerpaste 放到\static\tinymce\plugins目录下 在index.html中引入tinymce.min.js。 代码参数配置如图： 将plugins参数里的paste替换成powerpaste，完工。 最后效果，能够自动批量上传word中的所有图片 图片上传完后，编辑器里面的图片地址也全部都改成了服务器的图片地址了， 来源： https://www.cnblogs.com/songsu/p/11934500.html

KindEditor的安装和使用

由 无人久伴 提交于 2019-12-05 05:53:23
KindEditor的安装和使用 因为想要做一个可以发表格式化文章的网站，所以我需要一个网页版的所见即所得的文本编辑器。而KindEditor就是这么一个开源的文本编辑器。 这篇文章也是我大概接触了KindEditor并用它做了一点点东西后总结出来的一点心得，当然，想要全面的介绍，或详细的文档，还是要去官方吧（http://kindeditor.net/）。因为是国产软件（应该是国产的吧？），所以官网是中文的，蛮好的。 貌似Google一下KindEditor，则可以找到各种语言的安装方法，Java也好PHP也好很多的。所以我不想介绍特定语言的安装方法，因为我觉得KindEditor只是个前端的文本编辑器，为什么要和后台所用的语言扯上关系呢？例如Java语言的安装会告诉你把这几个jar包装好，你要不用Java，这种安装方法毫无意义。比如我做KindEditor的时候用的就是Ruby on Rails，翻了翻好像没有特别针对Ruby on Rails的安装方法。 于是就写一个通用安装方法吧，只要是Web项目都可以这么搞。 KindEditor的编辑区是以一个textarea为原型，因此，最后变成html应该大概是个这样子。 <textarea id="editor_id" name="content" style="width:700px;height:300px;"> 内容 <

富文本编辑器复制粘贴word

由 断了今生、忘了曾经 提交于 2019-12-05 04:48:30
tinymce 是很优秀的一款富文本编辑器，可以去官网下载。 https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。 http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/ 以vue为例说明： 将tinymce下载后放到static目录下，不用npm安装。 powerpaste 放到\static\tinymce\plugins目录下 在index.html中引入tinymce.min.js。 代码参数配置如图： 将plugins参数里的paste替换成powerpaste，完工。 最后效果，能够自动批量上传word中的所有图片 图片上传完后，编辑器里面的图片地址也全部都改成了服务器的图片地址了， 来源： https://www.cnblogs.com/songsu/p/11907196.html

tinymce粘贴word

由 北城余情 提交于 2019-12-04 07:11:58
公司做的项目需要用到粘贴Word功能。就是将word内容一键粘贴到网页编辑器（在线富文本编辑器）中。Chrome+IE默认支持粘贴剪切板中的图片，但是我要粘贴的文章存在word里面，图片多达数十张，我总不能一张一张复制吧 ？ 我希望打开文档doc直接复制粘贴到富文本编辑器，直接发布 网上找了很久，大部分都有一些不成熟的问题，皇天不负有心人终于让我找到了一个成熟的项目。 1、前台页面引用代码 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx.cs"Inherits="CKEditor353.index" %> <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>WordPaster For CKEditor-3.x</title> <linktype="text/css"rel="Stylesheet"href="WordPaster/css/WordPaster.css"/> <linktype="text

Vue 自定义富文本编辑器 tinymce 支持导入 word 模板

由 回眸只為那壹抹淺笑 提交于 2019-12-04 06:31:30
自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目 前端 前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: tinymce 前端采用的 vue.js 至于Vue 中怎么集成 tinymce 编辑器参考: https://segmentfault.com/a/1190000012791569 其中关键代码在项目中的 index.vue < template > < div > < Row > < Col span = " 18 " offset = " 3 " > < Card shadow > < Upload action = " http://localhost:2020/upload/word/template " :on-success = " handleSuccess " > < Button icon = " ios-cloud-upload-outline " > 上传模板 </ Button > </ Upload > < Form ref = " editorModel " :model = " editorModel " :rules = " editorRules " > < FormItem prop = " content " > < textarea class

Django-tinymce富文本的使用

由 白昼怎懂夜的黑 提交于 2019-12-04 01:10:34
1、安装tinymce pip install tinymce 2、在settings中进行设置 INSTALLED_APPS 中添加 'tinymce', # 富文本编辑器 3、在最下面添加 # 富文本编辑器 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400, } 4、在urls.py中配置 url(r'^tinymce/', include('tinymce.urls')), 5、新建类 class GoodTest(models.Model): '''测试模型类''' STATUS_CHOICES = ( (0, '下架'), (1, '下架') ) status = models.SmallIntegerField(default=1, choices=STATUS_CHOICES, verbose_name='商品状态') detail = HTMLField(verbose_name='商品详情') class Meta: db_table = 'df_goods_test' verbose_name = '商品' verbose_name_plural = verbose_name6、注册类 from booktest.models import

Vue之富文本tinymce爬坑录

由 匿名 (未验证) 提交于 2019-12-03 00:10:02
前言 最近因业务需求在项目中嵌入了 tinymce 这个富文本编辑器，用于满足平台给用户编辑各类新闻内容什么的业务需求，前后也花了不少时间体验和对比了市面上各类开源编辑器。 *案例demo版本： vue-tinymce-demo 在线预览： vue-tinymce-demo.netlify.com/#/ 各大WYSIWYG编辑器的简单比较 1、UEditor 因为已经不再维护了，需要大量修改源码，很多都是专门为jsp等服务器渲染项目写的代码需要删除， 然后越删越害怕越删越不敢用，依赖 jquery ，需要专门用js去parse编辑完成的内容，parse完的内容还可能污染全局css，兼容老浏览器还不错， 但是，我们不怎么考虑兼容IE。所以，告辞。 2、wangEditor 中文文档，上手快，依赖 jquery ，功能少点要花时间去写插件，需要单独为图片上传功能写个接口，老项目忙着上线临时用过，感觉并不适合当前业务这么重的编辑功能于是放弃了。 3、Quill api友好, 功能少，需要特定的css去解析文本（这点我不大喜欢），ui好看，适合作为论坛回帖功能使用。 4、CKEditor CKEditor目前主流的还是 4.x 的版本，但是文档看着很瞎眼实在是提不起兴致去配置，草草用了下就放弃了， 5.x 版本刚从beta结束，需要指定专门的node以及npm版本

Vue之富文本tinymce爬坑录

由 故事扮演 提交于 2019-11-30 05:23:16
前言 最近因业务需求在项目中嵌入了 tinymce 这个富文本编辑器，用于满足平台给用户编辑各类新闻内容什么的业务需求，前后也花了不少时间体验和对比了市面上各类开源编辑器。 *案例demo版本： vue-tinymce-demo 在线预览： vue-tinymce-demo.netlify.com/#/ 各大WYSIWYG编辑器的简单比较 1、UEditor 因为已经不再维护了，需要大量修改源码，很多都是专门为jsp等服务器渲染项目写的代码需要删除， 然后越删越害怕越删越不敢用，依赖 jquery ，需要专门用js去parse编辑完成的内容，parse完的内容还可能污染全局css，兼容老浏览器还不错， 但是，我们不怎么考虑兼容IE。所以，告辞。 2、wangEditor 中文文档，上手快，依赖 jquery ，功能少点要花时间去写插件，需要单独为图片上传功能写个接口，老项目忙着上线临时用过，感觉并不适合当前业务这么重的编辑功能于是放弃了。 3、Quill api友好, 功能少，需要特定的css去解析文本（这点我不大喜欢），ui好看，适合作为论坛回帖功能使用。 4、CKEditor CKEditor目前主流的还是 4.x 的版本，但是文档看着很瞎眼实在是提不起兴致去配置，草草用了下就放弃了， 5.x 版本刚从beta结束，需要指定专门的node以及npm版本
订阅 富文本编辑器