Vue-html5-editor — это плагин для текстового редактора WYSIWYG на основе Vue.js, простой и гибкий, совместимый с Vue.js 2.0+ и поддерживающий IE11.
Установка:
npm install vue-html5-editor --save-dev
Импортировать и установить как глобальный компонент:
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor,options);
Также можно использовать в качестве локального компонента, чтобы в разных сценариях использовать разные конфигурации:
const editor1 = new VueHtml5Editor(options1)
const app1 = new Vue({
components:{
editor1
}
})
const editor2 = new VueHtml5Editor(options2)
const app2 = new Vue({
components:{
editor2
}
})
<script src="serverpath/vue.js"></script>
<script src="serverpath/vue-html5-editor.js"></script>
Установить через глобальную переменную VueHtml5Editor
:
Vue.use(VueHtml5Editor, options)
Использование: Шаблонный код:
<vue-html5-editor :content="content" :height="500"></vue-html5-editor>
Опции:
Vue.use(VueHtml5Editor, {
// Глобальное имя компонента, не действует при использовании new VueHtml5Editor(options)
name: "vue-html5-editor",
// Отображать ли название модуля, если включено, то после иконки на панели инструментов будет отображаться название модуля
showModuleName: false,
// Пользовательские классы для каждого значка, по умолчанию используются значки font-awesome
icons: {
text: "fa fa-pencil",
color: "fa fa-paint-brush",
font: "fa fa-font",
align: "fa fa-align-justify",
list: "fa fa-list",
link: "fa fa-chain",
unlink: "fa fa-chain-broken",
tabulation: "fa fa-table",
image: "fa fa-file-image-o",
hr: "fa fa-minus",
eraser: "fa fa-eraser",
undo: "fa-undo fa",
"full-screen": "fa fa-arrows-alt",
info: "fa fa-info",
},
// Конфигурация модуля изображений
image: {
// Максимальный размер файла, в байтах
sizeLimit: 512 * 1024,
// Параметры загрузки, по умолчанию преобразуют изображение в base64 без загрузки
upload: {
url: null,
headers: {},
params: {},
fieldName: {}
},
// Настройки сжатия, по умолчанию используют localResizeIMG для сжатия, установите значение null, чтобы отключить сжатие
compress: {
width: 1600,
height: 1600,
quality: 80
},
// Обработка ответных данных, возвращает ссылку на изображение
uploadHandler(responseText){
// По умолчанию принимает данные JSON, например {ok:false,msg:"unexpected"} или {ok:true,data:"image url"}
var json = JSON.parse(responseText)
if (!json.ok) {
alert(json.msg)
} else {
return json.data
}
}
},
// Язык, встроенные английский (en-us) и китайский (zh-cn)
language: "zh-cn",
i18n: {
// Укажите здесь свой язык
"zh-cn": {
"align": "对齐方式",
"image": "图片",
"list": "列表",
"link": "链接",
"unlink": "去除链接",
"table": "表格",
"font": "文字",
"full screen": "全屏",
"text": "排版",
"eraser": "格式清除",
"info": "关于",
"color": "颜色",
"please enter a url": "请输入地址",
"create link": "创建链接",
"bold": "加粗",
"italic": "倾斜",
"underline": "下划线",
"strike through": "删除线",
"subscript": "上标",
"superscript": "下标",
"heading": "标题",
"font name": "字体",
"font size": "文字大小",
"left justify": "左对齐",
... # Атрибуты компонента attributes
```html
<editor :content="content" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></editor>
Редактируемое содержимое. The html content to edit.
Высота редактора, которая при установке auto-height
в значение true задаёт минимальную высоту редактора.
The height or min-height ( if auto-height is true ) of editor.
Уровень вложенности, который устанавливает свойство стиля z-index
для области редактора. Значение по умолчанию — 1000.
Sets z-index style property of editor,default 1000.
Автоматическое изменение высоты редактора в зависимости от содержимого. По умолчанию установлено значение true. Resize editor height automatically,default true.
Локальная настройка отображения имени модуля, перекрывающая глобальные настройки.
Set showModuleName
locally.
<editor @change="updateData"></editor>
Событие происходит каждый раз при изменении содержимого и передаёт изменённое содержимое. Emited when the content changes,and pass the current content as event data.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )