富文本编辑器ckeditor使用（angular中）

1、下载ckeditor

地址：https://ckeditor.com/ckeditor-4/download/，选择合适的版本

2、将下载的压缩文件解压后放在项目相关目录下

3、在index.html中引入


<!-- 引入ckeditor -->

<script src="assets/ckeditor/ckeditor.js"></script>

4、在需要使用富文本编辑器的html文件中写

<!-- 富文本框 --><ckeditor [(ngModel)]="content"          debounce="500"          [config]="config"></ckeditor>

5、在ts文件中

content = ‘‘;

config: any = {

// 文件上传路径

/* filebrowserUploadUrl : `/api-admin/admin/public/flashUpload`,*/

// 图片上传后端url

filebrowserImageUploadUrl: `/api/cas/patent/weixin/admin/upload/ckEditorWindowUpload?id=1`, // 打开窗口上传

uploadUrl: `/api/cas/patent/weixin/admin/upload/ckEditorDropUpload?id=1`, // 拖拽上传

image_previewText: ‘ ‘,

// html5video上传url

filebrowserHtml5videoUploadUrl: `/api/cas/patent/weixin/admin/upload/ckEditorUploadVideo?id=1`,

// flash上传后端url

// filebrowserFlashUploadUrl:`/api-admin/admin/public/flashUpload`,

// audio上传url

// filebrowserAudioUploadUrl:`/api-admin/admin/public/flashUpload`,

// 其他插件,字数统计，提示信息

// extraPlugins: `widget,html5video,emojione,video,audio,

// image2,wordcount,notification,notificationaggregator`,

};

6、添加yarn add ng2-ckeditor --save

在需要调用的模块引入CKEditorModule


import { CKEditorModule } from ‘ng2-ckeditor‘;

7、富文本编辑器中相关操作依赖的文件

具体参考：https://blog.csdn.net/sinat_31986807/article/details/79667543

原文地址：https://www.cnblogs.com/boreguo/p/10558250.html

时间： 2024-10-08 23:02:55

富文本编辑器ckeditor使用（angular中）的相关文章

MVC富文本编辑器CKEditor配置CKFinder

富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin:

让富文本编辑器支持复制doc中多张图片直接粘贴上传

让富文本编辑器支持复制doc中多张图片直接粘贴上传 Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因. 好,开始尝试UMeditor,Chrome只能获得本地路径,无法读取文件. https://ueditor.baidu.com/website/umeditor.html(有兴

富文本编辑器CKEditor的使用

由于最近在架构一个pc端b/s结构的项目,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UEditor等等,但是我选择使用CKEditor的原因是它能快速引入到我的项目中去.马上附上详细步骤: (1).工具准备,下载CKEditor:http://ckeditor.com/download(我的项目下载使用的是标准版本:ckeditor_4.7.1_standard)(2).部署到自己项目

富文本编辑器CKEDITOR的使用配置(问题注解)

CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用, 准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录. 第一步:引用js, <script charset="utf-8" type="text/javascript" src="../ckeditor/ckeditor.js"></script> 第二步:放置服务器控件,<asp:TextB

富文本编辑器 CKeditor 配置使用 （带附件）

Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.getData(); //获取带HTML的值 var stemTxt=CKEDITOR.instances.TextArea1.document.getBody().getText();//获取纯文本 CKEDITOR.instances.TextArea1.setData(data.content)

百度editor富文本编辑器在火狐浏览器中的兼容性

最近做项目的时候遇到了百度的一个神器:editor富文本编辑器.但是也遇到了很多兼容性的问题,现在写一段随笔一起分享一下: 第一:在火狐浏览器中,该编辑器部分的编辑功能按钮不能显示 可以看出,在火狐浏览器中只会显示编辑框,而上面的编辑按钮缺没有.(但是在IE7,IE8上不能显示的原因在于新版本中屏蔽了 anonymous()方法,可以通过修改eWebEditor的JS文件来修正错误) 解决方案:打开火狐-->工具栏-->“工具”-->"添加附件",使用搜索功能来搜索“

富文本编辑器 CKeditor 配置使用

作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址[email protected] 联系我,非常感谢. Ckeditor下载地址:http://ckeditor.com/download 一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js script type="

KindEditor富文本编辑器， 从客户端中检测到有潜在危险的 Request.Form 值

在用富文本编辑器时经常会遇到的问题是asp.net报的”检测到有潜在危险的 Request.Form 值“一般的解法是在aspx页面   page  标签中加上 validaterequest='false'  但这样的话   既不安全 也不一定有效,好吧,说说我的解决方法吧, 就是在提交的时候不让富文本的内容提交,先是把内容编码给到一个隐藏标签,然后给富文本赋空值. 1 KindEditor.ready(function (K) { 2 Editor = K.create('#txtIntro

富文本编辑器ckeditor继承

新建一个web项目ckfinder,导入lib包 加入java包,编码格式UTF-8 在WebRoot下添加ckedtior以及ckfinder两个文件夹,将config.xml拷入WEB-INF中 修改config.xml配置文件 再修改config.js文件,文件路径指向WebRooT下的ckfinder,并可以修改工具栏显示等. web.xml中配置servlet <!-- CKEditor+CKFinder文本编辑器,being --> <servlet> <serv