ckeditor

ckeditor ——在图片上传中上传其他文件(word等)

烂漫一生 提交于 2019-12-01 01:54:59
最近项目中遇到需要用富文本编辑文档,最终以公告的形式在内网中展示,其中一个简单的要求就是要有附件。因为知道ckeditor是有图片的上传了,于是想是不是也可以上传如word,pdf等附件呢。这样内网展示的时候可以直接点击下载了。基于这个想法我做了一些尝试和测试,觉得还是可以实现的。虽然在简单实现后,因为需求的调整,这个方案没有最终使用,但是我还是觉得有必要记录下来。也许以后用的到,也许也有人有这个想法而没有思路呢~~ 我的项目使用MVC模式,前端是基于bootstrap的、免费开源UI框架,ckeditor的版本是4.3.1~~~废话不多说,直接上代码吧! 以下是html的ckeditor显示代码: <div class="form-group"> <label for="" class="col-sm-2 control-label">内容</label> <div class="col-sm-10"> @Html.EditorFor(m => m.MultMsgContent, new { htmlAttributes = new { @class = "form-control", placeholder = "内容" } }) @Html.ValidationMessageFor(m => m.MultMsgContent, "", new { @class = "text

ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

醉酒当歌 提交于 2019-12-01 01:52:33
1、只粘贴图片并上传到服务器 https://ckeditor.com/cke4/addon/uploadimage config.extraPlugins = 'uploadimage' ; //config.uploadUrl = '上传路径' ; config.imageUploadUrl = '上传路径' ; 请求 文件上传的默认请求是一个文件,作为具有“ upload ”字段的表单数据。 响应:文件已成功上传 当文件成功上传时的JSON响应: uploaded - 设置为 1 。 fileName - 上传文件的名称。 url - 上传文件的URL。 响应:文件无法上传 uploaded - 设置为 0 。 error.message - 要显示给用户的错误消息。 2、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持 目前项目是用了一种变通的方式: 先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示 (富文本显示有个坑:没找到直接给富文本赋值的方法 要先销毁 记录下 success : function(data) { $('#content').attr('value',data.imagePath); var editor = CKEDITOR.instances[

ckeditor粘贴word图片且图片文件自动上传功能

被刻印的时光 ゝ 提交于 2019-12-01 01:52:24
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接受,如果图片数量比较多,这种操作就显得非常的麻烦。 1、只粘贴图片并上传到服务器 config.extraPlugins = 'uploadimage'; //config.uploadUrl = '上传路径'; config.imageUploadUrl= '上传路径'; 请求 文件上传的默认请求是一个文件,作为具有“upload”字段的表单数据。 响应:文件已成功上传 当文件成功上传时的JSON响应: uploaded- 设置为1。 fileName - 上传文件的名称。 url - 上传文件的URL。 响应:文件无法上传 uploaded- 设置为0。 error.message - 要显示给用户的错误消息。 using System; using System.Web; using System.IO; namespace WordPasterCK4 { publicpartialclassupload : System.Web.UI.Page { protectedvoid Page

ckeditor实现WORD粘贴图片自动上传

本小妞迷上赌 提交于 2019-12-01 01:52:12
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接受,如果图片数量比较多,这种操作就显得非常的麻烦。 1、只粘贴图片并上传到服务器 config.extraPlugins = 'uploadimage'; //config.uploadUrl = '上传路径'; config.imageUploadUrl= '上传路径'; 请求 文件上传的默认请求是一个文件,作为具有“upload”字段的表单数据。 响应:文件已成功上传 当文件成功上传时的JSON响应: uploaded- 设置为1。 fileName - 上传文件的名称。 url - 上传文件的URL。 响应:文件无法上传 uploaded- 设置为0。 error.message - 要显示给用户的错误消息。 using System; using System.Web; using System.IO; namespace WordPasterCK4 { publicpartialclassupload : System.Web.UI.Page { protectedvoid Page

富文本编辑器粘贴图片

家住魔仙堡 提交于 2019-12-01 01:51:09
公司做的项目需要用到粘贴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

ueditor word粘贴上传

|▌冷眼眸甩不掉的悲伤 提交于 2019-12-01 01:50:42
公司做的项目需要用到粘贴Word功能。就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中。Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧 ? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 网上找了很久,大部分都有一些不成熟的问题,皇天不负有心人终于让我找到了一个成熟的项目。 1、前端引用代码 <!DOCTYPEhtml PUBLIC "-//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> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>编辑器完整版实例-1.2.6.0</title> <scripttype="text/javascript" src="ueditor.config.js" charset="utf-8"></script> <scripttype="text/javascript" src="ueditor.all.js"

Copy & Paste custom tags in CKEDITOR 4.0

随声附和 提交于 2019-12-01 01:38:23
I have some custom tags inside my HTML. Like <mytag class="atr">text</mytag> . I want to copy this whole tag and paste the same. When i try to copy i am getting only the text, i know editor will support only valid html tags. Like copy and paste the bold,italic etc., Is there any other way to make my custom tag to copy?. Like using the DTD of CKEDITOR or htmlparser. Any suggestions.? Too long to be a comment. I'm not sure that this method will work - depends on how the copy&paste events work. I suggestion that you listen to the "paste" event and during the paste you convert the incoming

Copy & Paste custom tags in CKEDITOR 4.0

半城伤御伤魂 提交于 2019-11-30 21:03:04
问题 I have some custom tags inside my HTML. Like <mytag class="atr">text</mytag> . I want to copy this whole tag and paste the same. When i try to copy i am getting only the text, i know editor will support only valid html tags. Like copy and paste the bold,italic etc., Is there any other way to make my custom tag to copy?. Like using the DTD of CKEDITOR or htmlparser. Any suggestions.? 回答1: Too long to be a comment. I'm not sure that this method will work - depends on how the copy&paste events

How to add CSS classes and an ID to paragraphs in CKEditor?

 ̄綄美尐妖づ 提交于 2019-11-30 20:36:45
How would I add custom classes or an ID to text paragraphs in CKEditor? I would want to load the possible classes from DB and write them to whichever list they would be in as CKE is being loaded. The ID's would simply be made up on the spot. The classes and ID's would be used for things like marking a piece of text as a footnote or a caption. Just to be clear, I don't want to change the visible style the text using the dropdown boxes, I want to add CSS classes that can be used to style the element After it has been saved -depending on where it is used. Here you go. This code will number your

how to select a text range in CKEDITOR programatically?

不羁岁月 提交于 2019-11-30 20:34:17
Problem: I have a CKEditor instance in my javascript: var editor = CKEDITOR.instances["id_corpo"]; and I need to insert some text programatically, and select some text range afterwards. I already did insert text through editor.insertHtml('<h1 id="myheader">This is a foobar header</h1>'); But I need to select (highlight) the word "foobar", programatically through javascript, so that I can use selenium to work out some functional tests with my CKEditor plugins. UPDATE 1: I've also tried something like var selection = editor.getSelection(); var childs = editor.document.getElementsByTag("p");