Angular2/4 在html模板里加入<scprit>标签，引用ckeditor的办法

最新推荐文章于 2021-07-01 06:17:56 发布
最新推荐文章于 2021-07-01 06:17:56 发布
阅读量2.7k 收藏
点赞数
分类专栏： Angular2/4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andrewDengpf/article/details/74942799
版权
这篇博客介绍了如何在Angular2/4的HTML模板中保留并使用<script>标签来引入CKEditor。由于Angular的默认行为会移除<script>标签，作者通过在index.html中引入ckeditor.js，并在组件中进行相应配置，成功在Angular4项目中实现了CKEditor的集成。详细步骤包括下载CKEditor、在项目目录引用js文件以及在组件html模板中添加CKEditor配置。
摘要由CSDN通过智能技术生成

默认情况下，Angular2/4模板会移除<script></script>标签。但是有些时候我们又需要保留script标签。

这里我举一个例子，这个用例是想在angular4 中使用ckeditor。

因为我的angular用的是最新版本，而目前已有的插件却只支持到angular2，所以如果我希望使用ckeditor，就必须用在html里引用script标签这种方式。

首先我需要下载ckeditor。

参考这里的官方文档。

下载好以后解压缩到你的项目目录，这里是我的目录，可供大家参考




接下来在index.html中引用刚刚下载好的ckeditor.js


