Я суммирую проблемы, с которыми я столкнулся в процессе настройки стиля для редактора, в основном вторичного интерфейса редактора и настройки стиля с помощью угловой. Есть много проблем. Наконец, с помощью ** он был завершен. Между старой версией и новой версией до сих пор нет взаимодействия, но это не сложно. Следующее объясняет проблемы отдельно.
Разработка Удитора
Вы можете скачать любую версию на официальном веб -сайте и использовать ее: http://ueditor.baidu.com/website/download.html После загрузки вы можете использовать ее в соответствии с конфигурацией на официальном веб -сайте. Адрес документа: http://fex.baidu.com/ueditor/ Существует довольно много проблем со вторичной разработкой Ueditor, и они перечислены здесь.
1. Ueditor автоматически фильтрует тег Div в тег P
Во время процесса пользовательского стиля я обнаружил, что все DOV были отфильтрованы и были обнаружены теги UNP. Я нашел много информации в Интернете, но ни один из них не был полезен. Позже я увидел мастер, написав, что конфигурация различных версий Ueditor отличается. Здесь я написал свое решение: откройте файл конфигурации ueditor.config.js и добавьте следующий код:
, AllingDivtranstop: ложь
Обратите внимание, что он добавлен вручную в window.uediroe_config! Кроме того, некоторые люди сталкивались с аналогичными ситуациями и могут ссылаться на: http://www.cnblogs.com/olive116/p/3464495.html
2. Как вставить индивидуальные стили в редактор?
Интерфейс представлен в редакторе, давайте посмотрим.
Функция inserThtml () {var value = reffice ('вставьте html code', ''); ue.geteditor ('editor'). execcommand ('inserthtml', value)}Итак, как вы используете этот интерфейс в нашем собственном проекте? Во -первых, вам нужно реализовать редактор, обычно используйте ue.geteditor () непосредственно, чтобы получить экземпляр.
// Использование заводского метода Geteditor для создания и ссылки на экземпляр редактора. Если вы обратитесь к редактору под определенным закрытием, вы можете напрямую позвонить в ue.geteditor («редактор»), чтобы получить соответствующий экземпляр перед его использованием. Нам нужно представить редактор, чтобы вызвать его метод.
<script src = "libs/ueditor/ueditor.config.js"> </script> <script src = "libs/ueditor/ueditor.all.min.js"> </script>
Создайте пример редактора в нашем угловом проекте. Редактор предоставляет готовые методы экземпляра:
// Создать фактический столбец редактора $ scope.ready = function (ueditor) {window.editor = ueditor;};Хорошо, теперь мы можем использовать экземпляр редактора. Далее, давайте посмотрим на индивидуальные стили.
Пользовательский стиль
Давайте посмотрим на стиль меню аккордеона, которое мы написали в руках. Адрес загрузки: https://github.com/foreverjiangting/set-menu/tree/master/menu Взаимодействие, используемое здесь Посмотрим, как написать:
<!-Добавить панель инструментов-> <div> <h4> панель инструментов </h4> <!-Содержание боковой панели-> <div> <a ng-click = "toggle ('titlestyle')"> <pan> </span> home </a> <ul ng-hide = "titlestyle" id = "usermeun"> <li ng-repeat = "titlestyle" usermeun "> < ng-click = "inserthtml ('titles', title)"> <a> {{title.name}} </a> </li> </ul> <a ng-click = "toggle ('titleicon')"> <pran> </span> icon </a> <ul ng-hide = "titicon" intice-in ng-ng-ng-hide = " Sources.imgs "ng-click =" inserthtml ('imgs', img) "> <a> <img ng-src =" {{img.url}} "> </a> </li> </ul> <a ng-click =" toggle ('titleyouxia') "> <prop> ng-hide = "titleyouxia" id = "glyphicnmenu"> <li ng-repeat = "yx в источниках. ng-click = "toggle ('titleserve')"> <pan> </span> доска объявлений </a> <ul ng-hide = "titleServe" id = "servemenu"> <li ng-repeat = "ser in sources.sers" ng-click = "inserthtml ('sers', ser) "> <a> {{ser.name}} </a> </li> </ul> <a ng-click =" toggle ('titlearticle') "> <pan> </span> Рекомендуемые статьи </a> <ul ng-hide =" titlearticle "id =" articlemenu "> <li ng-repeat =" in in in soisces ". ng-click = "inserThtml ('arcs', arc)"> <a> {{arc.Article}} </a> </li> </ul> </div> <!-Тема контента заканчивается-> </div>Код в JS выглядит следующим образом:
// Стиль взаимодействия на панели инструментов $ scope.titlestyle = $ scope.titleicon = $ scope.titleyouxia = $ scope.titleserve = $ titlearticle = false; $ scope.toggle = function (style) {$ scope [style] =! $ scope [style];}Эффект аккордеона, управляемый NG, является простым и легким, с небольшим количеством кода.
Эффекты следующие:
После написания стиля он будет вставлен в редактор. Так как это вставить? Здесь есть два типа вещей: вставьте напрямую и вставьте в соответствии со статьями после поиска. Легче вставить напрямую.
$ scope.inserthtml = function (type, item) {if (type === 'titles' || type === 'imgs') {editor.execcommand ('inserthtml', item.html);}Эффект после введения заключается в следующем:
Конечно, что это сделать? В основном он использует контент в редакторе и использует привязку данных NG, чтобы отразить его в приложении, создавая тем самым интерфейс редактирования статьи приложения.
Производство функции поиска
Данные естественным образом получены из API. Как получить данные в API? Давайте посмотрим. В основном мы используем HTTP для получения данных, затем используем тогдашний метод для обратного вызова, получить HTTP, получить данные, а затем использовать метод для обратного вызова, получить данные Scope.data.
angular.module ('service'). Service ('articleService', function ($ http) {return {searchArticle: function (title) {return $ http.get ('api/article/search', {data: {title: title}});}};});Здесь мы объявляем статьи и возвращаем данные API, поэтому мы внедряем зависимость в страницу, чтобы вызвать ее, чтобы вызвать его метод. Давайте посмотрим на код: обычно сервисные звонки
Данные, возвращаемые API, помещаются в папку, а контроллер, который управляет данными, помещается в папку. Давайте посмотрим, как данные API вызываются обратно в контроллер.
Angular.Module ('article.controllers'). Controller ('ServiceCtrectRl', функция ($ scope, $ rootscope, $ filter, $ timeout, $ state, $ stateparams, contentservice ,, articleservice, type) {Обратите внимание, что вам нужно внедрить Articleservice в контроллер, прежде чем вы сможете перезвонить данные. Как вызвать данные? Посмотрите на следующий код:
var arcfullSearch = {text: '', result: [], выбрано: [], // Сначала выбранные данные в массив BeginSearch: function () {var self = this; var text = self.text.trim (); if (! text) return; itrdervice.searcharticle (text) .thenhen (function (data) { / /Получить данные. Первый Data указывает на второй данные. Соглашение. Второй Data указывает. Содержимое. Второй Data указывает. Соглашение. Второй Data указывает. Второй Data. Второй Data. Второй Data. Второй DATA. в self.result = data.data; // Получить данные}, function (err) {console.log (err);}); },};ОК, мы успешно обращаемся к данным функции. Что касается раздела поиска, следующее приведено краткое изложение неизвестных точек знаний.
Сводка знаний
1. Как написать массив в строку
2. Что касается использования замены замены с функцией
Ecmascript предусматривает, что замена параметра метода reply () может быть функцией или строкой. В этом случае каждый матч вызывает функцию, и слово, которое оно возвращает
Строка будет использоваться вместо текста. Первый параметр, возвращаемый функцией обратного вызова функции, указывает на соответствующий символ, а также второй и впоследствии соответствующие данные пакета. Давайте посмотрим на код.
3. Что, черт возьми, [P.Slice (0, Index)] [P.Slice (Index+1)]? Вы узнаете после отладки.
Давайте посмотрим, что означает код синтеза.
var arr = serv.map (function (xx) {return item.html.replace (/{{([/w /.++? Formatfield (xx [p]);}});4. Что касается принципа таймера, давайте сначала посмотрим на код
Почему выход -1? Давайте сначала посмотрим на принцип SetTimeout ()
setTimeout () выполняет код только один раз. Если вы хотите позвонить несколько раз, используйте setInterval () или снова попросите самого кода settimeout ().
SetTimeout используется для откладывания на период времени, прежде чем выполнять определенную операцию. То есть после того, как указанное время задерживается после загрузки, выражение выполняется один раз, и только один раз выполняется.
setTimeout (код, время задержки);
Время задержки - это не время, которое вы ожидаете. Разные браузеры имеют разное время задержки. Возьмите пример выше, то есть время задержки не является 0 выше. Сравнение
Другими словами, Settimeout выполняется только один раз, но время не 0. Не уверен, сколько задержки секунды. Тогда неудивительно, почему он появляется как -1. Давайте проанализируем программу.
Когда я = 3, после (3), я уменьшается до 2 и выполняю установку
Когда я = 2, после (2), я уменьшается до 1 и выполняю установку
Когда я = 1, после (0), я уменьшается до 2, и выполняется установка
Когда я = 0, после (0), я уменьшается до -1. В настоящее время программа заканчивается, но интервал времени для установки SetTimeout равен 0, не поймет выполнение, и она будет вставлена в очередь выполнения потока, ожидая I
Когда он станет -1, будут выполнены предыдущие три установки, и в настоящее время я изменил -1, поэтому выход равен -1. Консоль, напечатанная в это время, напечатана предыдущей консолью.
SetTimeout - это асинхронный код, что означает, что написание SetTimeout (FN, 100) не означает, что FN будет выполнен сразу после 100 миллисекунд, и задержка, вероятно, будет длиннее. Потому что все
Асинхронные события (включая таймеры или xmlhttprequest, завершенные) будут выполнены только тогда, когда есть бесплатно во время выполнения программы, а не тогда, когда вы предусматриваете при выполнении.
Выше приведено краткое изложение проблемы вставки стиля AngularJS в Ueditor, представленном редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!