在羽毛笔编辑器中添加字体Angular 2+
+，可以通过以下步骤完成：
- 首先，确保你已经安装了Angular CLI（命令行界面）。如果没有安装，可以通过以下命令进行安装：
- 首先，确保你已经安装了Angular CLI（命令行界面）。如果没有安装，可以通过以下命令进行安装：
- 创建一个新的Angular项目。在命令行中运行以下命令：
- 创建一个新的Angular项目。在命令行中运行以下命令：
- 进入项目目录：
- 进入项目目录：
- 安装所需的字体库。你可以从字体库的官方网站或其他来源下载所需的字体文件，并将它们放置在项目的
assets/fonts目录下。 - 在
angular.json文件中配置字体文件的路径。在assets数组中添加以下代码： - 在
angular.json文件中配置字体文件的路径。在assets数组中添加以下代码： - 在你的组件中使用字体。在需要使用自定义字体的组件的CSS文件中，添加以下代码：
- 在你的组件中使用字体。在需要使用自定义字体的组件的CSS文件中，添加以下代码：
- 请确保将
YourFontName替换为你的字体名称，将YourFontFile.ttf替换为你的字体文件名。 - 运行Angular应用程序。在命令行中运行以下命令：
- 运行Angular应用程序。在命令行中运行以下命令：
- 这将启动开发服务器，并在浏览器中显示你的应用程序。你应该能够看到使用了自定义字体的元素。
请注意，以上步骤是基于Angular 2+的开发过程。在实际开发中，你可能还需要考虑字体的版权问题和浏览器兼容性等因素。此外，腾讯云并没有直接相关的产品或链接地址与此问题相关。
相关·内容
1回答
我已经在angular中实现了一个羽毛笔编辑器。它可以设置文本消息的样式，添加图像和视频链接，等等，现在工作得很好。根据要求，我可能想要添加这样的数学公式连同上述功能。有没有人能给我推荐一个在angular中执行这个动作的编辑器？
浏览 27提问于2021-06-10得票数 0
1回答
我正在使用带有羽毛笔编辑器的Angular 7。用例:我有羽毛笔编辑器，需要在双击任何按钮时追加一些文本，获得双击的值，但不能获得羽毛笔编辑器内的光标位置。
我尝试了(onContentChanged)，(onEditorCreated)和(onSelectionChanged)，也尝试了onFocus，因为我必须在一个模板中使用多个羽毛笔编辑器。
只需要在焦点编辑器上追加文本，但仅在光标位置上追加文本。
以下是我的代码示例
<quill-editor #editor [maxLength]="maxLength"
[minLength]="m
浏览 162提问于2019-11-27得票数 2
回答已采纳
我正在开发一个电子邮件模板制作工具，为此，我使用了Quill编辑器和Angular框架。
我想知道如何发送电子邮件模板。我可以用羽毛笔编辑器做一个电子邮件模板。但是，我猜gmail不能很好地显示我的电子邮件模板。因为它的风格是在羽毛笔类中没有内联风格。
如果你有什么想法，请告诉我。
浏览 0提问于2017-11-02得票数 0
1回答
我在angular中使用羽毛笔编辑器，我无法在angular 2+中添加多种字体，我正在使用以下代码片段 QuillModule.forRoot({
modules: {
toolbar: [
['blockquote', 'code-block'],
// [{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list':
浏览 10提问于2020-12-19得票数 1
我想使用羽毛笔表情与ng羽毛笔自动转换文本到笑脸(如facebook或asana) :)：:'( <3和更多
我试着安装它，但似乎不起作用
你能告诉我用angular js quill做这件事的正确方法吗？
谢谢，提前说
浏览 8提问于2018-05-09得票数 0
无法使用angular flex布局设置ngx-quill编辑器的高度。
编辑器的高度(灰色边框)溢出了父div (红色背景)。
如何确保编辑器留在父div中？
浏览 18提问于2019-03-08得票数 1
我正在使用带有ngx-quill NPM包的Quill编辑器。一切都运行得很好，除了我不能触发(模糊)事件。
现在，我让它在编辑器中的每个文本更改时触发。这是控制器
ngOnInit() {
this.adminForm.controls['content'].valueChanges.subscribe(data => {
console.log('Changed Values', data);
});
}
下面是HTML：
<quill-editor (change)="validateChange(field)"
浏览 1提问于2017-11-15得票数 2
我最近发现了Quill文本编辑器，因为我正在使用php和javascript中的新东西，所以我决定在我的应用程序中使用它，而不是所见即所得。
不过，Quill文档确实是极简主义的。如何添加允许用户显示和编辑当前html的按钮？
我是否必须扩展羽毛笔并制作自己的羽毛笔？
浏览 6提问于2016-06-28得票数 12
回答已采纳
我正在尝试集成JHispter生成的angular应用程序中的PrimeNG editor。
我关注了和的PrimeNG站点
npm install primeng --savenpm install @angular/animations --savenpm install quill --saveAdd在html fileexecuted EditorModule命令中的home.modulesAdded <p-editor [(ngModel)]="text" [style]="{'height':'320px'}"&
浏览 58提问于2018-01-14得票数 2
1回答
当我在Angular 7.X项目中使用Ace editor时，我不能使用代码片段和自动编译。
当我尝试配置自动编译时：
this.editor.getEditor().setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
});
我在控制台得到一个警告：
misspelled option "enableBasicAutocompletion"
misspelled option "enable
浏览 0提问于2019-03-08得票数 0
我刚接触angular并在我的angular应用程序中使用羽毛笔编辑器，我正在使用它来允许用户编写HTML代码并渲染来自后端的HTML代码，我在单独的div中预览HTML，但不幸的是羽毛笔编辑器不能在编辑器中渲染任何HTML代码或任何文本。此字段为空，控制台出现Cannot convert undefined or null to object错误。任何形式的帮助都将不胜感激。谢谢 public aboutOptions = { placeholder: "Enter About Text...", modules: false, theme: 'snow'
浏览 102提问于2020-07-17得票数 2
我在我的angular组件中使用了富html编辑器Quill。我的问题是如何设置编辑区域的高度。 我使用的是angular-7，bootstrap和font- and (都是最新的) 我在文档中找不到任何与此相关的内容。 谢谢 约翰 下面是我的表单和该表单的示例 <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
<div class="form-group">
<
浏览 17提问于2019-04-07得票数 0
回答已采纳
我正在使用quill.js在我的project.Hitherto中创建一个编辑器，我已经成功地将羽毛笔与我的web项目集成。现在我想做的是创建一个自定义的下拉列表在羽毛笔toolbar.The下拉列表将有以下选项1)电子邮件2)简单的会议描述当电子邮件选项被选中时，编辑器加载一个电子邮件模板等。谁能帮助我实现这一点...
下面是我的代码
var toolbarOptions=
[
['bold','italic','underline','strike'],
['blo
浏览 43提问于2017-01-17得票数 1
var app = angular.module('app', []);
app.controller('TheCtrl', ['$scope', function (scope) {
scope.user = {
name: "木士羽",
email: 'fdaf@qfdsafq.com',
};
scope.$watch('user.name', function () {
console.log('c
浏览 5提问于2015-04-12得票数 2
回答已采纳
我在angularjs中使用过ng-bind，如下所示
<div ng-bind="getVal()"></div>
其中getVal()返回一些值，它在控制器中。但是在Angular2中，我在组件中有一个函数getVal()，我需要像angular1一样从模板中调用它。
我试过了
<div [(ngModel)]="getVal()"></div>
但不走运，你知道吗？
浏览 3提问于2016-01-14得票数 41
回答已采纳
我正面临着一个奇怪的问题。我在一个angular2项目中使用来自谷歌的字体，在styles.scss中使用@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700');。我在froala编辑器中使用了一个段落的font-family。当我在dev工具中检查段落的字体系列时，它显示它使用了正确的字体系列。然而，字体显然不是我使用的字体，因为它看起来完全不同。我尝试下载该文件并定义一个新的@font-face，但也不起作用。我不确定如何解决/调试这个问题。
@import ur
浏览 10提问于2017-08-27得票数 0
我在让JsNlog使用Angular 2(最新的完整版本)时遇到了问题。我通过npm将JsNlog安装到我的项目中( Visual Studio2015中的空客户端web应用程序)，然后在一个服务中设置它，但在尝试使用其中一种方法时，我得到了错误"XHR error (403 Forbidden) loading“。有人能告诉我我哪里做错了吗？
代码如下：
我的服务：
import { Injectable, Component } from '@angular/core';
import JL from 'jsnlog';
@Injectable()
浏览 1提问于2016-11-15得票数 3
我刚开始使用1.0，并且想要使用不同的字体。我目前正在使用
quill.format(range_start, range_end, 'font', 'serif');
但它不起作用。我查看了文档，这似乎是您应该做的事情(不使用工具栏时)。我尝试过使用各种其他格式，它们都工作得很好，只是无法更改字体并在导出时显示为属性。(需要它在对象中，而不仅仅是出现在用户面前。)如果任何人有任何关于使用不同字体和羽毛笔的指示，请与我联系。
在进阶时谢谢！
浏览 0提问于2016-06-17得票数 0
我在一个javascript应用程序中使用了羽毛笔文本编辑器，我需要将文本编辑器的内容作为包含HTML的字符串进行检索，但是文档中关于这个主题的内容有点稀疏。
浏览 11提问于2017-03-02得票数 30
回答已采纳
我的任务是向我们的文本编辑器实现一个提及功能。我使用的是基于羽毛笔的PrimeNg编辑器。我找到了包，它似乎可以帮助解决这个问题。我不确定如何在primeng编辑器组件中配置它。我看到有一个getQuill()函数可能会有帮助，但我不确定是如何做到的。谢谢!
我可以实际使用这个模块，并将它传递给用户等等，它更多的是允许我的编辑器使用它。
浏览 27提问于2021-02-27得票数 0
2回答
我一直在尝试集成我的反应应用程序与quill，以提供一个文本输入区域。我以前从来没有用过羽毛笔，所以我不确定我是否需要在原来的基础上换一个单独的手柄。我能够从django后端获取数据，但是我无法编辑和更新在quill框中所做的任何更改。
是否有正确的方法来应对毛刺的变化？
我一直被困在这件事上，我不知道该如何前进。
下面是我的代码和json数据。我只想要描述字段是包含在羽毛笔区域。
import React, { useContext, useState } from 'react';
import ReactQuill from 'react-quill';
浏览 17提问于2020-04-02得票数 3
回答已采纳
我想把它嵌入到材料标签中。我想要编辑器支持字体颜色特性，所以我从以下链接构建ckeditor：
然后通过以下命令安装CKEditor 5 WYSIWYG编辑器组件：
npm install --save @ckeditor/ckeditor5-angular
根据下面中的说明，我将ckeditor.js和相应的翻译文件复制到src目录中，并将其导入到组件文件中；然后修改tsconfig.json。
但是，编辑器没有显示。
如何配置编辑器，使其能够支持字体颜色功能？
这是。
浏览 2提问于2020-03-16得票数 0
我使用的是带有angular 4的羽毛笔富编辑器。每当我添加一个链接时，它就会被添加到_target =“空白”，这使得它在一个新的标签中打开。我想在同一个标签中打开它。提前谢谢。
浏览 1提问于2018-08-22得票数 2
回答已采纳
抱歉，正如我提到的那样。我是angular 6的新手。我看过这个链接，当我在angular 6中尝试这样做的时候，我卡在了中间，因为他们说"Add dependency to timeline your angular ：ngTimeline“，这意味着是哪一个？
我安装了angular-timelinejs3。添加css和javascript到index.html.When我放置指令:在app.component.html.And中我如何导入角度的ng-timeline js3我得到了error.Template解析error.can任何人请在这方面帮助我？
In Index.
浏览 5提问于2018-07-30得票数 0
从Angular 9.x升级到Angular 10.x，使用ngx-quill的component quill-editor的所有组件规格都无法加载。 这是由标准角度测试产生的： it('should create', () => {
expect(component).toBeTruthy();
}); 这是它们产生的错误消息： FAIL my-project src/(...)/my-component.spec.ts
● Test suite failed to run
Call retries were ex
浏览 91提问于2020-12-18得票数 2
我尝试了几种方法使笔更好的表工作，但没有成功，大部分的例子没有角，我得到一个错误，说“不能读取属性'insertTable‘的未定义”，我将包括我的代码和错误下面，请帮助我。注意:这是指在生产中使用的应用程序。
这是我的HTML代码：
<div class="card">
<div ibmGrid>
<div ibmRow>
<div ibmCol>
<button ibmButton="secondary" size="sm" (click)=
浏览 5提问于2021-01-07得票数 0
我正在开发一个Angular 6应用程序。我开始用一个简单的datepicker创建一个组件。我不得不使用这个插件：
即使我在"angular.json“文件中放入了正确的依赖项.css和.js ( css可以很好地工作；以下是脚本.js)：
"scripts": [
"src/jquery/jquery-3.1.1.min.js",
"src/bootstrap/js/bootstrap.min.js",
"src/bootstrap-datet
浏览 0提问于2018-10-05得票数 0
我是Angular的新手，我的任务是将AngularJs转换为Angular 8。
谁能告诉我什么是ng-scope，ng-pristine，ng-form-valid...？在Angular 8中，它的等价物是什么？
浏览 8提问于2019-11-25得票数 0
回答已采纳
在我的角项目中，我将自定义字体存储在src/assets/ fonts /*中。
我在我的styles.scss文件中引用这些字体如下：
@font-face {
font-family: 'museo_sans_package';
src: url('assets/fonts/MuseoSans_100-webfont.eot');
...
当使用角CLI进行生产生成时，我的字体目录及其中的所有字体文件将正确地复制到my ./dist目录中：
./dist/资产/字体/*
然而，我的所有字体文件也会被复制到我的/dist目录的根目录中，导致我的
浏览 14提问于2017-06-07得票数 13
回答已采纳
我正在使用羽毛笔编辑器，它的工作良好，但问题是，当粘贴的文本，其中包括图像，它也粘贴在文本区域，我不想要。我怎么能让它失效？我尝试了在下面的链接上提供的格式选项，但没有用。下面是html
<quill-editor #textArea [placeholder]="attribute.name"
[formControl]="specsForm.controls[attribute.id].controls.value" [required]="attribute.isRequired"
[r
浏览 2提问于2020-08-28得票数 0
我一直想知道在Angular2中使用SVG图标的最佳实践是什么。我看到目前主要有两种方法:1.将SVG转换为字体。2.在组件中内联SVG XML。
我们开始使用ICOMOON的字体方法，但我们的问题是我们有多色图标，然后我们应该只为这些图标创建组件(对于其他图标，我们在SPAN/DIV上使用CSS属性)
内联SVG方法的问题是代码有点乱(我的模板中有XML属性)
我们还有其他方法可以使用吗？
浏览 0提问于2017-02-08得票数 4
2回答
我正在尝试运行Angular的ui网格，并使用以下代码：
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {RouterModule} from "@angular/router";
import {BosOverviewComponent} from "./bosoverview.component";
import {UiGridModule} from '
浏览 4提问于2017-06-13得票数 3
我正在使用羽毛笔编辑器，当我在羽毛笔编辑器中添加表情符号时，此代码进入编辑器，您可以看到以下屏幕排序 ? 但是当我从羽毛笔编辑器中删除表情符号时，表情符号会被删除，但表情符号代码并没有从羽毛笔中删除 ? 如何解决此问题？
浏览 45提问于2021-02-06得票数 1
回答已采纳
1回答
作为标题，我需要为我闪亮的应用程序全局增加MathJax的字体大小。我按照的答案中写的那样尝试了，所以我把
tags$head(
tags$style(
HTML(
".MathJax {
font-size: 2em;
}"
)
)
)
在我的ui的fluidPage中，但这似乎不起作用。
我认为我也可以为每段MathJax代码编写\\large{...}，但我的应用程序有很多公式，这将非常昂贵。有什么想法吗？
浏览 0提问于2020-08-20得票数 0
我正在做一个应用程序，并使用Angular/ionic，我试图放置Facebook提供商，但我得到了这个错误： Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [..., ..., ..., ?[object Object]? 我的app.module： import { NgModule } from '@angular/core';
import { BrowserModule } fro
浏览 7提问于2020-08-24得票数 1
2回答
我在我的项目中使用foundation.min.css。每次我在HTML文件中加载上述内容时，我的浏览器都会尝试在线获取字体。但奇怪的是，即使没有互联网接入，它也能发挥作用。
我需要知道：
如何使基础无法在线获取字体？
为什么即使加载了功能也没有改变？
如何在不损害原始文件的情况下编辑它以删除联机获取功能？foundation.min.css代码：
@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
H
浏览 2提问于2014-01-02得票数 0
回答已采纳
1回答
我已经按照入门安装了材料设计，但在尝试复制布局容器API参考底部的“响应式布局”示例时，我注意到了一些问题
在我的实现中，布局属性显然不起作用(1446x150的屏幕分辨率)：
当我在index.html中指定Roboto字体时，它显然没有被使用。
我希望我错过了一些显而易见的东西，因为如果认为这样一个简单的例子是不可复制的，那将是非常令人失望的。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8
浏览 6提问于2017-12-23得票数 2
回答已采纳
我使用作为我的网站的文本编辑器，其中一个网站选项是创建动态文本编辑器，定义羽毛笔编辑器的函数如下所示：
function quillDefine(quillID) //quillID is the id of the div that I'm going to define as quill element
{
var toolbarOptions =
[
['bold', 'italic', 'underline', 'strike'],
[
浏览 90提问于2017-01-16得票数 2
我是symfony2和教条的新手。下面是I所看到的问题。我不能用：
$repository = $this->getDoctrine()->getRepository('entity');
$my_object = $repository->findOneBy($index);
在一个持久化的对象上，但还没有刷新!！我认为getRepository是从DB读取的，所以它不会找到一个未刷新的对象。
我的问题是:如何读取那些被持久化的对象(我认为它们在“理论会话”中的某个地方)，以便在我刷新整个批之前重用它们？
每个侧面都有256个物理羽流。
每个配置文件都有一个
浏览 5提问于2011-10-24得票数 26
1回答
我正在将Angular2添加到一个现有的应用程序中，但是在关于RxJS类型的webpack版本中，我遇到了异常。我正在从命令行运行webpack。这里有一个指向存储库的链接。从Phase9文件夹中运行'npm install‘，然后运行'npm start’以重现错误：
ERROR in [default] c:\Dev\angular-upgrade\Phase9\node_modules\rxjs\add\operator\zipAll.d.ts:2:15
Invalid module name in augmentation, module '../../Obse
浏览 3提问于2016-08-18得票数 0
回答已采纳
如何重新编译被其他xyz库修改的HTML？其他xyz库向DOM添加了一些exra内容，现在Angular (单击)方法不起作用。 在angular 1中，我们是这样做的： 应用this.$ this.$compile(angular.element(document.querySelectorAll('.someHTMlElement')))(this.$scope)；.$apply()； 有没有人能建议一下如何在Angular 2+中做到这一点？
浏览 8提问于2019-04-17得票数 1
1回答
Quill编辑器展示了其他东西
、、、、
我试图在我的应用程序中使用quill编辑器，我遵循了所需的步骤，quill编辑器显示了需要的位置，但是它显示了一些形状和框。这是我下面的代码；app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from
浏览 13提问于2022-02-18得票数 1
在JavaFX中，我可以通过其解码值'\uf095‘来使用像FontAwesomeFX这样的web字体，现在我想将web字体字符'"\e625"’转换为java未编码字符
浏览 1提问于2016-04-29得票数 0
是否可以将羽毛笔容器中的某些内容标记为不可修改？例如，假设起始容器div为：
<div id="editor-container">
<h1>This should not be editable.</h1>
</div>
我的javascript很简单：
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold'
浏览 1提问于2017-01-22得票数 0
1回答
目前在我们的项目中，我们正在使用Angular的Router来定义我们的路由。我们有一个精灵风格的单页面应用程序，在每个页面上都有下一步和上一步按钮，分别定义了下一步和上一步的路线。这些下一页和上一页按钮是基于来自前一页的用户输入在每一页上用条件逻辑实现的(例如，如果用户从前一页选择了"Option1和Selection1“，则转到页X，否则转到页Y)。这在大多数情况下都是有效的；但是，当我们添加更多需要更多条件逻辑的页面时，这可能会失控。
有没有办法简化这个过程？我研究过Angular Router guards，虽然它们提供了一种方法，如果应用程序在调用路由时没有必要的数据，可以将
浏览 1提问于2018-02-21得票数 0
我已经开始使用ionic从头开始构建一个应用程序，并且喜欢包含框架。
我在网页上运行这个例子没有问题，但是我用ionic失败了。
我已经用创建了这个项目
ionic start form blank --v2 --ts
我已经链接了index.html中的js文件。
<script type="text/javascript" src="build/js/libs/schema-form/angular.min.js"></script>
<script type="text/javascript" src=
浏览 33提问于2016-09-16得票数 1
3回答
多航羽毛
、
我有个关于“鸟羽”整合的问题。在我的javascript中，我需要使用这样的羽毛：
// Aviary init
var featherProductEditor = new Aviary.Feather({
apiKey: 'myapykey',
apiVersion: 3,
theme: 'dark',
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
// Do things for featherProductEd
浏览 0提问于2014-06-06得票数 4
回答已采纳
2回答
当我按照update.angular.io上的更新指南(+运行npm更新)并试图使用ng serve编译网站时，我正在将项目从角8更新到9，得到以下错误：
ERROR in Failed to compile entry-point angular-font-awesome (es2015 as esm2015) due to compilation errors:
node_modules/angular-font-awesome/dist/angular-font-awesome.js:3968:26 - error NG1010: Value at position 0 in the N
浏览 0提问于2020-02-13得票数 19
回答已采纳
如何修改PhpStorm查找框(查找文本字段)的字体？字体是窗口默认的simsun！设置中没有更改选项。
浏览 0提问于2017-04-29得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