最低0.47元/天 解锁文章
AndrewDengpf
关注
专栏目录
Angular之编辑器插件
weixin_42283664的博客
06-25 1575
想插入一个编辑器在页面上么？如上图所示，还可以转html哦~是不是很酷？在自己的页面上加上这么一个编辑器，瞬间变身高大上有木有？  只需简单的几步，满足你的需求！！第一步，导入：&lt;script src="ngUeditor.js"&gt;&lt;/script&gt;第二步，引入Js文件app.directive('ngUeditor', function () { return {...
HTML中script元素
EJoft的博客
12-18 324
script元素 script元素内引入JavaScript代码 包含在<script>中的代码将会从上到下一次解释，在解释器对<script>中的代码求值完毕之前，页面中的其余内容都会不会被浏览器加载或显示 <script> function sayScript() { // wrong alert("</script>") ...
angular2 绑定html代码到标签
weixin_33716941的博客
06-02 350
[innerHtml]属性 <div [innerHtml]="item.content"></div>
angular2 html转义,Angular2：组件输入中的转义字符(Angular2: Escape character in component's input)...
weixin_39646695的博客
07-01 557
Angular2：组件输入中的转义字符(Angular2: Escape character in component's input)我有以下代码：我已经尝试了许多东西( '' ， \' ， \\' ， \'' ，......)以逃避' in，但我没有设法做到这一点。 我怎样才能做到这一点 ？I have the following code :I have tried many things ...
Angular2 - [innerHTML] && pipe(把字符串里的 /n 替换成 ＜br/＞)
若末lan的博客
05-31 467
/** * Created by Echo_hx on 2021/05. * 把字符串里的 /n 替换成 <br/> */ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'hDataBr'}) export class DataBrPipe implements PipeTransform { transform(value: any) { return value.repla...
ng2-ckeditor：Angular2 CKEditor组件
01-31
Angular-CKEditor组件 在Angular应用程序中使用所见即所得。 安装 在您的应用程序中包括CKEditor javascript文件： [removed][removed] 安装ng2-ckeditor JSPM： jspm install npm:ng2-ckeditor NPM： npm ...
SpringBoot与Angular2的集成示例
08-27
- 使用`<resource>`标签添加`src/main/angular/dist`目录，设置`targetPath`为`static`，这样编译后的Angular文件会在打包时被复制到正确的路径。 - 使用`exec-maven-plugin`插件执行`npm run release`命令，这会...
详解Angular.js数据绑定时自动转义html标签及内容
10-20
在Angular.js中，数据绑定是框架的核心特性之一，它允许开发者轻松地将应用程序的数据与视图进行同步。然而，为了防止XSS（跨站脚本）攻击，AngularJS默认会自动转义HTML标签，这意味着在数据绑定时，任何HTML代码...
angular4+bootstrap4 admin模板
10-24
angular4+bootstrap4代码， <p> Support for my items includes: </p> <ul> <li><a> Responding to questions or problems regarding the item and its features </a></li> <li><a> Fixing bugs and ...
Angularjs标签模板加载原理
飞鸟Blog
09-09 4691
前言 Angularjs提供多种模板加载方案。 最基础的为通过预先声明路径的方式，通过Ajax获取。使用诸如gulp-html2js构建工具，将HTML模板转化为js文件使用。使用script标签引入。 一般实际情况下，开发时使用第一种方式，部署时采取第二种方式，不会采用第三种方式。本文简要说明一下标签引入模板。Angularjs本身支持的标签type为text/ng-templ
【Angular2】简易版富文本编辑器
学习 - 总结 - 分享 - Francis
09-21 2553
前言因为项目中需要用户输入一些内容，比如一段话什么的，这时候需要把用户的格式记录下来，再次显示的时候可以显示原来的排版开始想就是引用第三方的组件，比如primeNG的https://www.primefaces.org/primeng/#/，但是折腾了一晚上总是引入失败，然后分析了一下，这次需求里面的格式无非就是 空格 和 回车，其它的样式也不需要，直接采用默认就好那么，就自己做一个简易版本的吧，造
Angular5 引入TinyMCE富文本编辑器
WXF_Angular的博客
02-28 3269
1.下载TinyMCE 富文本编辑器        npm install --save tinymce       默认安装稳定版2.引入js 把下载到node_modules\tinymce 下的源码复制到 assets文件夹下，再如下操作3. 在在项目中的typing.d.ts中声明tinymce全局变量，不然会提示找不到tinymce4.在component.ts中 加入如下代码 edit...
JavaScprit基础重要1
专注=成功
03-01 924
一：javaScript可以出现的地方 JavaScript  可以出现在  HTML  的任意地方。使用标记  …，你可以在  HTML  文档的任意地方插入  JavaScript，甚至  在之前插入也不成问题。不过如果要在声明框架的网页（框架网页）中插  入，就一定要在之前插入，否则不会运行。  二：javaScprit的特殊用法 如果想在浏览器的“地址”栏中执行  Java...
JavaScprit刷新8种方法
冬眠FF的博客
12-05 2103
测试： chrome，火狐浏览器，360浏览器，IE9测试说明：火狐浏览器，IE9点击《刷新》，input的内容都不会清空<html> <body> <input type="button" value="1" onclick="refresh1()"> <input type="button" value="2" onclick="refresh2()"> <input type="button"
学习javascprit有感
u010205994的专栏
07-21 720
今天学习了javascprit，因为html和js以前没有接触过，而C#的基础知识有一些了解，所以就从这两个开始着手了。掌握了再去对C#查漏补缺，看看还有哪些知识点没有理解透彻。html是js的基础，先学习html在学习js就不会那么吃力了，看来老师安排得还是合理的。 js和C#有相同之处，不过C#是面向对象的，而js是基于对象的。javascript是是一种解释性语言，不需要编译，即使有语法错
在HTML中使用angularJS
weixin_43955724的博客
10-20 1531
angularJS各个版本之间差别很大，尽管核心思想是一样的，都是基于数据双向绑定，模块化等思想，但有些部分甚至写法都完全不同，博主一开始学的就是angularJS1.x，所以使用的都是angularJS1.x。 在项目中使用angularJS1.x，首先需要引入几个js文件，jquery的包是必须的，此外下图为项目中我所引入的js： 具体就不赘述了，这块看不懂的话可能需要去搜一下黑马的pyg视...
在HTML中引入angular,Angular8引入layUI的方法
weixin_29149259的博客
06-15 473
最近项目需要引入layui，这里记录下引入遇到的问题。Angular引入layUI有两种方式，一种是在angular.json中的scripts和styles中分别引入layui.js和layer.css文件。一种是直接在index.html页面中，通过link和script标签引入。首先layui放在assets目录下：第一种引入方式：项目运行会报错登录页面我用到了layer弹窗，报这个错，后面...
anjulars实现html追加,使用AngularJS来实现HTML页面嵌套的方法
weixin_39775029的博客
05-31 296
HTML不支持嵌入在HTML页面中的HTML页面。实现这一功能通过使用以下方式：使用Ajax - 让一台服务器来调用获取相应的HTML页面，并将其设置在HTML控件的innerHTML。使用服务器端包含 - JSP，PHP等Web端服务器技术可以在包括动态页面中的HTML页面。使用AngularJS，我们可以用ng-include指令在一个HTML页面嵌入另一个HTML页面。例子tryAngula...
angular.js 中 <div><span>文本</span></div> 如何修改span 标签里文本的内容
最新发布
05-31
在 AngularJS 中，你可以使用数据绑定的方式来修改 span 标签里的文本内容。具体来说，你可以使用 AngularJS 的指令 `ng-bind` 或者双括号语法 `{{ }}` 来实现。 举个例子，如果你有一个变量 `text`，你可以这样写...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值