Текущий проект разработки включает в себя богатые текстовые поля. Узнав о многих богатых редакторах текста, я наконец решил использовать Ueditor Du Niang. Причина: он имеет мощные функции и поставляется с изображениями и загрузкой видео, которые адаптированы к бэкэнд Java.
Проектная галерея
Без лишних слов адрес проекта: http://ueditor.baidu.com/website/
Жаль, что Цзяншу не поддерживает внешние ссылки на других сайтах.
Процесс интеграции
Бэкэнд -трансформация
Поскольку проект использует фреймворк Springboot, поддержка Ueditor для бэкэнда Java заключается только в том, чтобы дать файл JSP. Следовательно, файл необходимо обработать и изменен в унифицированный контроллер для Springboot.
@Controller @transactional @requestMapping ("/static/common/ueditor/jsp") открытый класс jspcontroller {@requestmapping ("/controller") @responsebody public voidfiginfo (httpserveltrequest, httpservelponse response) {response.sepeconttype/j.s.); String rootpath = request.getSession (). GetServletContext () .getRealPath ("/"); try {string exec = new actionenter (request, rootpath) .exec (); PrintWriter Writer = response.getWriter (); writer.write (exec); writer.flush (); writer.close (); } catch (ioException | jsonexception e) {e.printstacktrace (); }}Как упомянуто выше, проект поддерживает запросы загрузки от/static/common/ueditor/jsp/controller.
Передний запрос
Добавьте поддержку Ueditor на переднем конце. То есть импортируйте весь пакет UediOutr в проект и импортируйте JS, где используется элемент управления.
При введении проекта моя соответствующая структура кода заключается в следующем:
Введение страницы соответствующий код введен следующим образом:
<script type = "text/javascript" charset = "utf-8" th: src = "@{/static/common/ueditor/ueditor.config.js}"> </script> <script type = "text/javascript" charset = "utf-8" Th: src = "@{/static/common/ueditor/ueditor.all.js}"> </script> Просто создайте экземпляр редактора Ueditor. Ниже приведены мои параметры инициализации, только для справки.
//Instantiation editor var ue = UE.getEditor(''+id,{ toolbars: [ [ 'fontfamily', //Font' font'fontsize', //Font size'undo', //Undo', //Redo'|', 'emotion', //Emotion'forecolor', //Font color'backcolor', //Back color'bold', //Bold'underline', //Unline'strikethrough', //Strikethrough'|', 'justifyleft', //List-align'justifyright', //Right-align'justifycenter', //Center-align'|', 'link', //Hyperlink'unlink', //Unlink 'simpleupload', //Single image upload 'insertimage', // music ', // music //' insertvideo ', // видео', // clear format 'formatmatch', // формат кисти 'источник', // исходный код]], ensableautosave: false, autoheightenabled: true, autofloatenabled: true, initialframewidth: widthhehehieth: height, scaleenabled: true/scollbar;На этом этапе вы увидите богатое текстовое поле при посещении нашей страницы.
Тем не менее, он подскажет нам, что в файле фоновой конфигурации есть ошибка, и функция загрузки не может быть реализована.
Реализовать функцию загрузки
Измените файл config.js и соответствующий глобальный путь запроса. Этот запрос должен получить данные конфигурации, соответствующие config.json. Вы можете непосредственно вернуть информацию о конфигурации в контроллере или прочитать файлы JSON в контроллере. Я использую метод чтения файлов конфигурации здесь, используя метод, который поставляется с Ueditor. Статья была реализована в начале. Вот запрос, который необходимо изменить:
После завершения вышеуказанной конфигурации снова загрузите страницу Ueditor, и кнопка загрузки изображения может быть завершена.
Примечание. Если вы начинаете режим отладки, добавьте точки останова и тестируйте при загрузке строки JSON. Произойдет ошибка тайм -аута. Поле конфигурации не было найдено в файле конфигурации в течение времени. Все, это должно быть отмечено здесь. Если все конфигурации не являются проблематичными, но ошибка фоновой конфигурации все еще возвращается, вы можете отменить все точки останова и попробовать.
Примечание: загрузка требует добавления компонента загрузки, используйте здесь FileUoload
<dependency> <groupid> commons-fileupload </GroupId> <artifactid> commons-fileUpload </artifactid> <sersive> 1.3 </version> </gethyseriation>
Используйте сервлет для реализации загрузки
/** * Попробуйте использовать сервис для реализации Ueditor * * @author onywang * @create 2018-02-05 2:40 **/ @webservlet (name = "ueditorservlet", urlpatterns = "/static/ueditor/ueditor") Dopost (httpservletRequest-запрос, httpservletresponse response) Throws servletexception, ioException {request.setcharacterencoding ("utf-8"); response.setheader ("контент-тип", "text/html"); Printwriter Out = response.getWriter (); Application servletContext = this.getServletContext (); String rootpath = application.getRealpath ("/"); String action = request.getParameter ("action"); String result = new ActionEnter (запрос, rootpath+"web-inf/classes") .exec (); if (action! = null && (action.equals ("listfile") || action.equals ("listimage")))) {rootpath = rootpath.replace ("//", "/"); result = result.replaceall (rootpath, "/"); } out.write (result); } @Override Protected void Doget (httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {dopost (req, resp); } Используйте метод сервлета и создайте новый аннотированный сервлет.
Вам нужно добавить аннотацию @servletcomponentscan в основной метод.
Измените путь доступа по умолчанию Ueditor.
Примечание. При Springboot все файлы ресурсов размещаются в классах. Все, будьте осторожны при обращении с путями. Добавить пути в Web-Inf/классы
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.