Vue中的CKEditor 4-如何防止断词？
CKEditor是一个富文本编辑器，它在Vue中的使用可以通过vue-ckeditor组件来实现。为了防止断词，可以采取以下几种方法：
- 设置CSS属性：可以通过CSS样式设置
word-break属性来控制断词。常用的属性值有break-all和keep-all。当设置为break-all时，会强制换行，使每个词在容器的任何地方断开。当设置为keep-all时，会尽量不断词，使每个词保持在同一行。
示例代码：
.ckeditor-content {
word-break: keep-all;
}- 自定义CKEditor插件：可以自定义一个CKEditor插件，在插件中实现对断词的处理。具体可以参考CKEditor官方文档（https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_intro.html）来了解插件的开发和使用方法。
- 使用中文断词库：对于中文文本，可以使用中文断词库来处理断词问题。中文断词库可以根据具体的需求选择不同的开源库，比如jieba分词库等。在CKEditor中使用中文断词库需要自定义一个CKEditor插件，并结合中文分词库进行断词处理。
这里推荐腾讯云的CDN加速服务，该服务可以将静态资源缓存到离用户最近的边缘节点，从而提升访问速度和用户体验。详情请参考腾讯云CDN加速服务官方介绍：https://cloud.tencent.com/product/cdn
相关·内容
2回答
我正在创建Vue spa并在这里使用集成CKEditor，我尝试通过将以下代码添加到我的app.js中来完成与本教程类似的操作
import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import documentEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import VueCkeditor from 'vue-ckeditor5'
const
浏览 3提问于2018-10-09得票数 0
我已经开始使用ckeditor4-vue了
<template>
<div>
<ckeditor
v-model="formData"
:config="editorConfig"
@input="$emit('update:editorData', formData)"
></ckeditor>
</div>
</template>
<script>
import CKEditor
浏览 20提问于2020-02-25得票数 1
1回答
如何在由Django呈现的模板中导入VueJS应用程序的模块。我正在尝试导入模块CKEditor。
这就是我的处境：
template.html：
<div id="app">
<form>
<vue-ckeditor v-model="formField" />
</form>
</div>
<script src="https://unpkg.com/vue-ckeditor2"></script>
<script>
浏览 2提问于2018-08-20得票数 1
回答已采纳
我正在尝试上传ckeditor到我的项目，但我尝试了7个小时，它并没有消失。我搜索了谷歌，安装了30个包(npm)，我做了教程，然后慢慢放弃了。请帮助，我需要为所有包含id = "description“的视图全局配置所见即所得编辑器。 我有类似的东西: component CKeditor.vue <template>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCked
浏览 24提问于2019-03-13得票数 2
回答已采纳
我试过了Ckeditor和vue包。
我不知道如何在vue js中初始化CKeditor
浏览 2提问于2018-01-04得票数 0
1回答
我在我的项目(维尔特堆栈)中使用CKEditor 5时遇到了问题
I可以将问题描述如下:
这是我的vue文件：
<template>
<app-layout>
<ckeditor :editor="editor" @blur="onEditorInput" v-model="editorData" :config="editorConfig"></ckeditor>
</app-layout>
</template>
浏览 4提问于2021-01-27得票数 0
回答已采纳
为了隔离任何问题，我可以重现这个问题，我在VS 2017年使用ASP.NET MVC模板(.NET Framework4.6.1)启动了一个全新的项目。
我将最新的ckeditor5添加到/Script/ckeditor5 5/ckeditor.js中。
在BundleConfig.cs中，我添加了以下内容：
bundles.Add(new ScriptBundle("~/bundles/ckeditor").Include(
"~/Scripts/ckeditor5/ckeditor.js"));
在_layout.cshtml中，我有以下内容：
@Scrip
浏览 1提问于2019-05-07得票数 4
我想在我的ckeditor 5Vue中使用示例代码特性，但是我找不到它。谁能给我举个例子，或者是怎么做的？
在我的应用js中
...
import CKEditor from "@ckeditor/ckeditor5-vue";
Vue.use(CKEditor);
...
和我的vue文件
<template>
...
<ckeditor :editor="editor" v-model="CKValue" :config="editorConfig"></ckeditor&g
浏览 2提问于2019-09-05得票数 2
当我从源代码使用CKEditor创建vue项目时，我可以为CKEditor添加插件。但是编辑器组件V-model并没有像预期的那样工作。ClassicEditor不能编辑，也不能更新数据。这是个bug吗？ vue.config.js const path = require('path')
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
const { styles } = require('@ckeditor/ckeditor5-dev-u
浏览 36提问于2020-08-21得票数 0
回答已采纳
我在Laravel用Ckeditor5作为vue。在之后，我使用npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic安装了模块，并在资源/js/app.js文件中启用了Ckeditor
import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use( CKEditor );
const app = new Vue({
el: '#app',
});
之后，我在vue组件中导入了ClassicEdditor。
浏览 4提问于2020-03-29得票数 2
下面是我的代码：
import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-build-balloon-block';
Vue.use( CKEditor );
它遵循此处的CKEditor文档中的示例。唯一的区别是文档加载的是@ckeditor/ckeditor5-vue构建。
我使用的是Laravel UI样板，所以这意味着NPM和Webpack。这个包构建得很好，但是当我尝试运行它时，我得到了以下错误：
TypeError: class constructors must be inv
浏览 47提问于2020-02-28得票数 0
2回答
我希望下面的代码可以调整浏览器窗口的大小，使每个网格单元格中的文本始终保留在屏幕上。如果没有更多的空间来显示文本，并且我希望文本在行上被拆分，下面的代码会以某种原因切断文本的结尾。
<html>
<head>
<title></title>
<script src="scripts/jquery-2.0.3.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"
浏览 4提问于2014-01-14得票数 0
回答已采纳
1回答
我在Symfony项目中使用Vue.js (2)，目前我的Vue实例带有“全局”组件(在我的例子中称为带有一些CKEditor库的编辑器)，使用默认的symfony webpack预编译。 //app.js
import Vue from 'vue';
import Editor from './components/Editor';
new Vue({
el: '#app',
components: {Editor}
}); //components/Editor.vue
<template>
<d
浏览 22提问于2021-03-31得票数 1
回答已采纳
反应版本: 18.1.0
Ckeditor4-react标签
<CKEditor
onChange={(even) => {
onChangeCk(even, 'description');
}}
data={formData.description}
config={ckeditorUploadConfig}
/>
ckeditorUploadConfig
export const ckeditorUploadConfig = {
filebrowserImageUploadUrl: `${get
浏览 13提问于2022-05-13得票数 0
回答已采纳
2回答
我有一些为基本ckeditor4制作的自定义插件，我想将它们添加到ckeditor4-vue中，用于我正在处理的一个新项目。我应该如何将它们与vue ckeditor集成？ 我已经有一个来自我的原始工作的配置文件，调用插件，以及它们如何集成到工具栏中，如果这有帮助的话。 提前感谢！
浏览 143提问于2020-07-08得票数 1
1回答
我一直在尝试实现一个CkEditor，但没有取得任何成功。我创建了一个来自的在线建设者。
-I安装了：“@ckeditor/ckeditor 5-build”："^25.0.0"，“@ckeditor/ckeditor 5-vue2”："^1.0.5"，
这是我的组成部分：
***in components/ckEditor***
<template>
<div class="editor">
</div>
</template>
<script src="/build/c
浏览 1提问于2021-02-19得票数 1
回答已采纳
在Vue.js中，这是我使用的设置。在Nuxt.js中，我得到一个“没有定义窗口”的错误。
从我的研究，它似乎我必须关闭SSR为此，并可能使用插件设置。但我没能让它像那样工作。
但我不太清楚该怎么做。我在网上试了几个例子，但都没有用。
谁能告诉我怎么解决这个问题吗？
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import EssentialsPlugi
浏览 3提问于2020-04-30得票数 0
TLDR；我希望将编译好的Vue JS组件插入到CKEditor可编辑体中，作为插件下传过程的一部分。
我有一个定制的CKEditor图像插件，一个CMS风格的网站.用户通过从图像选择器( CKEditor外)中选择他们的图像来插入图像，然后执行CKEditor命令插入图像：
const model = this.editor.model;
model.change(writer => {
const imageElement = writer.createElement('custom-image');
const insertAtSelection = f
浏览 0提问于2019-04-09得票数 0
我试图在我的nuxt应用程序中添加ckeditor 5的对齐插件，它是通用的(SSR)。
我试过像这样用插件
import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'
// import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; <-- not worki
浏览 2提问于2019-05-05得票数 4
回答已采纳
我的页面中有一组组件，如下所示： 包含NewBlogComponent和BlogEditComponent的BlogEntryPointComponent NewBlogComponent和BlogEditComponent都使用以下代码： import BlogEditor from '../../../../js/ckeditor/blogeditor.ts'
export default {
components:{
ckeditor: BlogEditor.ckeditor
},
data(){
return{
editor
浏览 51提问于2019-05-27得票数 5
我试图将外部js文件导入vue组件，并将导入的文件嵌入到脚本标记中。这是我的密码。
created(){
let ckeditor = document.createElement('script');
ckeditor.setAttribute('src',"./jsmaps/jsmaps.js");
document.head.appendChild(ckeditor);
}
但它给出了一个错误
与源“”一起加载失败。
jsmaps文件夹不在本地主机中。它在我的vue js项目文件夹的src文件夹中。为什么默认使用loca
浏览 2提问于2018-03-07得票数 0
回答已采纳
我试图在本地使用CKEditor与vue 3组合api，但是这里没有显示的编辑器是may组件。
<template>
<PageWrapper title="Post">
<CKEditor :editor="editor"></CKEditor>
</PageWrapper>
</template>
<script setup>
import PageWrapper from '@/components/PageWrapper.vue
浏览 57提问于2022-03-03得票数 1
回答已采纳
1回答
这是我第一次在Nuxt中遇到CkEditor5设置，很多都不清楚，很多错误已经飞了出来。
尝试自定义我的ckeditor5 in nuxt.js by
但是，在它给出的控制台中，什么都不起作用。
Cannot use import statement outside a module
告诉我如何正确设置自定义编辑器，以便您可以同时加载代码编辑器和html。
My nuxt.js.config
const path = require('path')
const CKEditorWebpackPlugin = require('@ckeditor/cke
浏览 4提问于2021-06-18得票数 2
在我的应用程序中，我有一些很长的字符串(> 100个字符)，当显示时会破坏模板(例如:一个“嵌入式”的HTML <div>列被放大了很多)。那么，*我如何“简单”地使那些长URL能够转到换行符上，而无需付出很大的努力并使代码“复杂化”？
浏览 2提问于2012-01-14得票数 0
回答已采纳
我有一个固定大小的表，我必须在td中显示数据。问题是，如果我输入带有空格的数据，那么UI看起来是完美的，因为在td中，数据在新行中进行调整，但是如果我输入了20个没有空格的字符，那么我的UI就被干扰了。任何帮助都将不胜感激。我尝试了这么多选择，但没有人能帮上忙，比如：
<td width="200"></td>
和
table-layout: fixed;
width: 100px;
浏览 2提问于2014-01-16得票数 0
回答已采纳
当我使用vue-cli-service-build构建我的Vue.js应用程序时，我在it上得到一个空白页面(但它可以在Firefox和Chrome上工作)。我知道这个问题与CKEditor有关，因为IE不支持它。但是，我创建了一个条件，如果我们不使用IE，则只“需要”CKEditor。此解决方案适用于vue-cli-service-service，但不适用于vue-cli-service-build。
if(!usingIE())
{
alert("not using ieee");
CKEditor = require('@ckeditor/ckeditor5-vu
浏览 1提问于2019-04-24得票数 0
我试图在我的编辑器中添加CodeBlock插件，这是我的组件
<script setup>
import { ref, reactive } from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/c
浏览 24提问于2022-08-18得票数 2
回答已采纳
如何将自定义CSS类添加到元素.ck-content，换句话说，添加到CKEditor5和Vue2中可编辑的格式化文本容器？ ? ck-content是输入字段；我们必须将它与上面的工具栏( CKEditor的另一部分)区别开来。因此，如果我们想要应用一些只影响输入内容的类，它就不能影响工具栏。 似乎有一个显而易见的解决方案： <ckeditor class="CustomClass" :editor="editor" v-model="editorData" :config="editorConfig">&
浏览 52提问于2021-01-06得票数 0
回答已采纳
我已经在我的laravel5.6项目( npm install --save @ckeditor/ckeditor5-build-classic)中使用npm安装了ckeditor5，然后我将window.ckeditor = require('@ckeditor/ckeditor5-build-classic');添加到我的resources/assets/js/app.js中，并运行npm run dev.The编译成功。在我看来，当我尝试引用ckeditor时，它显示找不到ckeditor。请帮帮忙
这是我的resources/assets/js/app.js
requi
浏览 4提问于2018-05-02得票数 0
我们正在使用NuxtJsv2.15.8开发一个站点，并使用CKEditor5拥有一个nuxt/vue组件。这个组件最初是用CKEditor5 v33开发的，但我们刚刚升级到v34.1.0。
当加载包含组件的页面时，我们现在收到以下错误：
CKEditorError:编辑-完全没有设置
这是v34：中引入的一个重大变化。
我们以前没有直接设置.isReadOnly属性，所以我们不确定需要在哪里更新代码以解决错误。
我们已经查看了ckeditor站点上的文档(见下面的链接)，但仍然不清楚如何解决这个问题--不幸的是，我们对NuxtJS和ckeditor都是新手，所以我们不熟悉这一点。
我认为问
浏览 35提问于2022-06-23得票数 0
我用vuejs和ckeditor。
当我使用ckeditor访问页面时，会发现一个错误。编辑器根本不显示在页面上。
你能帮帮我吗？
TypeError:不能读取在IconView._updateXMLContent (app.js:89727:24)的IconView.render (app.js:89703:8) at IconView的null (读取'getAttribute')的属性。(app.js:107630:32)在IconView.fire (app.js:105106:30)在IconView。ViewCollection._renderViewIntoCo
浏览 13提问于2022-01-20得票数 1
回答已采纳
我有一个与Vuejs和Laravel的网络应用程序，我想使用CKEditor 5 我使用以下命令安装依赖项 npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic 就像在文档here中提到的 在我的组件中： <script>
import draggable from 'vuedraggable'
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEdito
浏览 80提问于2020-01-25得票数 6
嗨，伙计们，我现在遇到了一个问题。我试着定制一个构建，所以在ckeditor (我克隆的)中一切都很好-- sample.html也运行得很好。但是，当我试图在Vue 2中实现定制构建时，我得到了类似于标题的错误(原始工作还行，就像经典构建一样)。
Syntax Error: Error: Failed to load config "ckeditor5" to extend from.
Referenced from: C:\Users\nam\Desktop\CKEditorLib\ckeditor5\.eslintrc.js
at _normalizeObject
浏览 1提问于2020-12-18得票数 1
回答已采纳
如何在ckeditor中从word中粘贴内容时为标记分配属性?在将word文档中的内容粘贴到ckeditor中时，我希望将某些样式属性添加到段落标记中。
浏览 2提问于2012-11-07得票数 2
我正在尝试使用CKEditor 5与我的惯性应用在Laravel。但是，在遵循了文档之后，我得到了以下错误。
index.vue文件
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
浏览 9提问于2022-02-18得票数 2
回答已采纳
我在我的Vue应用程序中从源代码实现了CKEditor5。我使用ckeditor5-editor-classic (跟随)，并希望添加一个自定义按钮。
我遵循这个，按一下按钮就为console.log创建了一个简单的插件。效果很好。
问题：现在包括我的自定义插件，链接和Table插件开始出错，这似乎是一个css定位问题(将链接字段呈现在页面底部)。
我的组件看起来如下：
<template>
<div>
<ckeditor
v-model="body"
:edi
浏览 3提问于2019-05-19得票数 1
1回答
空格只在字母之间添加空格
、、、
我正在尝试实现CKEditor WYSIWYG的一个实例。我正在Vue 2.x应用程序中运行它。我已经下载了下载的CKEditor ()和ClassicEditor () dist文件的源文件，这些文件已下载并送达我的页面。控制台确认这两个文件被正确加载。问题是编辑器不注册空格，除非它们位于两个字母之间。这是相关代码-
View.php
Vue.use(window.CKEditor)
new Vue({
el: '#components-demo',
data: {
浏览 9提问于2021-11-30得票数 0
2回答
我是vue.js的新手。集成CKEditor成功，但在其中集成CKFinder有问题。我正在尝试在CKEditor组件中导入CKFinder，但遇到错误。 CKEditor-Vue组件： <template>
<ckeditor :editor="editor" :value="defaultValue"
@input="editorInput" :disabled="disabled" :config="editorConfig"></ckedi
浏览 87提问于2019-06-21得票数 0
回答已采纳
我需要在Vue的CKEditor上激活PastFromOffice插件。这就是我工作的方式。我已经安装了"npm install --save @ CKEditor /ckeditor5-paste-from-office“我知道这个插件以前是安装在传统的CKEditor上的。 <template>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
浏览 35提问于2020-04-14得票数 3
回答已采纳
我试图在我的vue js应用程序中集成，我已经成功地添加了ckeditor，但是现在我想在ckeditor中的光标位置添加一些文本，单击一个按钮。为了达到这个目的，我尝试了方法。但是，在将代码添加为editor.model.change(...)时，无法在vue中获取编辑器实例。
Uncaught ReferenceError: editor is not defined
代码=>
<template>
<ckeditor
id="custom"
ref="custom"
name="custom
浏览 1提问于2019-03-15得票数 0
1回答
如何在文本编辑器组件中显示数据
、、、、
我开始使用Laravel +惯性，因为我是Vue的新手，所以我在得到我想要的东西时遇到了很多问题。 在本例中，我使用CKEditor 5将帖子保存到数据库中。 当我想要使用我的控制器的编辑功能时，问题就来了，因为我无法将我的帖子保存在DB中到我的CKEDitor中。取而代之的是，CKEditor是空的，没有编辑器中的内容。 如何实现显示我之前保存的数据？如果我在一个普通的变量中显示它，它可以工作，但在ckeditor组件中，它不能。 这不起作用： <ckeditor id="description" tag-name="textarea"
浏览 22提问于2021-04-14得票数 0
因此，我正在致力于vue水疗项目，并希望将ckeditor5融入其中。因此，我只是从ckeditor5安装 vue版本，通过在github站点上的分期付款指南，一切都很好。
但是在使用它之后，我意识到我需要从那里进行定制的构建，这意味着我需要分叉构建并克隆它，在它上做一些事情，然后npm构建，然后将它添加到我的项目中。
问题是，我不知道如何将那些css和js包含到我的vue spa组件中(我只需要它在特定组件上使用，所以我不认为通过向html中添加css和js文件就可以在全局上获得任何好处)。
那么如何将其添加到vue spa的特定组件上呢？
浏览 0提问于2018-09-28得票数 0
回答已采纳
当所有工具栏项目的宽度超过工具栏宽度时，它会将所有项目移动到子菜单中(右侧有3个点)，而在其他版本中，我看到它要么换行(首选)，要么只是将几个项目移动到子菜单中。 ? 如你所见，如果我按下...它显示为一条很大的线。 ? 我正在使用ckeditor5-vue库，遵循ckeditor +网站上的vue集成指南，并在菜单中添加了一些额外的项目。 工具栏上没有关于如何手动扭曲或任何内容的文档。感谢大家的帮助。
浏览 55提问于2020-01-21得票数 0
回答已采纳
如何在vue中使用带有ckeditor的自动完成插件。我在哪里配置它所寻找的显示选项的键，以及如何将建议列表传递给自动完成，如这里所描述的，。
我一直在尝试，但没能成功。
这是我的模板：
<template>
<div class="content-w">
<div class="content-i">
<div class="content-box">
<div class="row">
浏览 0提问于2018-07-09得票数 1
回答已采纳
我正在构建一个Vue.js web应用程序。我在一个放置在模式窗口中的表单中使用CKEditor。通过设计，用户的关注点被“困”在模式中。在CKEditor中，当用户单击工具栏中的“链接”图标时，编辑器会打开一个对话框，并将新的DOM元素附加到“document.body”。关于DOM，“链接”对话框现在位于捕获焦点之外。用户不能点击或用tab键跳转到"Link“对话框输入。
我深入研究了ckeditor5-ui源代码，并在balloonpanelview.js中找到了相关代码。我曾尝试基于配置CKEditor，但未获成功
在我的Vue.js组件中，我有：
import Classic
浏览 0提问于2019-09-11得票数 1
在构建CKEditor时，我在build-config.js中指定了插件，但是我必须从手动下载插件及其依赖项，并在运行build.sh脚本之前将它们放到/plugins页面中。CKEditor是否有任何工具可以自动完成，比如npm？
浏览 2提问于2016-05-18得票数 1
回答已采纳
1回答
当我试图运行vue 2/ jest单元测试时，我遇到了一个SyntaxError: Cannot use import statement outside a module错误。我将这个添加到我的jest.config中，但仍然得到了错误。看起来，ckeditor试图在内部导入代码，而这些代码并没有被捕获。
import { Editor, DataApiMixin, ElementApiMixin, attachToForm } from 'ckeditor5/src/core';
transformIgnorePatterns: [ '\\\\/node_modu
浏览 13提问于2022-10-27得票数 0
目前在使用vuejs2的网站上，我们整合了ckeditor4 4-vue一段时间。
现在出现的问题是字体与应用程序的其他部分不匹配。他们想默认为'Lato'，sans-serif。
如下面的实现所示，我们在配置中使用contentsCss加载内部CSS样式表是可见的。(位于localhost:8080/ckeditor/content.css)
但是这不加载，ckeditor4-vue是否支持contentsCss？还有别的解决办法吗？
目前，我们在main.js中加载ckeditor实例，如下所示；
...
import CKEditor from "ckeditor
浏览 5提问于2022-09-30得票数 0
我在一个Vue JS应用程序上工作，它有MathType插件，当公式输入并以正确的格式显示时，插件工作得很好。但是，当组件被销毁并重新创建，之前输入的数据使用v- MathML传递到组件中时，Vue检查器中的代码是完好无损的，但编辑器中只显示原始文本内容，公式不会解析为图像格式。如果我用包含公式的v-model重新加载整个页面，MathType会解析它并显示正确的图像。对于在CKEditor 4中动态/编程添加的文本，有没有办法触发这种解析？下面是我的代码： <template>
<div>
<input v-bind:name="
浏览 75提问于2021-07-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
