1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/chick1993-layui-tinymce

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 10 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 26.11.2024 16:52 4b4df46

layui-tinymce

Данный проект уже стабильно используется в компании, временно остановлено его обслуживание, пожалуйста, используйте его по своему усмотрению.

Способ обновления tinymce

Если вам нужна последняя версия tinymce, вы можете загрузить её с официального сайта и заменить каталог layui_exts/tinymce/tinymce самостоятельно.

Онлайн-демонстрация | Форум Layui | Китайская документация tinymce

Обновление

2021.01.04 tinymce обновлён до 5.6.2
2020.11.06 tinymce обновлен до 5.5.1, при загрузке изображения теперь можно использовать пользовательские имена полей и одновременно загружать другие данные
2020.08.24 tinymce обновлён до 5.4.2

Использование

Способ использования можно посмотреть в официальной документации tinymce.

Импорт редактора

layui.extend({
    tinymce: '{/}./tinymce/tinymce'
}).use(['tinymce'], function () {
    var t = layui.tinymce
    // code ...
    // Здесь и далее код без специальных комментариев
    // ...
})

Основные методы

Создание t.render(option, load_callback)

<textarea id="edit"></textarea>

t.render({
    elem: "#edit"  
    // Поддерживаются все настройки tinymce      
},(opt, edit)=>{
    // Обратный вызов после завершения загрузки, opt — это все переданные параметры
    // edit — текущий экземпляр редактора, эквивалентен t.get()
});

Перезагрузка t.reload(option, load_callback)

// Способ один
t.reload({
    elem:'#edit'
    // Можно повторно установить все параметры, кроме elem
},(opt, edit) => {
    //Обратный вызов после перезагрузки, будет передан весь набор параметров
    //Перезагрузка только перерисовывает редактор, не очищает textarea
})

// Способ два
t.reload('#edit',{
    // Можно повторно установить все параметры, кроме elem
},(opt, edit) => {

})

Экземпляр редактора t.get(id)

// Если на странице только один редактор, то это эквивалентно официальному tinymce.activeEditor
// Если на странице несколько редакторов, то это эквивалентно официальному tinymce.editors[id]
var edit = t.get('#edit')

Получение содержимого edit.getContent(option)

// Получить HTML-содержимое редактора
edit.getContent()
// Получить текстовое содержимое редактора
edit.getContent({format:'text'})

Вставка содержимого edit.insertContent(html)

edit.insertContent('<b>Вставить содержимое</b>')

Установка содержимого edit.setContent(html)

edit.setContent('<b>Установить содержимое</b>')

// Очистить редактор, установив пустую строку
edit.setContent('')

Очистка содержимого

edit.resetContent()

Уничтожение edit.destroy()

edit.destroy() 

Загрузка изображений

Настройка интерфейса загрузки

Глобальное изменение layui_exts\tinymce\tinymce.js
var settings = {
    images_upload_url:'http(s)://yoursite/apipath'
    // ...
}
Передача при инициализации
t.render({
    images_upload_url:'http(s)://yoursite/apipath'
    // ...
})

Стандартная загрузка

// Настройки загрузки
t.render({
    elem: "#edit"  
    ,images_upload_url:'http(s)://yoursite/apipath'//Настройка интерфейса загрузки
    ,form:{
        name:'avatar'//Имя поля для загрузки файла
        ,data:{ key:'value', ... } //Другие данные, которые необходимо загрузить вместе
    }
});

// Если не было внесено никаких изменений,
// В layui-admin по умолчанию используется admin, а отдельно используемый стандартный ответ от сервера требует следующего формата: {"code": 0, "msg": "success", "data": "/demo/demo.jpg"},
// где code равен 0 означает успех, msg — сообщение, data — адрес загруженного изображения, возвращаемый клиенту

Пользовательская загрузка

// Функция обратного вызова: параметр 1 — данные загружаемого файла, параметр 2 — функция обратного вызова после успешной загрузки, параметр 3 — функция обратного вызова при ошибке загрузки
t.render({
    elem: "#edit"  
    ,images_upload_handler:function(blobInfo, succFun, failFun){
        // Ваш код ...
    }
})

Расширенные возможности

Мониторинг событий

См. оригинальную документацию

t.render({
    elem: "#edit"
    , height: 200
    , init_instance_callback : function(ed) {
        ed.on('Click', function (e) { 
            // Мониторинг внутренних событий редактора
        });
    }

});
Собственные события (с учётом регистра)
Событие Описание
Click Срабатывает при одиночном нажатии на редактор
DblClick Срабатывает при двойном нажатии на редактор
MouseDown Срабатывает, когда в редакторе нажата кнопка мыши
MouseUp Срабатывает, когда кнопка мыши отпущена в редакторе
MouseMove Срабатывает, когда курсор перемещается в редакторе
MouseOver Срабатывает, когда курсор входит в редактор
MouseOut Срабатывает, когда курсор выходит из редактора
MouseEnter Срабатывает, когда курсор попадает в редактор
MouseLeave Срабатывает, когда курсор покидает редактор
KeyDown Срабатывает, когда клавиша нажата в редакторе
KeyPress Срабатывает, когда клавиша удерживается в редакторе
KeyUp Срабатывает, когда клавиша отпущена в редакторе
ContextMenu Срабатывает, когда вызывается контекстное меню в редакторе
Paste Срабатывает после вставки содержимого в редактор
События редактора (с учётом регистра)
Событие Описание
Init Срабатывает во время инициализации редактора
Focus Срабатывает, когда редактор получает фокус
Blur Срабатывает, когда редактор теряет фокус
BeforeSetContent Срабатывает перед установкой содержимого
SetContent Срабатывает при установке содержимого
GetContent Срабатывает при получении содержимого
PreProcess Срабатывает при сериализации содержимого редактора
PostProcess Срабатывает при отправке содержимого редактора
NodeChange Срабатывает при изменении выделения в редакторе
Undo Срабатывает при восстановлении предыдущего состояния содержимого
Redo Срабатывает при отмене отмены действия
Change Срабатывает при изменении содержимого
Dirty Срабатывает, если содержимое считается грязным
Remove Срабатывает при удалении редактора
ExecCommand Срабатывает после выполнения команды

Дополнительная настройка

Документация на китайском языке
Официальная документация (на английском языке)

Часто задаваемые вопросы

Q1. Как решить проблему с расположением меню под окном при использовании в окне?

В файле layui_exts\tinymce\tinymce\skins\ui\oxide\skin.min.css добавить пять нулей после всех значений z-index больше 1.

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/chick1993-layui-tinymce.git
git@api.gitlife.ru:oschina-mirror/chick1993-layui-tinymce.git
oschina-mirror
chick1993-layui-tinymce
chick1993-layui-tinymce
master