个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在尝试将 ckeditor 上传到我的项目，但我尝试了 7 个小时，但它并没有消失。我搜索了谷歌，从 30 个包(npm)安装，我做了教程并慢慢放弃。请帮忙，我需要为所有包含 id = "description"的 View 全局配置所见即所得编辑器。
我有这样的东西:组件 CKeditor.vue
<template>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'
export default {
components: {
'vue-ckeditor': VueCkeditor.component
},
data(){
return {
value1: 'hello',
value2: 'world',
editors: {
classic: ClassicEditor
}
}
},
template:
`<vue-ckeditor type="classic" v-model="value1" :editors="editors"></vue-ckeditor>`
}
</script>
查看create.blade.php:
<ckeditor type="classic" v-model="value1" class="form-control" rows="5" name="description" id="description" placeholder="Description" maxlength="3000"></ckeditor>
应用程序.js:
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
require('./bootstrap');
Vue.component('ckeditor', require('./components/CKeditor.vue').default);
window.Vue = require('vue');
window.onload = function () {
const app = new Vue({
el: '#app'
});
}
作品来自https://github.com/igorxut/vue-ckeditor5的教程
请帮我运行这个所见即所得的编辑器。非常感谢...:*
最佳答案
我将从头到尾告诉您如何使用 laravel 和 vuejs 运行 ckeditor 5，只需按照以下步骤操作即可
-1 使用npm 在laravel 中安装CKEditor
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
-2 在app.js文件中添加这段代码
import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use( CKEditor );
-3 在app.js中为ckeditor创建一个组件
Vue.component('ck-editor', require('./components/ckeditor.vue').default);
-4 将此代码添加到您的 ckeditor.vue 文件中
<template>
<div>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
<button v-on:click="emptyEditor()">Empty the editor</button>
<br><br>
<h2>Editor display html code </h2>
<br>
<div>{{editorData}}</div>
<h2>Editor display html Result </h2>
<br>
<button v-on:click="displayEditorResult()">display result </button>
<br><br>
<div id="resultingText"></div>
</div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
data() {
return {
editor: ClassicEditor,
editorData: 'ckeditor 5 for laravel and vuejs',
editorConfig: {
// The configuration of the editor.
},
};
},
mounted(){
console.log('Component mounted.')
},
methods: {
emptyEditor() {
this.editorData = '';
},
displayEditorResult(){
document.getElementById('resultingText').innerHTML = this.editorData;
}
}
}
</script>
-5 创建一个 Blade 文件并添加这段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ckeditor 5 wyswyg</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app">
<ck-editor></ck-editor>
</div>
<script src="/js/app.js"></script>
<script>
</script>
</body>
</html>
最后运行代码，会显示CKEditor 5
希望我的回答能帮到你
关于laravel - CKEditor5 与 vue.js 和 laravel 的集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55129721/
27
4
0
我正在构建一个使用 javascript 向页面动态添加元素的 Web 应用程序，然后可以使用 contentEditable="true" 对其进行编辑和 CKEditor . 目前，如果我使用 c
目前我遇到以下问题，我正在使用 CKEDITOR 4.x 中的 applyStyle 方法应用 span 标签。但是当一个跨度被部分选中并且我执行 applyStyle 方法时，一个新的跨度将被选择，
我在内联模式下使用CKEDITOR，每页有多个编辑器。为了创建它们，我使用 HTML 中的标签，然后运行执行 CKEDITOR.inline() 的脚本网页加载后立即针对它们中的每一个进行操作。 只
如何在加载编辑器上设置文本方向 [rtl]？ 最佳答案 根据文档，应该这样做: CKEDITOR.config.contentsLangDirection in the CKSource manual
在 CKEditor 中，我添加了自定义图像按钮，它直接触发文件输入。但是，只有在使用 Image 插件时才能渲染图像。 我不想在工具栏上有 2 个图像按钮，有没有办法隐藏图像按钮，但仍然使用它(如显
我有一个使用 CKeditor 的 Rails 4 应用程序。在开发模式下它工作正常，但在生产中 ckeditor 不会出现，并且文本区域的位置有一个空格。 根据日志，缺少以下文件: ActionCo
如何在选择图像时启用或禁用 CKEditor 的段落按钮。我不想完全删除它。我目前使用 ckeditor 版本 4.4 最佳答案 使用editor.getCommand() + CKEDITOR.co
我在内联模式下使用CKEDITOR，每页有多个编辑器。为了创建它们，我使用 HTML 中的标签，然后运行执行 CKEDITOR.inline() 的脚本网页加载后立即针对它们中的每一个进行操作。 只
乍一看，我需要做一件简单的事情——在 CKEditor 中添加一个带有行号的栏。主要思想是作者在讨论文本时可以引用特定段落。 我试图找到一个插件，试图找到另一个带有行号的 WYSIWYG 编辑器，但没
在 CKEditor 中，我添加了自定义图像按钮，它直接触发文件输入。但是，只有在使用 Image 插件时才能渲染图像。 我不想在工具栏上有 2 个图像按钮，有没有办法隐藏图像按钮，但仍然使用它(如显
我试图修改this repo 来自定义我想在我的 Strapi 项目中使用的 CKEditor。我添加了更多插件，这就是我的 ckeditor.js 文件的样子: import ClassicEdit
当自定义 div 内部发生变化时是否会触发任何事件？我不想监听 editor.on('change')，而只是检测发生变化的 dom 元素， (删除或插入的字符)。例如: var template
我有一个像 ckeditor 一样的 textarea。 在编辑器中有一个按钮可以将内容查看为 source/html。 我在 textarea 上方有一个输入按钮，可以将 textarea 内容预览
我正在使用 2amigos ckeditor plugins在 yii2 中，我能够从 plugin_sdk_sample 创建一个示例插件，它在原始项目中工作正常，但是当我将其放入 yii2 项目时
我在我的应用程序中使用 CKEditor 5，供用户输入包含图像、媒体、表格和样式文本的文档。用户存储文档后，我会再次将其拉出进行显示。过去当我只有最通用的样式时，我会这样显示内容: 这是一个
有谁知道如何修改CKEditor右键单击上下文菜单？ 我想弄清楚如何从右键单击菜单中删除“剪切、复制、粘贴、编辑 DIV”，并尝试向其中添加“插入图像、插入表格”。 最佳答案 3.6.1 版在其 AP
我一直在为此寻找解决方案有一段时间了，我发现的唯一修复只会影响文本在编辑器本身中的显示方式，而不影响生成的文本在发送/保存到其他地方时的外观。我说的是 CSS 修复之类的东西。 我正在使用 CKEdi
我需要动态更改 CKEditor 配置中的一个配置设置。 我正在编写一个插件，它将复选框添加到 CKEditor 工具栏并在选中/取消选中它时 - forcePasteAsPlainText 被更改为
如何动态更改 CKEditor 工具栏(不使用预定义的工具栏)？ CKEditor Developer's Guide只告诉您如何在初始化期间设置工具栏。 我正在使用 CKEditor 3.6.4。
我使用 CKeditor 来编辑丰富的 HTML 页面，但是一些 javascript 功能依赖于 的特殊属性。触发它们的标签。 这些是极少数情况，只有 5000 多条记录的数据库中的几条记录需要触
我是一名优秀的程序员,十分优秀！